Зображення

Зображення відіграють важливу роль у підвищенні візуальної привабливості та передачі інформації на веб-сторінках. У HTML зображення вставляються за допомогою тегу <img>.

Вставлення зображень

Тег <img> використовується для вставлення зображень у HTML-документ. На відміну від більшості HTML-тегів, тег <img> не має закриваючого тегу та є самозакриваючим.
Приклад:

<img src="image.jpg" alt="Description of the image">

У наведеному прикладі:

• Тег <img> використовується для вставлення зображення;
• Атрибут src вказує джерело (URL) файлу зображення;
• Атрибут alt надає альтернативний текст для зображення. Цей текст відображається, якщо зображення не може бути завантажене або для забезпечення доступності.

Перш ніж розглянути приклад із реального життя, ознайомимося з основними атрибутами тега img та їх впливом на його вміст.

Атрибути зображення

1. src: Вказує джерело (URL) файлу зображення. Цей атрибут є обов'язковим для відображення зображення за допомогою тега <img>;
2. alt: Містить альтернативний текст для зображення. Текст, зазначений у атрибуті alt, відображається, якщо зображення не може бути завантажене, або використовується для забезпечення доступності. Це важливо для користувачів, які використовують екранні читачі, або у випадках, коли зображення не відображається;
3. width: Вказує ширину зображення у пікселях або у відсотках від батьківського контейнера;
4. height: Вказує висоту зображення у пікселях або у відсотках від батьківського контейнера;
5. title: Надає додаткову інформацію про зображення. Зазвичай відображається як підказка при наведенні курсору на зображення.
   Приклад:

У наведеному вище прикладі:

• Тег <img> вставляє зображення на веб-сторінку;
• Атрибут src вказує URL-адресу джерела файлу зображення;
• Атрибут alt встановлює альтернативний текст для зображення;
• Атрибут width задає ширину зображення;
• Атрибут height задає висоту зображення;
• Атрибут title надає додаткову інформацію про зображення.

Відеоінструкція