Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Додавання Зображень у HTML | Робота з Медіа та Таблицями
Learn
Курси
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
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

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

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