Малюнки

Приклад вставки зображення:

< IMG SRC=" image.gif" ALT=" ЗОБРАЖЕННЯ" >

Атрибути та їх аргументи

Тег зображення має один обов'язковий атрибут SRC і необов'язкові: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

Атрибут SRC вказує файл зображення і шлях до нього; зображення повинно бути додано в браузер і розміщене в тому місці документа, де розташований тег зображення.

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

Атрибут АLIGN визначає розташування зображення щодо навколишнього його тексту. Можливі значення аргументу – [" top" | " middle" | " bottom" ] (відповідно, " на горі", " посередині", " внизу").

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

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

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

Крім основних значень атрибуту ALIGN = " ключове слово" існує ще ряд аргументів, які розширюють можливості взаємного розміщення графіки та тексту. Розглянемо їх докладніше.

Додаткові можливі значення аргументу – [" left" | " right" | " top" | " texttop" | " middle" | " absmiddle" | " baseline" | " bottom" | " absbottom" ].

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

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

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

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

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

ALIGN = " absmiddle" вирівнює центр зображення по центру рядка навколишнього тексту.

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

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

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

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

Атрибут BORDER. Цілочисельне значення аргументу визначає товщину рамки навколо зображення. Якщо значення дорівнює нулю, рамка відсутня. Щоб не вводити користувачів в оману, не варто задіяти BORDER = 0 в зображеннях, які являють собою частину елемента якоря, оскільки малюнки, які застосовуються як гіперпосилання, звичайно виділяються кольоровий рамкою.

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

Атрибут VSPACE. Цілочисельне значення цього атрибута задає вертикальне відстань між рядками тексту і зображенням.

Атрибути WIDTH і HEIGHT. Обидва атрибути задають цілочисельні значення розмірів зображення по горизонталі та по вертикалі відповідно. Це дозволяє зменшити час завантаження сторінки з графікою. Браузер відразу відводить рамку для зображення і продовжує завантажувати текст на сторінку. Поки завантажується графіка, користувач може почати читати текст. Визначити розмір зображення неважко, для цього достатньо скористатися будь-якою програмою перегляду графічних файлів, наприклад ACDSee або графічним редактором Corel PhotoPaint або Adobe Photoshop. Відкрийте файл у графічному редакторі та визначте розмір картинки в пікселях. У тезі зображення варто вказати ширину і висоту зображення.

< IMG SRC = " image.gif" ALT = " зображення" WIDTH = " 100" HEIGHT = " 200" HSPACE = " 10" VSPACE = " 10"

BORDER = " 2" ALIGN = " left" >