Далее на странице
Тег <img> предназначен для вставки изображения (например, фотографии) на страницу.
Для вставки на страницу используются изображения в одном из трех графических форматов (подробнее здесь...):
- gif
- jpg/jpeg
- png
Атрибут Src
Атрибут src тега img - обязательный атрибут, который задает адрес файла с изображением.
Атрибут Align
Атрибут align тега img - выравнивание изображения по горизонтали/вертикали.
- left - выравнивание изображения по левому краю станицы, текст будет обтекать справа
- right – выравнивание изображения по правому краю станицы, текст будет обтекать слева.
- top - верхняя граница изображения выравнивается по уровню самого высокого элемента текущей строки
- bottom – нижняя граница изображения выравнивается по базовой линии текущей строки.
- middle – выравнивание середины изображения по базовой линии текущей строки
<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 - отображает рамку вокруг изображения.
Если атрибут отсутствует, то рамки также не будет, за исключением случая, когда изображение является ссылкой. В этом случае, чтобы избавиться от рамки, нужно добавить атрибут border="0".
Атрибут Height и Width
Атрибут height и width тега img - высота и ширина изображения.
Желательно всегда указывать эти параметры, так как при их отсутствии, браузеру требуется некоторое время для вычисления размера изображения.
Величина изображения на скорость его загрузки не влияет. А это увеличивает время загрузки страницы.
Атрибут Hspace и Vspace
Атрибут hspace и vspace тега img - отступы по горизонтали и вертикали соответственно от изображения до других объектов страницы в пикселях.
Атрибут Title
Атрибут title тега img - добавляет всплывающую подсказку при наведении на изображение курсора.
<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 пикселя.
