ЮРІЙ ЧЕРНІЄВСЬКИЙ

ПЕРСОНАЛЬНИЙ САЙТ

HTML <img> ТЕГ

HTML <img> ТЕГ
HTML <img> ТЕГ

ВИЗНАЧЕННЯ:

Тег <img > Визначає зображення на HTML-сторінці.
Тег <img > призначений для відображення на веб-сторінці зображень в графічному форматі GIF, JPEG, PNG та інших.

Зауважте, що зображення як такі фактично не вставляються в сторінку. Тег <img> створює контейнер для зображення.

ВИКОРИСТАННЯ:

Використання графіки робить веб-сторінки візуально привабливішими.
Зображення допомагають краще передати суть і зміст веб-сторінок.
Графічні зображення можуть також бути використані у якості значків, логотипів, а також посилань на HTML сторінки.

СИНТАКСИС:

АТРИБУТИ ТЕГУ <img>

Тег <img> має два обов’язкові атрибути атрибути: src та alt.

Атрибут

Значення

Опис

Примітка

src

URL

Використовується для завантаження зображення, а саме вказує шлях до зображення відносно файлу HTML.

Шлях до графічного файлу.

alt

текст

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

Альтернативний текст для зображення.

Також тег <img> має і загальні атрибути.

Один з них title. Він вказує додаткову інформацію про елемент – додаткову текстову підказку. Для показу тексту при наведенні мишки на зображення використовується саме атрибут title.

Приклад:

<img src=”images/html-5-icon.png” alt=”Альтернативний текст” title=”Html 5 icon”>

Необов’язкові атрибути

Атрибут

Значення

Опис

Примітка

align

left right top middle bottom

Визначає як малюнок буде обтікатися текстом.

Застарів. Використовуйте CSS

border

пікселі

Товщина рамки навколо зображення.

Застарів. Використовуйте CSS

crossorigin

anonymous
use-credentials

Встановлює можливість використання технології міждоменного доступу до ресурсів.

height

пікселі

Висота зображення.

hspace

пікселі

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

Застарів. Використовуйте CSS

ismap

ismap

Говорить браузеру, що картинка є серверної картою-зображенням.

Дуже рідко використовується.

longdesc

URL

Вказує адресу документа, де міститься анотація до картинки.

usemap

#mapname

Посилання на теґ <map>, що містить координати для клієнтської карти-зображення.

vspace

пікселі

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

Застарів. Використовуйте CSS

width

пікселі

Ширина зображення.

Порада:

Щоб пов’язати зображення з іншим документом – зробити картинку посиланням на інший документ, просто вставте тег <img> всередині тегів <a>.</a>

<a href=”https://www.chyw.pp.ua”>
<img src=”smiley.gif” alt=”chyw.pp.ua!” width=”42″ height=”42″ border=”0″>
</a>

Відмінності між HTML та XHTML

Атрибути “align”, “border”, “hspace”, і “vspace” елемента img застаріли і не підтримуються в XHTML 1.0 Strict.

Відмінності між HTML 4.01 та HTML5

Більшість браузерів відображатиме елемент <img> із такими значеннями за замовчуванням:

Налаштування CSS

<style>
img {
display: inline-block;
}
</style>

Сумісність з браузерами:

IE Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Джерело: