HTML Изображения
Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих
Как вставить изображение в HTML-код на веб-сайте?
Изображения могут значительно улучшить дизайн и внешний вид веб-страниц.
HTML-изображения. Синтаксис
HTML изображения определяются тегом <img>. Тег <img> пустой, он содержит лишь атрибуты и не имеет закрывающего тега.
Атрибут src указывает URL-адрес (веб-адрес) изображения:
Пример:
<img src="url">
Атрибут alt
Атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-то причине не может его просмотреть (например, из-за медленного соединения, ошибку в атрибуте src или если пользователь использует экранный ридер).
Значение атрибута alt должно описывать изображение:
Если браузер не может найти изображение, он отобразит значение атрибута alt:
Примечание: Атрибут alt обязателен. Без него веб-страница не будет считаться валидной (соответствовать спецификации HTML5).
Размер изображения - width (ширина) и height (высота)
Атрибут style можно использовать для определения ширины и высоты изображения.
Пример:
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Попробуйте сами »
Кроме того, можно использовать атрибуты width и height непосредственно в теге <img>:
Атрибуты 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>
Попробуйте сами »
Изображения в другой папке
Если не указано, браузер ожидает найти изображение в той же папке, что и веб-страница. Тем не менее, обычное сохранение изображений в подпапке, например, с названием img (или image). Затем необходимо указать имя папки в атрибуте 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> - Карта изображений
Тег <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>
Попробуйте сами »
где:
- map - карта;
- name - имя;
- usemap - предназначенная для пользователя карта;
- area - площадь, область;
- shape - форма;
- rect (от rectangle) - прямоугольник;
- circle - круг;
- coords (от coordinates) - координаты.
В данном примере при клике на каждом из объектов на изображении (на ноутбуке, мобильном телефоне и чашке кофе) мы будем переходить на новую страницу с описанием каждого с объектов. Если же мы попробуем кликнуть где-нибудь в другом месте на изображении вне данных объектов, то ничего не произойдёт.
Атрибут 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>, чтобы определить изображение - Используйте HTML атрибут
srcдля определения URL-адреса изображения - Используйте HTML атрибут
altдля определения альтернативного текста для изображения, если оно не может быть отображено - Используйте HTML атрибуты
widthиheight, чтобы определить размер изображения - Используйте CSS свойства
widthиheightдля определения размера изображения (альтернативно) - Используйте CSS свойство
float, чтобы позволить изображению быть обтекаемым - Используйте HTML элемент
<map>, чтобы определить карту изображения - Используйте HTML элемент
<area>, чтобы определить области, которые можно нажимать на карте изображения - Используйте HTML атрибут
usemapэлемента<img>, чтобы указать на карте изображение - Используйте HTML элемент
<picture>для показа разных изображений для разных устройств
Примечание: Загрузка изображений занимает много времени. Большие изображения могут значительно замедлить работу вашей страницы. Используйте изображения, учитывая их размеры и вес.
Проверьте себя с помощью упражнений!
HTML теги изображения
| Тег | Описание |
|---|---|
<img> |
Определяет изображение |
<map> |
Определяет карту изображения |
<area> |
Определяет область, которую можно нажимать на карте изображения |
<picture> |
Определяет контейнер для нескольких ресурсов изображения |
Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.