KNOWLEDGE HYPERMARKET


Картинка-посилання. Повні уроки

Гіпермаркет Знань>>Інформатика>>Інформатика 10 клас. Повні уроки>> Інформатика: Картинка-посилання.

Тема: Картинка-посилання.

Мета: Розглянути процес створення графічних посилань.

Тип уроку: теоретично-практичний

Хід уроку:


Як було вже сказано в попередньому уроці, основою для гіперпосилання може служити не лише текстовий фрагмент, але і будь-який графічний елемент (картинка, малюнок, фотографія тощо). Принцип створення таких посилань практично той же, що і у випадку з текстом.

Але зараз в тег <a></a> вставлятиметься не текстова інформація, а картинка:

<a href="foto.html"><img src="im 1.jpg"></a>

Ось що у нас вийшло:


Img-ss1.jpg


Тепер картинка з «мотоциклістом» служить гіперпосиланням на сторінку «foto.html». Але враження від розміщення і взаємозв'язку тексту з картинкою не дуже приємні.

По-перше, треба прибрати рамку з графічного посилання, тому що вона абсолютно не надає картинці естетичного вигляду. Отже, обрамлення картинки прибирається командою «border» зі значенням «0».

По-друге, треба виставити параметри обтікання картинки текстом. Робимо це за допомогою вже відомої команди «align».

Поправляємо наш HTML-код:

<a href="foto.html"><img src="im 1.jpg" border="0" align="left"></a>


Ось результат:

Img-ss2.jpg


Графічне посилання на e - mail

Також можна зробити яке-небудь зображення або картинку посиланням на власну електронну поштову скриньку.

Принцип такий же:

<a href="mailto: user123 @ ukr. net"><img src="em.jpg" border="0"></a>


Img-ss3.jpg


Колір рамки навколо картинки можна задавати атрибутом bordercolor, наприклад:

<a href="mailto: user123 @ ukr. net"><img src="em.jpg" border="5" bordercolor="blue"></a>


Img-ss4.jpg


Колір рамки.

У цьому прикладі був заданий синій колір рамки.

Якщо картинка є посиланням, то рамка буде того кольору, який задавався для посилань біля тегу <body> за допомогою команд LINK, VLINK, ALINK.

Тому, атрибут «bordercolor» в цьому випадку не впливатиме на колір рамки.


Графічне посилання на мультимедійні файли.

Блукаючи по Інтернету, часто можна потрапити на посилання для завантаження музичних файлів, фільмів, документів, фотографій, архівів і т.д. А це означає, що гіперпосилання працюють не лише з файлами з розширенням *.html, але з багатьма іншими - *.mp3, *.avi, *.doc, *.jpg, *.rar тощо. Використовуючи картинку-посилання, можна надати деяку естетичність процесу завантаження, наприклад, музичної композиції, використовуючи при цьому звичну усім іконку аудіофайлу:

<a href="music.mp3"><img src="winamp.jpg" border="0"></a>


Img-ss5.jpg


При натисненні на таке посилання, у користувача з'явиться віконце, яке запропонує зберегти музичну композицію на комп'ютер.

Img-ss6.jpg





Самоконтроль:


1. За допомогою яких команд картинку можна зробити як посилання?

2. Як прибрати рамку навколо графічного гіперпосилання?

3. Як і чим можна змінювати колір рамки навколо картинки?


Список використаної літератури:


1. Урок на тему: «Графічні посилання», Шак До. В., м. Харків.

2. Агулар Р. HTML и CSS. Основа любого сайта. - Эксмо, 2010.

3. Квинт И. HTML и XHTML. Языки разметки web-страниц. - Питер, 2010.

4. Богомолова О.Б. Web-конструирование на HTML. - БИНОМ. Лаборатория знаний, 2008.

5. Глинський Я., Ряжська В. Інтернет. Мережі, HTML і телекомунікації. Самоучитель. - Деол, 2007.


Скомпоновано та надіслано викладачем Київського національного університету імені Тараса Шевченка Соловйовим М. С.


Якщо у вас є виправлення чи пропозиції до цього уроку, напишіть нам.

Якщо ви хочете побачити інші виправлення чи пропозиції до уроків, дивіться тут - Образовательный форум.

Предмети > Інформатика > Інформатика 10 клас