1. Вставка малюнків в Html-документ.

Вставка малюнка в Html-Документ проводиться в основному за допомогою дескриптора <img>. Формат даного дескриптора наступний:

<img src="{ім'я файлу з розширенням}">	вставка малюнка
alt="{текст}"	спливаюча підказка
border="{число}"	ширина рамки малюнка
width="{число}"	розмір малюнка по горизонталі
height="{число}"	розмір малюнка по вертикалі
align="Center"	розташування центру малюнка по середині тексту
hspace="{число}"	відступ малюнка від інших об'єктів по вертикалі
vspace="{число}"	відступ малюнка від інших об'єктів по горизонталі

Приклад:

<Img src="file.gif" Alt="My File" Width="300" Height="80%">

Мінімальний тег – це тег, малюнок і адреса його розташування

<IMG SRC="risunok.gif">

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

<IMG SRC="http://www.ru/my/Images/risunok.gif">

А якщо сторінка перебуває в одній директорії, а малюнок перебуває в наступній (наприклад вона названа picture), те треба просто написати:

<IMG SRC="picture/risunok.gif">

2. Додавання рамок

Рамки отримують основний колір тексту, а якщо малюнок укладений у тег гіперпосилань, то він отримує колір гіперпосилань. Треба вставити в тег малюнка атрибут BORDER="0|1|2|3|5|6...", де 0|1|2|3|5|6... - це товщина рамки. Вона може бути будь-яка.

Приклад:

<IMG SRC="risunok.gif" BORDER="4">

3. Визначення розмірів

Якщо сторінки складаються в більшості з малюнків, то якщо зображення не завантажиться (деякі користувачі відключають або не можуть переглядати малюнки) він може порушити Ваш дизайн. Тут потрібні два атрибути HEIGHT і WIDTH. Значення "1|2|3|5|6..." – це значення в пікселях, "1%|2%|3%|5%|6%..." –у відсотках від вікна.

Приклад тегу малюнка з атрибутом розміру в пікселях:

<IMG SRC="risunok.gif" HEIGHT="90" WIDTH="400">

4. Визначення відстань від країв малюнка

Можна легко задати відстань від країв малюнка, не збільшуючи сам малюнок або застосовуючи інші заходи. Це атрибути VSPACE (вниз і нагору) і HSPACE (вправо й вліво) і значення в них "0|1|2|3|5|6...".

Приклад:

<IMG SRC="risunok.gif" HSPACE="15" VSPACE="10">

5. Додавання тексту до малюнка (підказки)

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

Приклад:

<IMG SRC="risunok.gif" ALT="Ваш текст до малюнка.">

6. Визначення відстані відносно тексту.

Значення атрибуту ALIGN:

Left	малюнок перебуває ліворуч, а текст обгинає його з правої сторони
Right	малюнок перебуває праворуч, а текст обгинає його з лівої сторони
Top	текст перебуває в самого верху зображення
Middle	базисна лінія тексту перебуває в середині зображення
Bottom	текст перебуває внизу зображення
absmiddle	текст перебуває в середині зображення
absbottom	схоже на bottom
Baseline	теж саме, що й bottom
Texttop	подібно top

Приклад:

<IMG SRC="risunok.gif" ALIGN="left">

Питання для захисту роботи № 16

1. Які формати графічних файлів Ви знаєте? Переваги та недоліки.

2. Атрибути тегу вставки малюнків.

3. Яким чином можна внести підказки до малюнків?

4. Як змінити розмір рамок?

5. Як встановити розмір малюнку у відносних від розмірів сторінки величинах?

Державна служба України з надзвичайних ситуацій

Академія пожежної безпеки ім.Героїв Чорнобиля