Використання графіки в 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	Тулить обтічне текстом зображення до правій стороні вікна браузера

Приклад

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

<img src=exm.gif align=top> Перший рядок тексту знаходиться зверху зображення і зазвичай використовується для опису малюнка.

<img src=exm.gif align=middle> Перший рядок тексту знаходиться по середині зображення і використовується для того ж.

<img src=exm.gif align=bottom> Перший рядок тексту знаходиться внизу зображення і використовується також як і у двох перших випадках.

<img src=exm.gif align=left> Зображення притискається до лівого краю вікна перегляду, а текст обтікає зображення праворуч.

<img src=exm.gif align=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>

Абсолютний і відносний URL

У розділі, присвяченому комп'ютерних мережах і принципам пошуку інформації в Інтернет, було введено поняття URL (універсального локатора ресурсу), однозначно визначає розташування об'єкта в глобальній мережі. У загальному випадку URL має такий вигляд (частини, укладені в квадратні дужки, не обов'язкові і можуть бути опущені):

протокол: / / адрес_узла [: порт] / шлях / файл [# мітка]

У таблиці нижче наведені призначення компонент URL.

Компонента	Призначення
протокол	Позначення одного з протоколів, використовуваних для звернення до ресурсу, можливі значення: http, ftp, file та ін
адрес_узла	Доменне ім'я або IP-адреса комп'ютера в мережі Інтернет
порт	Порт за яким клієнт звертається до сервера для встановлення з'єднання; вказується тільки у разі звернення до нестандартного порту
шлях	Шлях до потрібного ресурсу
файл	Файл, що містить HTML-документ або інший ресурс
мітка	Позиція в документі, починаючи з якої він відображається у вікні браузера

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

Приклад

При зверненні до конкретного ресурсу порт і позиція в документі часто не вказуються:

http://www.ctc.msiu.ru/education/book/index1.html

Приклад

Розглянемо посилання на так звану домашню сторінку (Home Page) конкретного користувача. Припустимо, що на сервері www.msiu.ru зареєстрований людина з користувальницьким ім'ям (login) ivanov. Домашньою сторінкою називають файл index.html, що знаходиться в директорії з ім'ям public_html, яка, у свою чергу, повинна розташовуватися в домашньої директорії користувача. Тоді посилання на домашню сторінку цього людини може бути задана у вигляді

<A HREF="http://www.msiu.ru/~ivanov">Текст посилання</A>

Зверніть увагу, що ім'я самого файлу при такому записі не вказується. Якщо буде потрібно послатися на який-небудь інший документ даного користувача, розташований в директорії public_html, наприклад, photo.html, то посилання прийме вигляд:

<A HREF="http://www.msiu.ru/~ivanov/photo.html"> Текст</A>

Відносний URL описує становище ресурсу, на який вказує посилання, щодо URL поточного документа.

Приклад

При завданні відносних посилань вказується шлях по файлового дереву до того місця, де знаходиться потрібний HTML-ресурс. Ось посилання на документ image.html, розміщений в поточному каталозі: <A HREF="image.html">Посилання</A>.

Якщо файл pict.html лежить в батьківському по відношенню до поточним документом каталозі, то слід використовувати запис

<A HREF="../pict.html">Текст посилання</a>

Якщо ж потрібний документ знаходиться в піддиректорії Picture, то використовується запис, аналогічна наступної

<A HREF="Picture/pict.html">Текст посилання</A>