Урок №16. HTML. Зображення

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як вставити зображення в HTML-код на веб-сайті?

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


Приклад:

<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).


Розмір зображення - 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 зображення. Якщо ширина і висота не вказані, сторінка може миготіти під час завантаження зображення.


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

Атрибути width, height та style дійсні в HTML5. Проте W3C пропонує використовувати атрибут 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 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="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Спробуйте самі! »

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


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

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

Приклад:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Спробуйте самі! »

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


Карти зображень

Тег <map> визначає карту зображення. Карта зображень - це зображення з інтерактивними (клікабельними) областями.

На зображенні нижче клікніть зображення комп'ютера, телефону або чашки кави:

Workplace Sun Mercury Venus

Приклад:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Спробуйте самі! »

де:

В даному прикладі при кліці на кожному з об'єктів на зображенні (на ноутбуці, мобільному телефоні і чашці кави) ми будемо переходити на нову сторінку з описом кожного з об'єктів. Якщо ж ми спробуємо клікнути де-небудь в іншому місці на зображенні поза даних об'єктів, то нічого не відбудеться.

Атрибут name тега <map> пов'язаний з атрибутом usemap тега <img> і створює зв'язок між зображенням і картою. Елемент <map> містить декілька тегів <area>, які визначають області зображення, на які можна клікати мишкою і переходити за посиланням.


Фонове зображення - Background Image

Щоб додати фонове зображення до HTML, скористайтеся CSS властивістю background-image:

Приклад:

Щоб додати фонове зображення на веб-сторінці, вкажіть властивість background-image для елемента BODY:

<body style="background-image:url('clouds.jpg');">

<h2>Background Image</h2>

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

Приклад:

Щоб додати фонове зображення до параграфу, вкажіть властивість background-image для елемента P:

<body>

<p style="background-image:url('clouds.jpg');">
...
</p>

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

Примітка: Щоб дізнатися більше про фонові зображення, ознайомтеся з посібником CSS Background.


Елемент <picture>

HTML5 представив елемент <picture>, щоб додати більше гнучкості під час визначення ресурсів зображення. Елемент <picture> містить ряд елементів <source>, кожен з яких посилається на різні джерела зображення. Таким чином браузер може вибрати зображення, яке найкраще відповідає поточному перегляду та / або пристрою. Кожен елемент <source> має атрибути, що описують, коли їх зображення найбільш підходить. Браузер буде використовувати перший елемент <source> з відповідними значеннями атрибутів та ігнорувати будь-які наступні <source> елементи.

Приклад:

Відображається одне зображення, якщо вікно веб-браузера (вікно перегляду) становить мінімум 650 пікселів, а інше зображення - якщо ні, але більше 465 пікселів.

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Спробуйте самі! »

Примітка: Завжди вказуйте елемент <img> як останній дочірній елемент елемента <picture>. Елемент <img> використовується браузерами, які не підтримують елемент <picture>, або якщо жоден з тегів <source> не був зіставлений.


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

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


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

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


Перевірте себе вправами!


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

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

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.