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