Web-графіка

Важливу роль в оформленні Web-сторінок відіграють графічні зображення. Включення їх у HTML-документи дозволяє надати сторінці «настрою» (ліричного, гумористичного, ділового), подати інформацію, яку неможливо отримати з тексту, розбити сторінку на «теми», що дозволить користувачеві краще орієнтуватися в матеріалі. Для того, щоб сторінка подобалась відвідувачам, необхідно добитись оптимального співвідношення форми (дизайну) і змісту.

Швидкість появи зображення на екрані залежить від розміру файла зображення. Графіка, яка повільно завантажується, може «відлякати» відвідувачів сторінок. Для зменшення розміру файла необхідно використовувати зображення типу JPEG або GIF. Конвертацію графіки у ці формати можна здійснити за допомогою редакторів растрових зображень. Допустимими зображеннями є такі, розмір яких не перевищує 40-50 Кбайт.

На HTML-сторінках графіку можна розміщувати різними способами.

Вбудовані зображення — це графічні зображення, які завжди залишаються в одному і тому самому місці сторінки (справа від тексту чи іншого об'єкта що безпосередньо передує зображенню) і не обрамлюються текстом. Для гого, щоб помістити на Web-сторінці вбудоване зображення використовується елемент <IMG SRC=URL_зображення>. Дескриптор <IMG> є одиночним. В атрибуті 3RC (від слова source) необхідно вказати повну або відносну URL-адресу файла зображення. Наприклад:

<Р>Це зображення нової моделі процесора корпорації Intel

<IMG SRC="intel.jрg">цей текст розміщується одразу після малюнка

— розміщення на сторінці зображення, файл якого знаходиться в тому самому каталозі, що і сам HTML-файл (рис. 1.12).

За замовчуванням текст вирівнюється по нижній частині зображення. Для зміни типу вирівнювання використовують дескриптор IMG з атрибутом ALIGN. Нижче наведені значення, які можна присвоїти цьому атрибуту:

ТОР — вирівнює текст по верхньому краю зображення;

MIDDLE — вирівнює текст по середній частині зображення;

BOTTOM — вирівнює текст по нижньому краю зображення.

Рис. 1.12.

Наведемо код документа, що вміщує три зображення, для кожного з яких використовується один з варіантів вирівнювання. На рис. 1.13 подано Web-сторінку, створену на основі цього коду.

Лістинг 1.12.

<HTML>

<HEAD>

<TITLE> Використання атрибута ALIGN в дескрипторі IMG</TITLE>

</HEAD>

<BODY>

Цей текст вирівнюється по верхньому краю зображення </Р>

Цей текст вирівнюється по середній частині зображення</Р>

Цей текст вирівнюється по нижньому краю зображення</Р>

</BОDY>

</HTML>

Рис. 1.13

Плаваючі зображення — це зображення, що не прив'язуються до одного рядка тексту, а ніби «плавають» вздовж одного з полів і обрамлюються текстом.

Для створення плаваючих зображень використовується дескриптор <IMG> з атрибутом ALIGN. Для плаваючих зображень значення цього атрибута можуть бути LEFT (зображення плаває вздовж лівого краю тексту) або RIGHT (зображення плаває вздовж правого краю тексту). Наприклад:

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

Лістинг 1.13

<HTML>

<HEAD>

<TITLE> Використання атрибута ALIGN в дескрипторі IMG</TITLE>

</HEAD>

<BODY>

Цей текст розміщується праворуч від зображення і нижче.

</BODY>

</HTML>

На рис. 1.14 подано інтерпретацію цього коду броузером. У дескрипторі <IMG> можна використовувати атрибути HEIGHT і WIDTH для задания висоти та ширини зображення. За допомогою цих атрибутів «повідомляється» розмір зображення. Це дозволяє броузеру підготувати макет сторінки та розмістити текст до того, як будуть завантажені всі зображення. За допомогою цих атрибутів можна також змінювати розміри зображення. Так, наприклад, для збільшення зображення необхідно в атрибутах HEIGHT і WIDTH вказати більші величини, ніж реальні розміри зображення (які можна визначити з допомогою графічного редактора). Зауважимо, що зменшувати розмір зображення таким методом не доцільно, оскільки розмір файла, а отже і час завантаження при цьому не змінюються.

Рис. 1.14

За допомогою атрибута BGCOLOR дескриптора <BODY> можна визначити колір фону сторінки, вказавши у ньому шестицифрове шістнадцяткове число. Цей атрибут має такий формат:

rr, gg, bb — двоцифрові шістнадцяткові числа, які визначають відповідно червону, зелену та голубу складові кольору фону.

Наприклад:

<BоY BGC0L0R=#000000>

Для задания основних кольорів можна використовувати також зарезервовані імена (таблиця 1.4).

Таблиця 1.4.Зарезервовані імена кольорів

КОЛІР	ШІСТНАДЦЯТКОВИЙ ЕКВІВАЛЕНТ
BLACK (чорний)	#000000
MAROON (темно-бордовий)	#800000
GREEN (зелений)	#008000
OLIVE (оливковий)	#808000
NAVY (темно-синій)	#000080
PURPLE (фіолетовий)	#800080
TEAL (зеленувато-блакитний)	#008080
GRAY (сірий)	#808080
SILVER (сріблястий)	#С0СОСО
RED (червоний)	#FF0000
LIME (лимонний)	#00FF00
YELLOW (жовтий)	#FFFF00
BLUE (синій)	#0000FF
"FUCSHIA (фуксія)	#FF00FF
AQUA (морська хвиля)	#00FFFF
WHITE (білий)	#FFFFFF

Наприклад,

<! -- задається червоний колір фону -->

Для створення графічного фону використовується атрибут BACKGROUND дескриптора <BODY>. У цьому атрибуті потрібно вказати ім'я файла графічного зображення. Наприклад:

Колір основного тексту можна змінити за допомогою атрибута TEXT дескриптора <BODY>. Колір задається так, як і у випадку зміни кольору фону.

Зображення-гіперпосилання — це зображення на Web-сторінці, клацнувши на якому, можна відкрити нову Web-сторінку або службу Internet. Наприклад, можна помістити на Web-сторінці зображення поштової скриньки, клацнувши на якому користувачі зможуть відправляти повідомлення електронної пошти. HTML-код зображення-гіперпосилання має вигляд:

<А HREF="URL"><IMG SRC"URL-файла зображення"></А>

Із ціллю швидшого завантаження Web-сторінки має сенс створювати зменшені копії зображень (мініатюри зображень), які є гіперпосиланнями на відповідні їм зображення-оригінали. Мініатюри завантажуються швидко, даючи користувачеві уявлення про зображення-оригінали. Доступ до зображення-оригіналу можна отримати у будь-який момент, клацнувши лівою кнопкою миші на зображенні-гіперпосиланні.

Щоб використовувати мініатюри, необхідно мати дві копії зображення — велике зображення-оригінал і зменшене зображення. Для зменшення розмірів зображень використовують можливості графічних програм. Щоб зв'язати мініатюру з оригіналом необхідно помістити дескриптор, що задає мініатюру всередині дескриптора <А HREF> </A>, який є гіперпосиланням на велике зображення, наприклад:

<А HREF="big.gif"><IMG SRC="small. gif"></A>

Тут задано вказівку броузеру розмістити на Web-сторінці зображення (фай small, gif), що є гіперпосиланням на зображення, задане файлом big. gif.