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

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

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

index.html

index.html

copy

Основні атрибути:

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

Атрибут alt

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

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

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

index.html

index.html

copy

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

index.html

index.html

copy

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

Атрибут src

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

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

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

index.html

index.html

copy

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

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

Note
Примітка

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

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

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

index.html

index.html

copy

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

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

Note
Підсумок

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

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Suggested prompts:

Can you explain the difference between absolute and relative paths in more detail?

What are some tips for writing effective alt text for images?

Can you show more examples of using the img tag with different attributes?

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

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

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

index.html

index.html

copy

Основні атрибути:

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

Атрибут alt

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

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

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

index.html

index.html

copy

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

index.html

index.html

copy

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

Атрибут src

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

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

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

index.html

index.html

copy

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

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

Note
Примітка

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

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

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

index.html

index.html

copy

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

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

Note
Підсумок

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

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

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

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

question mark

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

Select the correct answer

question mark

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

Select the correct answer

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

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

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

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