Чтобы оживить текст и придать веб-странице привлекательность, на сайтах принято использовать рисунки и фотографии.
Посему - вставка изображения является важной частью создания веб-документов.
Вставка изображения силами HTML происходит при помощи тега <img>, у которого имеется лишь один обязательный параметр
spc. Данный параметр указывает браузеру на адерс изображения: <img src="URL" alt="альтернативный текст" width="ширина" height="высота">.
Рассмотрим основные параметры тега <img>.
IMG — указывает адресфайла с изображением, может быть полным или относительным.
- Пример полного адреса — <img src="http://prostoyblog.ru/images/puh.jpg">
- Пример неполного адреса — <img src="images/puh.jpg">
Рассмотрим пример вставки рисунка,находящегося в одной директории с текстом:
<html>
<head>
<title>Вставка изображения</title>
</head>
<body>
<p><img src="puh.jpg"></p>
</body>
</html>
Результат вставки изображения виден на скриншоте:
Параметр align — отвечает за выравнивание изображения относительно других элементов веб-страницы. Имеет значения — left, right, top и bottom.
Рассмотрим пример и результат:
<html>
<head>
<title>Параметр align</title>
</head>
<body>
<p align="justify"><img src="puh.jpg" align="left">картинка прижата к левому краю, текст обтекает её справа.</p>
<p align="justify"><img src="puh.jpg" align="right">картинка прижата к правому краю, текст обтекает её слева.</p>
</body>
</html>
Результат выравнивания изображения виден на скриншоте:
Параметр border — добавляет рамку вокруг изображения. По умолчанию рамка отсутствует.
ALT — при использовании данного параметра, при наведении на рисунок курсора, появляется альтернативный текст, указанный в параметре alt. Очень помогает при отключённой у пользователя графики. Рассмотрим пример использования последних параметров.
<html>
<head>
<title>Параметры border и alt</title>
</head>
<body>
<p><img src="puh.jpg" border="2" alt="ВинниПух"></p>
</body>
</html>
А вот и результат использования рамки изображения и альтернативного текста:
Параметры width и height — задают ширину и высоту изображения соответственно. Параметры width и height применяются в пиксельных и процентных значениях. Использовать проценты надо очень осторожно, т. к. проценты берутся от родительского элемента,и если таковой отсутствует, то исходным считается размер самой веб0страницы. В последнем случае веб-мастера могут ждать разные сюрпризы с размерами и качеством изображения. Чтобы избежать ненужных «подарков» и ускорить загрузку изображения, задавайте точные размеры.
Параметры vspace и hspace — определяют отступы от изображения по вертикали и горизонтали других обьектов веб-страницы.
<html>
<head>
<title>Параметры vspace и hspace</title>
</head>
<body>
<p align="justify"><img src="puh.jpg" align="left" hspace="10" vspace="15">картинка прижата к левому краю, отступ по горизонтали равен 10 пикселов, а по вертикали — 15.</p>
</body>
</html>
Результат применения отступов от изображения по вертикали и горизонтали виден на скриншоте:
Как видите, рисунок и текст с отступами смотрится гораздо привлекательней, чем ранее без них.
Патаметр lowrsc — данный параметр используется для предварительной загрузки (перед основным изображением) изображения с более низким качеством. Такой подход даёт возможность пользователю увидеть изображение гораздо раньше, но качеством похуже, до полной загрузки основного файла. Помогает удержать на сайте посетителя при испольэовании изображений большого объёма.
Параметр ismap — данный параметр даёт знать браузеру, что этот рисунок является серверной картой изображения. Применение данного параметра будет рассмотрено позже.
