Зображення

Порожні елементи

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

<img src="images/firefox-icon.png" alt="Моє тестове зображення">

Цей елемент має два атрибути, при цьому не має кінцевого тегу і жодного внутрішнього вмісту. Елементу image не потрібно загортати контент, його мета — вставити зображення на певне місце на веб-сторінці.

Цей елемент вставляє зображення на сторінку в тому місці, це воно має з'явитися. Це відбувається за допомогою атрибута src (source — джерело), який містить шлях до зображення.

Також ми додали атрибут alt (alternative). У цьому атрибуті потрібно вказувати альтернативний текст-опис зображення для тих випадків, коли користувачі не зможуть побачити картинку, наприклад, через те, що:

- Мають порушення зору. Користувачі з порушенням зору часто використовують скрін-рідери, які читають описи зображень.

- Щось пішло не так при завантаженні зображення. 

Спробуйте навмисно змінити шлях до зображення в атрибуті src, щоб він став неправильним. Якщо ви тепер перезавантажите сторінку, ви побачите, що на місці зображення буде текст:

Основним при створенні атрибута alt має бути описовість тексту. Цей атрибут має дати користувачу достатньо інформації, щоб скласти уявлення про те, що є на зображенні. У нашому випадку, текст "Моє тестове зображення" нікуди не годиться. Набагато кращий варіант для логотипу Firefox був би "Логотип Firefox: палаюча лисиця навколо Земної кулі."

Спробуйте придумати кращий альтернативний текст для свого зображення.

Вставлені зображення можна вирівнювати ( з атрибутом Align)

• center — центрування;
• left — вирівнювання за лівим краєм;
• right — вирівнювання за правим краєм.
• top i texttop - вирівнювання верхньої границі зображення з верхньою лінією поточного текстового рядка
• middle - вирівнювання базової лінії поточного текстового рядка з центром зображення
• absmiddle - вирівнювання центру поточного текстового рядка з центром зображення
• bottom i baseline - вирівнювання нижньої границі зображення з базовою лінією поточного текстового рядка
• absbottom

Також можна змінювати розміри зображень за допомогою атрибутів

Width - ширина

Heigth - висота

HSpase - відступ зображення по горизонталі

VSpase - відступ зображення по вертикалі (від інших об'єктів документа)