2.7. Включення зображень в Web-сторінку

Для вставляння зображень в Web-сторінку застосовують дескриптор - <img>. Дескриптор <img> може містити атрибути, які дозволяють контролювати розміщення й особливості виводу зображення. Дескриптори <img> завжди включаються в тіло документа. Для вставляння зображення треба вказати його джерело (файл зображення), тому в складі дескриптора <img> обов'язково повинен бути присутнім атрибут src. Для дескриптора <img> закриваючий дескриптор не передбачений. Замість закриваючого дескриптора перед закриваючою кутовою дужкою вказується символ "/", наприклад:

<img src="fon.gif"/>

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

<img src="images/fon.gif"/>

Для вказування файлу із зображенням, що знаходиться в іншому каталозі на жорсткому диску, використовується абсолютний URL:

<img src="c:/images/fon.gif">

При створенні Web-вузла рекомендується використовувати відносні URL, тому що Web-сторінки з відносними URL є коректними навіть при перенесенні вузла на інший комп'ютер.

Для керування виводом зображення до складу дескриптора <img> можуть включатися перераховані нижче атрибути:

• width="x". Даний атрибут задає ширину зображення в пікселях. При розробці Web-документів рекомендується використовувати атрибут width.

• height="x". Аналогічно атрибуту width, атрибут height задає висоту зображення в пікселях. Щоб браузер міг зарезервувати місце для зображення, бажане включати цей атрибут до складу дескриптора <img>.

• border="x". Даний атрибут дозволяє додати або вилучити рамку навколо зображення. Числове значення x визначає товщину рамки в пікселях. Якщо зображення не оформлене як гіпертекстове посилання, то колір рамки співпадає з поточним кольором тексту. Якщо зображення виконує функції гіпертекстового посилання, колір рамки відповідає установкам браузера. Найчастіше, якщо посилання ще не було активізовано, рамка відображається синім кольором, а для посилання, яке вже відвідувалося, виводиться фіолетова рамка. Для того щоб заборонити відображення рамки, треба задати атрибут border="0".

• align="x". Даний атрибут дозволяє вирівнювати зображення по горизонталі або по вертикалі. Існує декілька способів вирівнювання зображень. За замовчуванням зображення вирівнюється по лівому краю. За необхідностю ви можна вирівняти зображення по правому краю, для цього дескриптор <img> буде мати такий вигляд:

<img src="foto.jpg" width="381" height="273" border="0" align="right"/>

Нижче перелічені стандартні значення атрибута align:

• "top" - верхня частина зображення вирівнюється по верхній частині поточного рядка;

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

• "bottom" - нижня частина зображення вирівнюється по нижній частині поточного рядка.

Якщо браузер підтримує тільки текст, атрибут alt дозволяє виводити у вікні браузера символьний опис зображення - alt="опис зображення". Крім того, текст, заданий за допомогою атрибута alt, виводиться перед завантаженням зображення, а також відображається в спеціальному вікні при наведенні на зображення курсору миші. Наприклад:

<img src="/images/interfax.gif" alt="Interfax" width="94" height="38" border="0">

Атрибут hspace="x" задає число пікселів праворуч і ліворуч від зображення, vspace="x" - задає число пікселів зверху й знизу від зображення.

Приклад обтікання картинки текстом: