Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Додавання Зображень у HTML | Робота з Медіа та Таблицями
Ultimate HTML
course content

Зміст курсу

Ultimate HTML

Ultimate HTML

1. Розуміння веб-розробки
3. Структура HTML-Документа

book
Додавання Зображень у HTML

Зображення є невід'ємною частиною веб-дизайну. Вони роблять веб-сторінку привабливою для відвідувача. Їх можна легко додати до HTML-документа за допомогою тега <img>.

html

index.html

copy
  • src: обов'язковий атрибут. Значенням є шлях до розташування зображення. Шлях може бути абсолютним або відносним;
  • alt: обов'язковий атрибут. Містить альтернативний текст, який відображається, якщо зображення не може бути завантажене;
  • width та height: визначають розмір зображення у пікселях. Без цих атрибутів зображення відображатиметься у своєму оригінальному розмірі.

Атрибут alt

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

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

Неправильне значення для атрибута alt буде:

html

index.html

copy

Гарне значення для атрибута alt буде:

html

index.html

copy

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

Атрибут src

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

Абсолютний шлях

Вказує повну URL-адресу файлу зображення на веб-сервері. Наприклад:

html

index.html

copy

Це означає, що файл зображення знаходиться за посиланням https://example.com/images/image.jpg в інтернеті. Будь-хто може отримати доступ до зображення за цим посиланням.

Будь ласка, ознайомтеся з наступним реальним прикладом у кодовому пісочниці нижче:

Примітка

Щоб переглянути структуру папок з файлами, перетягніть повзунок на лівій стороні інтерфейсу code sandbox. У верхньому лівому куті ви знайдете кнопку-бургер, яка позначена трьома смужками. Натиснувши цю кнопку, ви перейдете до організації папок з файлами.

Відносний шлях

Вказує розташування файлу зображення відносно поточного документа. Наприклад:

html

index.html

copy

Це означає, що файл image.jpg знаходиться в директорії images.

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

Примітка

Підсумовуючи різницю між відносними та абсолютними шляхами: абсолютний шлях — це фактичне посилання, яким може скористатися будь-хто для доступу до зображення. Натомість відносний шлях — це посилання в межах вашого проєкту. Він вказує на локальне зображення та шлях, яким можуть скористатися всі учасники проєкту.

1. Який тег можна використати для розміщення зображення на вебсайті?

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

question mark

Який тег можна використати для розміщення зображення на вебсайті?

Select the correct answer

question mark

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

Select the correct answer

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

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

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

Секція 4. Розділ 1
Ми дуже хвилюємося, що щось пішло не так. Що трапилося?
some-alt