«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML


Тег <img> предназначен для вставки изображения (например, фотографии) на страницу.

Для вставки на страницу используются изображения в одном из трех графических форматов (подробнее здесь...):

- gif
- jpg/jpeg
- png

Закрывающий тег

Не имеет


Атрибут Src

Атрибут src тега img - обязательный атрибут, который задает адрес файла с изображением.

Значение/я атрибута:
Абсолютный или относительный путь к файлу (подробнее здесь...)
Значение по умолчанию:
Не имеет

Атрибут Align

Атрибут align тега img - выравнивание изображения по горизонтали/вертикали.

Значение/я атрибута:

- left - выравнивание изображения по левому краю станицы, текст будет обтекать справа
- right – выравнивание изображения по правому краю станицы, текст будет обтекать слева.
- top - верхняя граница изображения выравнивается по уровню самого высокого элемента текущей строки
- bottom – нижняя граница изображения выравнивается по базовой линии текущей строки.
- middle – выравнивание середины изображения по базовой линии текущей строки

Значение по умолчанию:
bottom
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Тег img </title>
</head>
<body>

<p> <img src="img/peng_32.gif" align="left">
Выравнивание изображения по левому краю страницы, текст будет обтекать справа </p> <br>
<p> <img src="img/peng_32.gif" align="right">
Выравнивание изображения по правому краю страницы, текст будет обтекать слева </p> <br>
<p> <img src="img/peng_32.gif" align="top" border="1">
Верхняя граница изображения выравнивается по уровню самого высокого элемента
текущей строки
</p>
<p> <img src="img/peng_32.gif" align="bottom" border="1">
Нижняя граница изображения выравнивается по базовой линии текущей строки </p>
<p> <img src="img/peng_32.gif" align="middle">
<u> Выравнивание середины изображения по базовой линии текущей строки </u> </p>

</body>
</html>
Результат

Выравнивание изображения по левому краю страницы, текст будет обтекать справа


Выравнивание изображения по правому краю страницы, текст будет обтекать слева


Верхняя граница изображения выравнивается по уровню самого высокого элемента текущей строки

Нижняя граница изображения выравнивается по базовой линии текущей строки

Выравнивание середины изображения по базовой линии текущей строки

Атрибут Alt

Атрибут alt тега img - альтернативный текст к изображению, который будет отображен вместо изображения, если браузер еще (вообще) не загрузил его или оно отсутствует по каким-то другим причинам.

Значение/я атрибута:
Любой текст
Значение по умолчанию:
Не имеет

Атрибут Border

Атрибут border тега img - отображает рамку вокруг изображения.

Значение/я атрибута:
Указывается целое положительное число, которое задает толщину рамки в пикселях.
Значение по умолчанию:
0

Если атрибут отсутствует, то рамки также не будет, за исключением случая, когда изображение является ссылкой. В этом случае, чтобы избавиться от рамки, нужно добавить атрибут border="0".

Атрибут Height и Width

Атрибут height и width тега img - высота и ширина изображения.

Желательно всегда указывать эти параметры, так как при их отсутствии, браузеру требуется некоторое время для вычисления размера изображения.

Величина изображения на скорость его загрузки не влияет. А это увеличивает время загрузки страницы.

Значение/я атрибута:
Целое положительное число в пикселях или в процентах
Значение по умолчанию:
Исходный размер изображения

Атрибут Hspace и Vspace

Атрибут hspace и vspace тега img - отступы по горизонтали и вертикали соответственно от изображения до других объектов страницы в пикселях.

Значение/я атрибута:
Указывается целое положительное число
Значение по умолчанию:
0

Атрибут Title

Атрибут title тега img - добавляет всплывающую подсказку при наведении на изображение курсора.

Значение/я атрибута:
Любой текст
Значение по умолчанию:
Не имеет
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Тег img </title>
</head>
<body>

<p> <img src="img/peng_64.gif" border="1" title="Пингвин" align="left" vspace="20"
hspace=
"20" height="64" width="64">
Изображение выравнивается по левому краю страницы. <br>
Толщина рамки вокруг изображения составляет 1 пиксель. <br>
Отступы по горизонтали и вертикали от изображения до других объектов страницы (<em>в данном случае до текста </em>) 20 пикселей. <br>
Высота и ширина изабражения 64 пикселя. </p>

</body>
</html>
Результат

Изображение выравнивается по левому краю страницы.
Толщина рамки вокруг изображения составляет 1 пиксель.
Отступы по горизонтали и вертикали от изображения до других объектов страницы (в данном случае до текста) 20 пикселей.
Высота и ширина изабражения 64 пикселя.



Все теги HTML

HTML по шагам