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