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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

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