Використання графіки в HTML-документах

Малюнки та анімація можуть зробити HTML-документ більш привабливим і цікавим. Вони не тільки прикрашають сторінку, але й допомагають краще передати зміст документа. Для правильного використання графіки в HTML-документі необхідно враховувати наступні фактори: багато браузери підтримують тільки графічні формати GIF і JPEG; файли, що містять графіку, передаються повільно; деякі користувачі не мають графічних браузерів, або має намір відключають завантаження зображень; кольорова графіка, яка добре виглядає на вашому комп'ютері, може погано виглядати на іншому.

Тег <IMG> вставляє зображення в документ, як якщо б воно було просто одним великим символом. Синтаксис тега:
<IMG атрібут1=значення1... [АтрібутN=значеніеN]>

Атрибути тега <IMG> та їх значення наведені в таблиці.

Атрибут	Призначення
SRC="файл"	Задає URL-адресу зображення (можна вказувати як абсолютний, так і відносний URL-адреса; якщо файл із зображенням знаходиться в тій же директорії, що і HTML-документ, то досить просто вказати ім'я файлу); цей атрибут є обов'язковим
ALT="текст"	Задає альтернативний текст для браузерів, що не підтримують роботу з зображеннями
ALIGN="тип"	Задає розташування картинки щодо тексту, тип може приймати наступні значення: ТОР, MIDDLE, BOTTON, LEFT, RIGHT
BORDER=n	Встановлює товщину обрамлення навколо зображення у пікселях
HEIGHT=n (%)	Встановлює висоту зображення в пікселах або у відсотках від висоти вікна браузера
WIDTH=n (%)	Встановлює ширину зображення в пікселах або у відсотках
HSPACE=n	Задає вільний простір зліва і праворуч від зображення (у пікселях)
VSPACE=n	Здається вільний простір над і під зображенням (у пікселях)

Зверніть увагу, що ширина і висота зображення можуть бути задані НЕ тільки в пікселах, а й у відсотках від розмірів вікна браузера. Багато компоненти, що включаються до складу Web-сторінок (зображення, таблиці, аплети і т. д.), дозволяють задавати розмір у відносних одиницях (тобто в відсотках). Це дозволяє зменшити залежність зовнішнього вигляду документа від поточних установок конкретного браузера і особливостей операційної системи. Рекомендується задавати тільки один з атрибутів пари "ширина-висота" зображення, інакше малюнок може бути непропорційно деформований і змінить свій вигляд.

Приклад
Якщо розмір зображення, що зберігається у файлі exm2.gif складає 150 пікселів по ширині і 90 по висоті, то наступна команда призведе до включення в документ деформованого зображення: <IMG SRC="exm2.gif" WIDTH=50 HEIGHT=200> .

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

Мова HTML дозволяє задати розташування зображення щодо навколишнього його тексту. Атрибут ALIGN може приймати наступні значення.

Значення	Функція
ТОР	Вирівнює один рядок по верху зображення, решта поміщає після малюнка
MIDDLE	Вирівнює один рядок по середині зображення, решта поміщає після малюнка
BOTTOM	Вирівнює один рядок по низу зображення, решта поміщає після малюнка
LEFT	Тулить обтічне текстом зображення до лівій стороні вікна браузера
RIGHT	Тулить обтічне текстом зображення до правій стороні вікна браузера

Приклад
Розглянемо можливі варіанти вирівнювання зображення щодо тексту.

Перший рядок тексту знаходиться зверху зображення і зазвичай використовується для опису малюнка.

Перший рядок тексту знаходиться по середині зображення і використовується для того ж.

Перший рядок тексту знаходиться внизу зображення і використовується також як і у двох перших випадках.

Зображення притискається до лівого краю вікна перегляду, а текст обтікає зображення праворуч.

Зображення притискається до правого краю вікна перегляду, а текст обтікає зображення зліва.

Гіперпосилання

Незважаючи на те, що до складу HTML-документа входять самі різні компоненти, можна сказати, що гіпертекстові посилання - основа WWW. Якщо б Web-сторінки не посилалися один на одного, вміст Web перетворилося б на звичайний набір файлів, не пов'язаних між собою.

Для створення гіпертекстового посилання використовується пара тегів <A>...</A>. Фрагмент тексту, зображення або будь-який інший об'єкт, розташований між цими тегами, відображається у вікні браузера як гіпертекстова посилання. Активація такого об'єкта призводить до завантаженні у вікно браузера нового документа або до відображення іншої частини поточної Web-сторінки. Гіпертекстова посилання формується за допомогою виразу

<A HREF="URL_ресурса"> фрагмент документа </A>

HREF тут є обов'язковим атрибутом, значення якого і є URL-адреса запитуваного ресурсу. Лапки в завданні значення атрибуту HREF не обов'язкові.

Текстові покажчики, тобто фрагменти тексту, які є посиланнями, не відрізняються різноманітністю зовнішнього вигляду. Зазвичай такий покажчик являє собою слово або слова, підкреслені прямою лінією. Колір покажчика може регулюватися автором і установками

програми перегляду.

Приклад
<A HREF="example.html"> Посилання </A>

Графічні покажчики, тобто зображення-посилання, виділяються рамкою того ж кольору, що й текстові покажчики.

Приклад
<A HREF="example.html"> <IMG SRC="pict.gif"> </A>