Изображение может улучшить дизайн и внешний вид веб страницы.
<img src="pic_trulli.jpg"
alt="Итальянские Трулли">
Попробуйте сами »
<img src="img_girl.jpg"
alt="Девушка в куртке">
Попробуйте сами »
<img src="img_chania.jpg"
alt="Цветы в Ханье">
Попробуйте сами »
HTML Синтаксис изображения
HTML тег <img> используется для встраивания изображения в веб страницу.
Изображения технически не вставляются на веб страницу; изображения связаны с веб страницами.
Тег <img> создает удерживающее пространство для ссылочного изображения.
Тег <img> пуст, он содержит только атрибуты и не имеет закрывающего тега.
Тег <img> имеет два обязательных атрибута:
- src - Указывает путь к изображению
- alt - Задает альтернативный текст для изображения
Синтаксис
<img src="url" alt="альтернативный текст">
Атрибута src
Атрибут src обязательный, указывает путь (URL) к изображению.
Примечание: Когда загружается веб страница, именно браузер в этот момент получает изображение с веб сервера и вставляет его на страницу. Поэтому убедитесь, что изображение действительно остается на том же месте по отношению к веб странице, иначе ваши посетители получат значок сломанной ссылки. Значок неработающей ссылки отображается, если браузер не может найти изображение.
<img src="img_chania.jpg" alt="Цветы в Ханье">
Попробуйте сами »
Атрибут alt
Атрибут alt содержит альтернативный текст для изображения, если изображение
по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src,
тогда изображение используется для чтения с экрана).
Значение атрибута alt, должно описывать изображение:
<img src="img_chania.jpg" alt="Цветы в Ханье">
Попробуйте сами »
Если браузер не может найти изображение, он будет отображать значение атрибута alt:
<img src="wrongname.gif" alt="Цветы в Ханье">
Попробуйте сами »
Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него.
Размер изображения - ширина и высота
Вы можете использовать атрибут style, чтобы задать ширину и высоту изображения.
<img src="img_girl.jpg" alt="Девушка в куртке" style="width:500px;height:600px;">
Попробуйте сами »
Кроме того, вы можете использовать атрибуты width и height:
<img src="img_girl.jpg" alt="Девушка в куртке" width="500" height="600">
Попробуйте сами »
Атрибуты width и height всегда определяют ширину и высоту
изображение в пикселях.
Примечание: Всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, то страница будет мигать, пока загружается изображение.
Что выбрать width и height, или style?
Все атрибуты width, height и style являются действительными в HTML5.
Однако, мы рекомендуем использовать атрибут style.
Это предотвращает изменения исходного размера изображения во внутренней и внешней таблицы стилей:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="Иконка HTML5" style="width:128px;height:128px;">
<img src="html5.gif" alt="Иконка HTML5" width="128"height="128">
</body>
</html>
Попробуйте сами »
Изображения в другой папке
Если ваши изображения находятся во вложенной папке, вы должны включить имя папки в поле атрибута src:
<img src="/images/html5.gif" alt="Иконка HTML5" style="width:128px;height:128px;">
Попробуйте сами »
Изображения на другом сервере
Некоторые веб узлы сохраняют их изображения на сервере.
На самом деле, можно получить доступ к изображениям из любого веб адреса в мире:
<img src="https://schoolsw3.com/images/schoolsw3_green.jpg" alt="schoolsw3.com">
Попробуйте сами »
Вы можете прочитать больше о пути файла в главе HTML путь к файлам.
Изображения анимированное
Стандарт GIF позволяет анимированные изображения:
<img src="programming.gif" alt="Человек Компьютер" style="width:48px;height:48px;">
Попробуйте сами »
Изображение ссылка
Чтобы использовать изображение в качестве ссылки,
нужно вставить тег <img> внутри тега <a>:
<a href="index.php">
<img src="smiley.gif" alt="Учебник HTML" style="width:42px;height:42px;border:0;">
</a>
Попробуйте сами »
Изображение плавающие
Используйте CSS свойство float и пусть изображении плавает справа или слева от текста:
<p><img src="smiley.gif" alt="Смайлик" style="float:right;width:42px;height:42px;">
Изображение будет плавать справа от текста.</p>
<p><img src="smiley.gif" alt="Смайлик" style="float:left;width:42px;height:42px;">
Изображение будет плавать слева от текста.</p>
Попробуйте сами »
Совет: Чтобы узнать больше о CSS Float, прочтите раздел CSS Float Учебник.
Общие форматы изображений
Вот наиболее распространенные типы файлов изображений, которые поддерживаются во всех браузерах (Chrome, Edge, Firefox, Safari, Opera):
| Сокращение | Формат файла | Расширение файла |
|---|---|---|
| APNG | Анимированная портативная сетевая графика | .apng |
| GIF | Формат обмена графическими данными | .gif |
| ICO | Microsoft значок | .ico, .cur |
| JPEG | Объединенная фотографическая экспертная группа изображение | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Переносимая сетевая графика | .png |
| SVG | Масштабируемая векторная графика | .svg |
Краткое содержание
- Используйте HTML элемент
<img>для определения изображения - Используйте HTML атрибут
srcдля определения URL адреса изображения - Используйте HTML атрибут
altдля определения альтернативного текста для изображения, если оно не может быть отображено - Используйте HTML атрибут
widthиheightили CSS свойстваwidthиheightдля определения размера изображения - Используйте CSS свойство
floatпозволять изображению плавать влево или вправо
Примечание: Загрузка больших изображений занимает много времени и может замедлить работу вашей веб страницы. Используйте изображения осторожно.
HTML Упражнения
HTML Теги изображений
| Тег | Описание |
|---|---|
| <img> | Определяет изображение |
| <map> | Определяет изображение-карта |
| <area> | Определяет активную область внутри изображении-карты |
| <picture> | Определяет контейнер для нескольких ресурсов изображений |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.