НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Як зробити? ДОВІДНИКИ БІЛЬШЕ 🔍 ◑ ВПРАВИ
HTML5. Уроки для початківців. W3Schools українською

En Es De Fr

HTML Зображення

❮ Prev Next ❯

В цій темі:

Зображення можуть поліпшити дизайн і зовнішній вигляд вебсторінка.

Приклад

<img src="pic_trulli.jpg" alt="Italian Trulli">
Спробуйте самі »

Приклад

<img src="img_girl.jpg" alt="Girl in a jacket">
Спробуйте самі »

Приклад

<img src="img_chania.jpg" alt="Flowers in Chania">
Спробуйте самі »

HTML Синтаксис зображень

В HTML зображення визначаються за допомогою тега <img>.

Тег <img> пустий, містить лише атрибути і не має закриваючого тега.

Атрибут src вказує URL (вебадресу) зображення:

<img src="url">

Атрибут alt

Атрибут alt надає альтернативний текст для зображення, якщо користувач з якоїсь причини не може його переглянути: через повільне підключення до Інтернету, помилки в атрибуті src або якщо користувач використовує програму читання з екрана (скрінрідер).

Значення атрибута alt має описувати зображення, тобто те, що на ньому зображено:

Приклад

<img src="img_chania.jpg" alt="Flowers in Chania">
Спробуйте самі »

Якщо браузер не може знайти зображення, він відображає значення атрибута alt:

Приклад

<img src="wrongname.gif" alt="Flowers in Chania">
Спробуйте самі »

Примітка: Атрибут alt обов'язковий згідно зі специфікацією HTML5. Без нього вебсторінка не буде вважатися валідною (тобто, відповідати стандарту HTML5).

Розмір зображення - Width та Height - Ширина та Висота

Ви можете використовувати атрибут style для вказівки ширини та висоти зображення.

Приклад

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Спробуйте самі »

Крім того, ви можете використовувати атрибути width та height:

Приклад

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Спробуйте самі »

Атрибути width та height завжди визначають ширину і висоту зображення в пікселях.

Примітка: Завжди вказуйте ширину та висоту зображення. Якщо ширина і висота не вказані, то при завантаженні зображення сторінка може блимати.

Ширина і висота або стиль?

Атрибути width, height та style валідні в HTML.

Однак ми рекомендуємо використовувати атрибут style. Це перешкоджає тому, щоб таблиці стилів змінили розмір зображень:

Приклад

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
Спробуйте самі »

Зображення в іншій папці

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

Однак зображення зазвичай зберігаються в підпапках (інших папках). Потім ви повинні включити ім'я папки в атрибут src:

Приклад

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Спробуйте самі »

Зазвичай папкам із зображеннями дають назви img або images.

Зображення на іншому сервері

Деякі вебсайти зберігають свої зображення на спеціальних серверах зображень.

Насправді ви можете отримати доступ до зображень з будь-якої вебадреси Світової павутини, прописавши повний шлях до зображення:

Приклад

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Спробуйте самі »

Ви можете прочитати більше про шляхи до файлів в розділі HTML Шляхи до файлів.

Анімовані зображення

HTML дозволяє використовувати анімовані GIF-зображення:

Приклад

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Спробуйте самі »

Зображення як посилання

Щоб використовувати зображення в якості посилання, поставте тег <img> всередині тега <a>:

Приклад

<a href="index.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Спробуйте самі »

Примітка: border:0; додано, щоб IE9 (і більш ранні версії) не відображали рамку навколо зображення (коли зображення є посиланням).

Плаваюче зображення

Використовуйте CSS властивість float, що дозволяє зображенню плавати праворуч або ліворуч від тексту:

Приклад

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
Зображення буде плавати праворуч від тексту.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Зображення буде плавати ліворуч від тексту.</p>
Спробуйте самі »

Порада: Щоб дізнатись більше про CSS Float, прочитайте розділ CSS Float на нашому сайті.

HTML Зчитувачі екрана (скрінрідери)

Програма читання з екрана - це програма, яка читає код HTML, перетворює текст і дозволяє користувачу "прослуховувати" контент. Програми читання з екрана корисні для людей з порушеннями зору або для навчання.

Резюме розділу

  • Використовуйте HTML елемент <img> для визначення зображення
  • Використовуйте HTML атрибут src для визначення URL зображення
  • Використовуйте HTML атрибут alt для визначення альтернативного тексту для зображення, якщо воно не може бути відображене
  • Використовуйте HTML атрибути width та height для визначення розміру зображення
  • Використовуйте CSS властивості width та height для визначення розміру зображення (альтернативно)
  • Використовуйте CSS властивість float, щоб дозволити зображенню плавати відносно інших елементів
  • Використовуйте HTML елемент <map> для визначення зображення-мапи
  • Використовуйте HTML елемент <area> для визначення інтерактивних областей на зображенні-мапі
  • Використовуйте для HTML елементу <img> атрибут usemap, що вказує на зображення-мапу
  • Використовуйте HTML елемент <picture> для відображення різних зображень для різних приладів

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

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Використовуйте атрибути HTML зображення, щоб встановити розмір зображення 250 пікселів в ширину та 400 пікселів у висоту.

<img src='scream.png' ='250' ='400'>

HTML теги зображень

Тег Опис
<img> Визначає зображення
<map> Визначає зображення-мапу
<area> Визначає клікабельну площу всередині зображення-мапи
<picture> Визначає контейнер для декількох ресурсів зображення

Для ознайомлення з повним списком усіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.

Запитання для самоконтролю

  • За допомогою якого тега визначаються зображення на HTML-сторінці?
  • За допомогою якого атрибуту вказується URL зображення?
  • Який атрибут надає альтернативний текст зображенню?
  • Що відображає браузер, коли не може знайти зображення на вебсторінці?
  • Який атрибут зображення є обов’язковим згідно специфікації HTML5?
  • Який атрибут необхідно використовувати для стилізації зображення?
  • Які атрибути можна використовувати для встановлення ширини та висоти зображення?
  • Де рекомендується зберігати зображення на сайті?
  • Чи можливо зберігати зображення на іншому сайті або сервері?
  • Чи можливо використання на вебсторінці анімованих зображень?
  • Яке розширення зазвичай мають анімовані зображення?
  • Чи можливо використання зображень в якості посилань?
  • В середину якого тега потрібно вставити зображення, щоб воно стало посиланням?
  • Яка CSS-властивість дозволяє зображенню плавати праворуч або ліворуч від тексту?
❮ Prev Next ❯

✍ Коментарі