НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP ЯК ЗРОБИТИ W3.CSS JQUERY XML JAVA GO БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ
Place for your advertisement!
HTML5. Уроки для початківців. W3Schools українською

En

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 ❯
Place for your advertisement!