Зміст курсу
Основи HTML
Основи HTML
Зображення
Зображення
Зображення відіграють важливу роль у покращенні візуальної привабливості та передачі інформації на веб-сторінках. У HTML зображення вставляються за допомогою тегу <img>
.
Вставка зображень
Тег <img>
використовується для вставки зображень у HTML-документ. На відміну від більшості HTML-тегів, тег <img>
не має закриваючого тегу і є самозакриваючим.
Приклад:
html
У наведеному вище прикладі:
Тег
<img>
використовується для вставки зображення;Атрибут
src
вказує джерело (URL) файлу зображення;Атрибут
alt
надає альтернативний текст для зображення. Цей текст відображається, якщо зображення не може бути завантажено або для цілей доступності.
Перш ніж досліджувати приклад з реального світу, давайте зрозуміємо основні атрибути тегу img
і як вони впливають на його вміст.
Атрибути зображення
src
: Вказує джерело (URL) файлу зображення. Цей атрибут є обов'язковим для тегу<img>
, щоб відобразити зображення;alt
: Надає альтернативний текст для зображення. Текст, вказаний в атрибутіalt
, відображається, якщо зображення не може бути завантажено або для цілей доступності. Це важливо для користувачів, які можуть використовувати екранні читачі, або для ситуацій, коли зображення не може бути відображено;width
: Вказує ширину зображення в пікселях або як відсоток від батьківського контейнера;height
: Вказує висоту зображення в пікселях або як відсоток від батьківського контейнера;title
: Надає додаткову інформацію про зображення. Часто відображається як підказка, коли користувач наводить курсор на зображення.
Приклад :
index.html
У наведеному вище прикладі:
Тег
<img>
вставляє зображення на веб-сторінку;Атрибут
src
вказує URL-адресу джерела файлу зображення;Атрибут
alt
встановлює альтернативний текст для зображення;Атрибут
width
встановлює ширину зображення;Атрибут
height
встановлює висоту зображення;Атрибут
title
надає додаткову інформацію про зображення.
Відео-урок
1. Який тег використовується для вставки зображень у HTML-документ?
2. Який атрибут є обов'язковим для тега <img>
, щоб відобразити зображення?
3. Що забезпечує атрибут alt
для зображення?
4. Що відбувається, якщо зображення, вказане в атрибуті src
, не може бути завантажене?
Дякуємо за ваш відгук!