Зміст курсу

Основи HTML

1. Розуміння Вебу та HTML

Вступ до Курсу Вступ до Вебу Коротка Історія Інтернету Чому нам потрібен HTML?Основна Структура HTML Документа Теги, Елементи та Атрибути

2. Основи HTML

Структура HTML Документа Завдання: Структура HTML Документа Розмітка Тексту Завдання: Розмітка Тексту Спеціальна Розмітка Тексту Завдання: Спеціальна Розмітка Тексту Списки Завдання: Списки

3. Зображення та Медіа

Зображення Завдання: Зображення Аудіо Завдання: Аудіо Відео Завдання: Відео

4. Таблиці та Форми

Таблиця Завдання: Таблиця Форми Завдання: Форми Елементи Інпут та Лейбл Форми Завдання: Елементи Інпут та Лейбл Форми Атрибути для Інпут Елементів

5. Розширений 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`, не може бути завантажене?

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

Select the correct answer

<image>

<picture>

<img>

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

Select the correct answer

src

source

height

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

Select the correct answer

Альтернативний текст для зображення.

Додаткова інформація про зображення.

URL-адреса джерела файлу зображення.

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

Select the correct answer

Зображення з'являється з іконкою зламаного посилання.

Натомість відображається атрибут alt.

Браузер відображає повідомлення про помилку.

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

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

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

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

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Зміст курсу

Основи HTML

1. Розуміння Вебу та HTML

2. Основи HTML

3. Зображення та Медіа

Зображення Завдання: Зображення Аудіо Завдання: Аудіо Відео Завдання: Відео

4. Таблиці та Форми

5. Розширений HTML

Семантичний HTML Семантичні Елементи Завдання: Семантичні Елементи Створення Цілого Вебсайту Висновок

Зображення

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


html

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

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

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

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`, не може бути завантажене?

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

Select the correct answer

<image>

<picture>

<img>

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

Select the correct answer

src

source

height

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

Select the correct answer

Альтернативний текст для зображення.

Додаткова інформація про зображення.

URL-адреса джерела файлу зображення.

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

Select the correct answer

Зображення з'являється з іконкою зламаного посилання.

Натомість відображається атрибут alt.

Браузер відображає повідомлення про помилку.

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

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

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

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

Основи HTML

Зображення

Зображення

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

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

Відео-урок

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

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

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

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

Основи HTML

Зображення

Зображення

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

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

Відео-урок

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

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

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

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

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

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

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

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

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

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