Вивчайте Додавання зображень у HTML | Робота з Медіа та Таблицями

Свайпніть щоб показати меню

Зображення роблять веб-сторінки більш привабливими. Для вставки зображення використовується тег <img>.

index.html

src: обов'язковий. Шлях до файлу зображення (абсолютний або відносний);
alt: обов'язковий. Текст, який відображається, якщо зображення не завантажується, також використовується екранними читачами;
width / height: розмір у пікселях. Без них зображення відображається у своєму оригінальному розмірі.

Атрибут alt

Текст alt має чітко описувати зображення та надавати корисний контекст.

Уявімо наступний приклад. У вас є джерело про кінні перегони. Ви хочете показати, як учасники готуються до перегонів.

Невдалий текст alt:

index.html

Кращий текст alt:

index.html

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

Атрибут src може використовувати як абсолютні, так і відносні шляхи для вказання розташування файлу зображення.

Повна URL-адреса, що вказує на зображення в Інтернеті.

index.html

Будь-хто може отримати доступ до зображення за цим повним посиланням.

Будь ласка, перегляньте наступний реальний приклад.

Вказує на зображення всередині вашої папки проєкту.

index.html

Це означає, що image.jpg зберігається в директорії images поруч із вашим HTML-файлом.

Будь ласка, перегляньте реальний приклад нижче. Ви знайдете папку images, яка містить файл sun.png.

Підсумок

Абсолютні шляхи: повні URL-адреси, які працюють з будь-якого місця в інтернеті.

Відносні шляхи: локальні шляхи проекту, що використовуються у вашій власній структурі папок.

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

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

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

Запитати АІ

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

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