Изображения могут улучшить дизайн и внешний вид веб-страницы а также привлечь больше пользователей. В этом разделе вы узнаете как связать изображения с веб-документом.
<img src="/htm/pic_fountain.jpg" alt="Фонтан в Москве">
<img src="/htm/img_leopard.jpg" alt="Леопард">
<img src="/htm/img_building.jpg" alt="Вид на здание со стороны Московского зоопарка">
★ Примечание: вставка изображений в документы HTML — это простой процесс, который можно выполнить с помощью любого текстового редактора, например Блокнота.
Синтаксис HTML изображений
HTML тег <img> используется для встраивания изображения в веб-страницу.
Технически изображения не вставляются в веб-страницу — изображения связаны с веб-страницами. Тег <img> создает место для хранения ссылочного изображения.
Тег <img> пустой, содержит только атрибуты и не имеет закрывающего тега.
Тег <img> имеет два обязательных атрибута:
- src — указывает путь к изображению;
- alt — указывает альтернативный текст для изображения.
Синтаксис:
<img src="url" alt="Альтернативный текст">
Атрибут src
Обязательный атрибут src указывает путь (URL) к изображению.
★ Примечание: когда веб-страница загружается, именно браузер в этот момент получает изображение с веб-сервера и отображает его на странице. Поэтому убедитесь, что изображение действительно остается на том же месте по отношению к веб-странице, иначе ваши посетители получат значок неработающей ссылки. Иконка неработающей ссылки и альтернативный текст в атрибуте alt отображаются, если браузер не может найти изображение.
Атрибут alt должен отражать содержимое изображения, чтобы пользователи, которые не могут его видеть, понимали, что оно содержит:
<img src="/htm/img_building.jpg" alt="Вид на здание со стороны Московского зоопарка">
Атрибут alt
Обязательный атрибут alt предоставляет альтернативный текст для изображения, если пользователь по какой-либо причине не может его просмотреть (из-за медленного соединения, ошибки в атрибуте src или когда пользователь использует программу для чтения с экрана.
Значение атрибута alt должно описывать изображение:
<img src="/htm/img_leopard.jpg" alt="Леопард">
Если браузер не может найти изображение, он отобразит иконку и значение атрибута alt:
<img src="/htm/wrongname.gif" alt="Леопард">
Это выглядит примерно так:
Размер изображения в HTML - ширина и высота (Width и Height)
Вы можете использовать атрибут style, чтобы указать width и height изображения.
Здесь мы используем атрибут style, чтобы указать ширину и высоту изображения:
<img src="/htm/img_leopard.jpg" alt="Леопард" style="width:194px;height:200px;">
Альтернативный метод использования атрибутов ширины и высоты - width и heigh:
<img src="/htm/img_leopard.jpg" alt="Леопард" width="500" height="600">
Атрибуты width и heigh всегда определяют ширину и высоту изображения в пикселях.
✪ Рекомендация: всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, веб-страница может мерцать во время загрузки изображения.
Width и Height, или Style?
Атрибуты width, height, и style допустимы в HTML.
Однако рекомендуется использовать атрибут style. Он не позволяет таблицам стилей изменять размер изображений:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5_black.png" alt="Иконка HTML5" width="100" height="100">
<img src="html5_black.png" alt="Иконка HTML5" style="width:100px;height:100px;">
</body>
</html>
Нажмите на ссылку ниже, чтобы посмотреть как это выглядит:
ПРИМЕР
Изображения в другой папке
Если у вас есть изображения в подпапке, вы должны указать имя папки в атрибуте src:
<img src="/htm/html5_black.png" alt="Иконка HTML5" style="width:100px;height:100px;">
Изображения на другом сервере/веб-сайте
Некоторые веб-сайты указывают на изображение на другом сервере.
Чтобы указать на изображение на другом сервере, вы должны указать абсолютный (полный) URL-адрес в атрибуте src:
<img src="https://www.appnet.club/appnet_logo.png" alt="AppNet.Club">
★ Примечание относительно внешних изображений: Внешние изображения могут быть защищены авторским правом. Если вы не получите разрешение на его использование, вы можете нарушить закон об авторском праве. Кроме того, вы не можете управлять внешними изображениями - они могут быть внезапно удалены или изменены.
Анимированные изображения в HTML
HTML позволяет использовать анимированные GIF-файлы:
<img src="/htm/html5_black.gif" alt="Гифка HTML5" style="width:100px;height:100px;">
Изображение как ссылка
Чтобы использовать изображение в качестве ссылки, просто поместите тег <img> в тег <a>:
<a href="/html">
<img src="/htm/smiling.png" alt="Учебное пособие по HTML" style="width:75px;height:75px;">
</a>
Изображение ниже является ссылкой. Попробуйте нажать на него.
Плавающие изображения в HTML
Используйте свойство CSS float, чтобы изображение плавало справа или слева от текста:
<img src="/htm/smiling.png" alt="Учебное пособие по HTML" style="float:right;width:50px;height:50px;">
Изображение будет плавать справа от текста.</p>
<img src="/htm/smiling.png" alt="Учебное пособие по HTML" style="float:left;width:50px;height:50px;">
Изображение будет плавать слева от текста.</p>
Сместите изображение вправо:
Изображение будет плавать справа от текста. Параграф с плавающим изображением. Свойство float:right.
Сместите изображение влево:
Изображение будет плавать слева от текста. Параграф с плавающим изображением. Свойство float:left.
Распространенные форматы изображений
Вот наиболее распространенные типы файлов изображений, которые поддерживаются во всех браузерах (Chrome, Edge, Firefox, Safari, Opera, Яндекс браузер):
| Акроним |
Формат файла |
Расширение файла |
| APNG |
Animated Portable Network Graphics |
.apng |
| GIF |
Graphics Interchange Format |
.gif |
| ICO |
Microsoft Icon |
.ico, .cur |
| JPEG |
Joint Photographic Expert Group image |
.jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG |
Portable Network Graphics |
.png |
| SVG |
Scalable Vector Graphics |
.svg |
HTML изображения, подразделы
HTML - теги изображений
Справочник по тегам содержит дополнительную информацию об элементах HTML и их атрибутах.
| Тег |
Описание |
| <img> |
Определяет изображение |
| <map> |
Определяет карту изображения |
| <area> |
Определяет кликабельную область внутри карты изображения |
| <picture> |
Определяет контейнер для нескольких ресурсов изображения |
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
☛ Карты изображений HTML
Закладки HTML ☚
