Вставка изображения силами HTML

Вставка изображенияЧтобы оживить текст и придать веб-странице привлекательность, на сайтах принято использовать рисунки и фотографии.
Посему - вставка изображения является важной частью создания веб-документов.

Вставка изображения силами 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>

Результат выравнивания изображения виден на скриншоте:

параметр align

Параметр border — добавляет рамку вокруг изображения. По умолчанию рамка отсутствует.

ALT — при использовании данного параметра, при наведении на рисунок курсора, появляется альтернативный текст, указанный в параметре alt. Очень помогает при отключённой у пользователя графики. Рассмотрим пример использования последних параметров.
<html>
<head>
<title>Параметры border и alt</title>
</head>
<body>
<p><img src="puh.jpg"  border="2" alt="ВинниПух"></p>
</body>
</html>

А вот и результат использования рамки изображения и альтернативного текста:

Параметры alt и border

Параметры 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>

Результат применения отступов от изображения по вертикали и горизонтали виден на скриншоте:

параметры vspace и hspace

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

Патаметр lowrsc — данный параметр используется для предварительной загрузки (перед основным изображением) изображения с более низким качеством. Такой подход даёт возможность пользователю увидеть изображение гораздо раньше, но качеством похуже, до полной загрузки основного файла. Помогает удержать на сайте посетителя при испольэовании изображений большого объёма.

Параметр ismap — данный параметр даёт знать браузеру, что этот рисунок является серверной картой изображения. Применение данного параметра будет рассмотрено позже.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Реклама

Оставить комментарий

Перед отправкой формы:
Human test by Not Captcha