3. Використання графіки в html

Зображення можуть нести визначену інформацію, та й просто додають Web-сторінці привабливий вигляд. Приведемо найбільш розповсюджені випадки застосування зображень:

• логотип компанії на діловій сторінці;

• графіка для рекламного оголошення;

• різні малюнки;

• діаграми і графіки;

• художні шрифти;

• підпис автора сторінки;

. застосування графічного рядка в якості горизонтальної розділової лінії; • застосування графічних маркерів для створення красивих маркірованих списків.

Тегом HTML, що виводить GIF, JPEG або PNG зображення є <IMG> Э обов'язковим атрибутом SRC (ім'ям файлу, від SouRCe - джерело). Ім'я файлу являє собою ім'я графічного файлу, що виводиться. Закриваючого Тега не потрібно. Приклад вставки зображення: <IMG SRC="image.gif' АЬТ="ЗОБРАЖЕННЯ">

Зображення на Web-сторінці можуть використовуватися як гіпертекстові посилання, так як і звичайний текст. Читач після натискування на зображенні відправляється на іншу сторінку або переходить до іншого зображення. Для позначення зображення як гіпертекстової мітки використовується той же тег <А>, що і для тексту, але між <А> і </А> вставляється тег зображення <IMG> : <А HREF="aflpeca файлу або зображення"> <IMG SRC="image.gif'></А> При цьому зображення, яке використовується як гіпертекстове посилання, обводиться додатковою рамкою.

В таблиці 4 наведені атрибути тегу IMG.

Таблиця 4

Атрибути тегу IMG

Атрибут Значення ' Примітка

1 2 3

SR.C Вказує файл зображення і шлях до нього Зображення має бути завантажене в браузер і розміщене в тому місці документа, де розташований тег зображення

ALT Вказує текст, що буде виводитися оглядачами замість зображення Текст виводиться при відключенні у браузері відображення графіки. Наявність назв замість картинок полегшує сприйняття Web-сторінок у такому режимі.

ALIGN Визначає положення зображення щодо оточуючого його тексту. ALIGN="middle" вирівнює центр зображення по базовій лінії

рядка тексту, що оточує його.

ALIGN="bottom" вирівнює нижній край зображення по базовій

лінії рядка тексту, що оточує його.

ALIGN="top" вирівнює верх зображення по верхньому краю

найвищого елемента в рядку навколишнього тексту. Додаткові можливі значення аргументу ALIGN="Ieft" визначає зображення, що обгинається ТЄКСТОМ, Зображення розташовується вздовж лівої межі документа, а наступні рядки тексту обгинають його праворуч. ALIGN=" right" визначає зображення, що обгинається текстом! 1 Зображення розташовується уздовж правої границі документа, и наступні рядки тексту обгинають його ліворуч. ALIGN="top" вирівнює верх зображення по верхньому краї найвищого елемента в рядку навколишнього тексту точно Так само, як при використанні стандартного набору атрибутів.

ALIGN="texttop" вирівнює верх зображення по верхньому краї найвищого текстового символу в рядку навколишнього тексту, Дія цього аргументу в більшості випадків, але не завжди, подібно дії аргументу ALIGN-'top".

ALIGN="middle" вирівнює центр зображення по базисній ЛІНІЇ рядка навколишнього тексту точно так само, як при використанні стандартного набору атрибутів. ALIGN="absmiddie" вирівнює центр зображення по центрі рядка навколишнього тексту.

ALIGN="baseline" вирівнює нижній край зображення по базисній лінії рядка навколишнього тексту, тобто робить таку ж дію, як і ALIGN-'bottom".

AHGN="bottom" вирівнює нижній край зображення по базисній лінії рядка навколишнього тексту точно так само, як при використанні стандартного набору атрибутів ALIGN="absbottom" вирівнює нижній край зображення по нижньому краї рядка навколишнього тексту.

USEMAP Якщо натиснути кнопкою мишки на активній області зображення, для якого визначений атрибут USEMAP, відбудетеся гіпертекстовий перехід до інформаційного ресурсу, установленому для цієї області Використовується з тегом <МАР>

HSPACE Цілочисельне значення задає горизонтальну відстань між вертикальною границею сторінки і зображенням, а також між зображенням і текстом, що обгинає його ■ •■ " щ

VSPACE Вказує вертикальну відстань між рядками тексту і зображенням

BORDER Вказує товщину рамки навколо зображення

WIDTH Вказує значення розмірів зображення по горизонталі Це дозволяє зменшити час завантаження сторінки з графікою. Оглядач відводить рамку для зображення і продовжує завантажувати текст на сторінку. Значення задаються у пікселах або у відсотках

HEIGHT Вказує значення розмірів зображення по вертикалі

Контрольні питаний Назвіть атрибути тегу <body> та їх призначення. Як задати фон таблиці, рядку таблиці, стовпця таблиці? Назвіть атрибути тегів <table>, <tr>, <td>. Як додати зображення на web-сторінку?

Як створити гіпертекстове посилання на Web-сторшнІ у вигляді їображеиня ?