Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Зображення | Зображення та Медіа
Основи HTML
course content

Зміст курсу

Основи HTML

Основи HTML

1. Розуміння Вебу та HTML
2. Основи HTML
3. Зображення та Медіа
4. Таблиці та Форми
5. Розширений HTML

bookЗображення

Зображення

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

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

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

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

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

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

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

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

index

css

index

js

index

copy

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

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

Відео-урок

1. Який тег використовується для вставки зображень у HTML-документ?
2. Який атрибут є обов'язковим для тега `<img>`, щоб відобразити зображення?
3. Що забезпечує атрибут `alt` для зображення?
4. Що відбувається, якщо зображення, вказане в атрибуті `src`, не може бути завантажене?
Який тег використовується для вставки зображень у HTML-документ?

Який тег використовується для вставки зображень у HTML-документ?

Виберіть правильну відповідь

Який атрибут є обов'язковим для тега `<img>`, щоб відобразити зображення?

Який атрибут є обов'язковим для тега <img>, щоб відобразити зображення?

Виберіть правильну відповідь

Що забезпечує атрибут `alt` для зображення?

Що забезпечує атрибут alt для зображення?

Виберіть правильну відповідь

Що відбувається, якщо зображення, вказане в атрибуті `src`, не може бути завантажене?

Що відбувається, якщо зображення, вказане в атрибуті src, не може бути завантажене?

Виберіть правильну відповідь

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 1
some-alt