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-властивість дозволяє зображенню плавати праворуч або ліворуч від тексту?