HTML Зображення
В цій темі:
- HTML Синтаксис зображень. Тег
img
, атрибутsrc
- Атрибут
alt
- Розмір зображення -
width
таheight
- ширина і висота - Ширина і висота або стиль?
- Зображення в іншій теці
- Зображення на іншому сервері
- Анімовані зображення
- Зображення як посилання
- Плаваюче зображення
- HTML Зчитувачі екрана (скрінрідери)
- HTML Вправи
- HTML теги зображень
Зображення можуть поліпшити дизайн і зовнішній вигляд вебсторінка.
HTML Синтаксис зображень
В HTML зображення визначаються за допомогою тега <img>
.
Тег <img>
пустий, містить лише атрибути і не має закриваючого тега.
Атрибут src
вказує URL (вебадресу) зображення:
<img src="url">
Атрибут alt
Атрибут alt
надає альтернативний текст для зображення, якщо користувач з якоїсь причини не може його переглянути: через повільне підключення до Інтернету, помилки в атрибуті src або якщо користувач використовує програму читання з екрана (скрінрідер).
Значення атрибута alt
має описувати зображення, тобто те, що на ньому зображено:
Якщо браузер не може знайти зображення, він відображає значення атрибута alt
:
Примітка: Атрибут alt
обов'язковий згідно зі специфікацією HTML5. Без нього вебсторінка не буде вважатися валідною (тобто, відповідати стандарту HTML5).
Розмір зображення - Width та Height - Ширина та Висота
Ви можете використовувати атрибут style
для вказівки ширини та висоти зображення.
Приклад
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Спробуйте самі »
Крім того, ви можете використовувати атрибути width
та height
:
Атрибути 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 теги зображень
Тег | Опис |
---|---|
<img> | Визначає зображення |
<map> | Визначає зображення-мапу |
<area> | Визначає клікабельну площу всередині зображення-мапи |
<picture> | Визначає контейнер для декількох ресурсів зображення |
Для ознайомлення з повним списком усіх доступних HTML тегів відвідайте HTML Довідник тегів на нашому сайті W3Schools українською.
Запитання для самоконтролю
- За допомогою якого тега визначаються зображення на HTML-сторінці?
- За допомогою якого атрибуту вказується URL зображення?
- Який атрибут надає альтернативний текст зображенню?
- Що відображає браузер, коли не може знайти зображення на вебсторінці?
- Який атрибут зображення є обов’язковим згідно специфікації HTML5?
- Який атрибут необхідно використовувати для стилізації зображення?
- Які атрибути можна використовувати для встановлення ширини та висоти зображення?
- Де рекомендується зберігати зображення на сайті?
- Чи можливо зберігати зображення на іншому сайті або сервері?
- Чи можливо використання на вебсторінці анімованих зображень?
- Яке розширення зазвичай мають анімовані зображення?
- Чи можливо використання зображень в якості посилань?
- В середину якого тега потрібно вставити зображення, щоб воно стало посиланням?
- Яка CSS-властивість дозволяє зображенню плавати праворуч або ліворуч від тексту?