Изображения HTML, как вставить картинку
Изображения могут улучшить дизайн и внешний вид веб-страницы.
Пример
<img src="pulpitrock.jpg"
alt="Вид на горы">
Пример
<img src="img_girl.jpg"
alt="Девушка в куртке">
Пример
<img src="img_chania.jpg"
alt="Цветы в Ханье">
Синтаксис изображений в формате 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 является обязательным. Веб-страница не будет корректно проверяться без нее.
Размер изображения-ширина и высота
Для указания ширины и высоты изображения можно использовать атрибут 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 действительны в HTML5.
Однако рекомендуется использовать атрибут 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://html5css.ru/images/html5cs_green.jpg" alt="html5css.ru">
Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.
Анимированные изображения
HTML позволяет анимированные GIF:
Пример
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Изображение как ссылка
Чтобы использовать изображение в качестве ссылки, поместите тег <img> внутрь тега <a>:
Пример
<a href="default.php">
<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;">
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> определяет изображение-карту. Изображение-карта представляет собой изображение с щелчком области.
На картинке ниже, нажмите на компьютер, Телефон, или чашку кофе:
Пример
<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>, определяющих области, на которые вы щелкнули на карте изображения.
Фоновое изображение
Чтобы добавить фоновое изображение в элемент 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>для определения изображения - Используйте атрибут HTML
srcдля определения URL-адреса изображения - Используйте атрибут HTML
altдля определения альтернативного текста для изображения, если он не может быть отображен - Используйте атрибуты HTML
widthиheightдля определения размера изображения - Используйте свойства CSS
widthиheightдля определения размера изображения (в качестве альтернативы) - Используйте свойство CSS
float, чтобы позволить изображению поплавок - Используйте элемент HTML
<map>для определения изображения-карты - Используйте элемент HTML
<area>для определения областей щелчка на карте изображения - Используйте атрибут
usemapэлемента HTML<img>, чтобы указать на карту изображения - Используйте элемент HTML
<picture>для отображения различных изображений для различных устройств
Примечание: Загрузка изображений занимает время. Большие изображения могут замедлить вашу страницу. Используйте изображения тщательно.
Теги изображений HTML
| Тег | Описание |
|---|---|
| <img> | Определяет изображение |
| <map> | Определяет изображение-карту |
| <area> | Определяет активную область внутри изображения-карты |
| <picture> | Определяет контейнер для нескольких ресурсов изображения |