Зображення

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

Відео-урок