Зміст курсу
Ultimate HTML
Ultimate HTML
Додавання Зображень у HTML
Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Їх можна легко додати до HTML-документа за допомогою тега <img>
.
index.html
src
: обов'язковий атрибут. Значенням є шлях до розташування зображення. Шлях може бути абсолютним або відносним;alt
: обов'язковий атрибут. Містить альтернативний текст, який відображається, якщо зображення не може бути завантажене;width
таheight
: визначають розмір зображення у пікселях. Без цих атрибутів зображення відображатиметься у своєму оригінальному розмірі.
Атрибут alt
Опис зображення має бути інформативним і змістовним. Він допомагає описати зображення для людей із вадами зору або тих, хто не може його побачити. У такому разі браузер зчитує атрибут alt
, і користувач може зрозуміти, чому на сайті розміщено це зображення.
Уявімо наступний приклад. У вас є джерело про кінні перегони. Ви хочете показати, як учасники готуються до перегонів.
Неправильне значення для атрибута alt
буде:
index.html
Гарне значення для атрибута alt
буде:
index.html
Альтернативний текст "Чоловік на коні" є занадто загальним і не містить контексту. Він надає базовий опис, але не передає корисних деталей про сцену або призначення зображення.
Атрибут src
Атрибут src
може використовувати як абсолютні, так і відносні шляхи для вказівки розташування файлу зображення.
Абсолютний шлях
Вказує повну URL-адресу файлу зображення на веб-сервері. Наприклад:
index.html
Це означає, що файл зображення знаходиться за посиланням https://example.com/images/image.jpg
в інтернеті. Будь-хто може отримати доступ до зображення за цим посиланням.
Будь ласка, ознайомтеся з наступним реальним прикладом у кодовому пісочниці нижче:
Примітка
Щоб переглянути структуру папок з файлами, перетягніть повзунок на лівій стороні інтерфейсу code sandbox. У верхньому лівому куті ви знайдете кнопку-бургер, яка позначена трьома смужками. Натиснувши цю кнопку, ви перейдете до організації папок з файлами.
Відносний шлях
Вказує розташування файлу зображення відносно поточного документа. Наприклад:
index.html
Це означає, що файл image.jpg
знаходиться в директорії images
.
Будь ласка, перегляньте реальний приклад у кодовому пісочниці нижче. Ви знайдете папку images
, яка містить файл sun.png
.
Примітка
Підсумовуючи різницю між відносними та абсолютними шляхами: абсолютний шлях — це фактичне посилання, яким може скористатися будь-хто для доступу до зображення. Натомість відносний шлях — це посилання в межах вашого проєкту. Він вказує на локальне зображення та шлях, яким можуть скористатися всі учасники проєкту.
1. Який тег можна використати для розміщення зображення на вебсайті?
2. Який атрибут є обов'язковим для вказання у тегу <img/>
?
Дякуємо за ваш відгук!