Рисунки

Для вставки рисунка в HTML-сторінку використовується тег <img>. Основним параметром цього тегу є параметр src за допомогою якого вказується адреса файлу в якому і зберігається рисунок. Найпоширенішими форматами файлів-рисунків є формати jpg, gif, png. Відзначимо, що адреса файла-рисунка може бути вказана в абсолютному та відносному форматі. При використані абсолютного формату в адресі, повністю визначено комп’ютер, каталог та файл рисунку. Наприклад, для вставки рисунка, що зберігається в файлі logo.gif, за адресою www.picture.com.ua/picture необхідно:

<img src=" www.picture.com.ua/picture/logo.gif">

При використанні відносного формату визначення місцезнаходження файла-рисунку відбувається з урахуванням місцезнаходження даної HTML-сторінки. Наприклад для вставки в HTML-сторінку prim.html рисунка, який зберігається в файлі logo.gif, що знаходиться одному каталозі з файлом prim.html необхідно:

<img src="logo.gif">

Графічні файли зручно зберігати в окремому, наприклад в каталозі з іменем img. В цьому випадку, для вставки в HTML-сторінку prim.html рисунка logo.gif необхідно:

<img src="img/logo.gif">

Відзначимо, що каталог img та файл prim.html повинні знаходитись в одному каталозі. Крім обов’язкового параметру src тег <img> має декілька необов’язкових параметрів, див. табл. 3.1.

Таблиця 3.1

Параметри тегу <img>

Розглянемо призначення вказаних параметрів докладніше. Досить часто при перегляді HTML-сторінок користувачі використовують браузера, що працює в режимі відключення завантаження зображень. Як відомо цей режим дозволяє зменшити час відображення HTML-сторінки в вікні браузера. В цьому випадку замість зображення на екрані з’являється альтернативний текст заданий в параметрі alt. Крім цього альтернативний текст відображається в якості підказки при знаходженні курсору "миші" в області рисунку. Приклад використання параметру alt:

<img src="logo.gif" alt="Альтернативний текст" >

Параметри width та height призначені для визначення розмірів рисунку у вікні браузера. Відзначимо, що при зміні розмірів зображення розмір файлу не змінюється, тобто час завантаження рисунку не змінюється. Наведемо приклад застосування параметрів alt, width та height для одного і того рисунку:

<img src="logo.gif" width="184" height ="164" alt="Альтернативний текст" >

<img src="logo.gif" width=" 92 " height =" 82" alt="Альтернативний текст" >

<img src="logo.gif" width=" 150 " height ="40 " alt="Альтернативний текст" >

Відповідне вікно браузера показане на рис. 3.1.

Рис. 3.1 Використання параметрів alt, width та height тегу <img>

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

Параметр border дозволяє визначити товщину рамки навколо рисунку. Застосуємо цей параметр із значенням 2, для рисунків попереднього прикладу:

<img src="logo.gif" width="184" height ="164" border="2">

<img src="logo.gif" width=" 92 " height =" 82" border="2" >

<img src="logo.gif" width=" 150 " height ="40 " border="2">

Відповідне вікно браузера показане на рис. 3.2.

Рис. 3.2. Використання параметрів border, width та height тегу <img>

Параметри hspace та vspace дозволяють в пікселях задавати відступи від рисунку до інших об’єктів на HTML-сторінці. Покажемо застосування цих параметрів із значеннями 20 та 20 для попереднього прикладу:

<img src="logo.gif" width="184" height="164" hspace="20" vspace="20" border="2">

<img src="logo.gif" width=" 92 " height =" 82" hspace="20" vspace="20" border="2" >

<img src="logo.gif" width=" 150 " height ="40 " hspace="20" vspace="20" border="2">

Результат застосування показаний на рис. 3.3.

Рис. 3.3. Використання параметрів hspace, vspace, border, width та height тегу <img>

Параметр lowsrc дозволяє визначити файл з альтернативним зображенням, яке з’являється у вікні браузера до появи основного зображення. Альтернативне зображення, як правило, це рисунок того ж змісту, що і основний, але менш якісний. По цій причині файл альтернативного зображення менший за розміром, а тому завантажується набагато швидше ніж основний. Це дозволяє швидко показати загальні риси зображення. Приклад використання:

<img src="logo.gif" width="184" height="164" lowsrc ="small.gif">

Параметр align використовується для визначення горизонтального або вертикального вирівнювання рисунку відносно інших об’єктів на HTML-сторінці. Параметри вирівнювання залежать від значень параметру align. При використанні цього параметру із значеннями left або right рисунок прижимається відповідно до лівої або правої сторони вікна браузера, а текст "обтікає" зображення з протилежної сторони. Відзначимо, що в цьому випадку текст може займати декілька рядків. Приклад використання параметру align:

<body>

<img src="logo.gif" width="182" height="162" border="1" align="right">

Приклад використання параметру align="right". Рисунок розміщений

біля правої сторони вікна браузера. Текст обтікає зображення з лівої сторони.

</body>

Відповідне вікно браузера показане на рис. 3.4.

Рис. 3.4. Приклад вирівнювання рисунка по правому краю вікна браузера

Крім left та right параметр aling може приймати наступні значення:

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

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

- middle - середина зображення вирівнюється по базовій лінії рядка.

- absmiddle - середина зображення вирівнюється по середині рядка.

- bottom - нижня межа зображення вирівнюється по базовій лінії рядка

- absbottom - нижня межа зображення вирівнюється по нижній межі рядка

В цих випадках зображення можна розглядати як звичайний елемент рядка.

Відзначимо, що базова лінія тексту це нижня лінія рядка тексту без врахування нижньої частини деяких символів (р, j, y).

Наведемо приклад використання параметру align тегу <img> з значеннями top, middle та bottom:

<body>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="top">

Приклад використання параметру align="top". <br>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="middle">

Приклад використання параметру align="middle". <br>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="bottom">

Приклад використання параметру align="bottom".

</body>

Відповідне вікно браузера див. на рис. 3.5.

Рис. 3.5. Приклад використання параметру align тегу <img> з значеннями top, middle та bottom