Сайт поможет начинающему web-мастеру в создании вашей первой html-страницы. А более опытному мастеру, возможно, напомнит о каких то деталях. Основная тематика сайта - создание сайтов, HTML, web-программирование.

Изображения. Атрибуты тега <IMG>

Автор admin | Дата: 15.05.2008

Для того чтобы вставить изображения на ваши страницы вы должны воспользоваться тегом <IMG>. Идея вставки изображений заключается в том, что вы просто указываете путь, где лежит ваше изображение и дополнительные параметры, например, ширину и высоту рисунка. Вот об этих параметрах и пойдет речь в этой статье.

Итак, как уже говорилось в статье Оптимизация графики для веб, указание размеров рисунка может существенно повлиять на тип загрузки страницы. Посетитель в первую очередь увидит текст на странице, а во время чтения будет грузиться графика. Иначе, если вы проигнорируете эти атрибуты, посетитель должен будет дождаться загрузки графики и только после загрузки всей страницы. Также зачастую изображения являются ссылками на другие документы сайта. В таком случае, по умолчанию, браузер добавит рамку к изображению, тем самым, указав на то, что изображение является ссылкой.

Если у вашей картинки есть всплывающая подсказка, а также название, то страницу можно будет найти в поисковой системе в рубрике Изображения. А это посетители на сайт, которые возможно станут вашими постоянными читателями. К тому же, если у пользователя медленное подключение к Интернет, возможно, он отключит отображение графики на сайте, тогда альтернативный текст, станет пояснением к рисунку. Ну и не менее полезным параметром может стать указание отступа от текста слева и справа, а также сверху и снизу.

Приступим к примерам.

WIDTH. Указываем ширину рисунка в пикселях.
HEIGHT. Указываем высоту рисунка в пикселях.
BORDER. Указываем ширину рамки рисунка. Полезная опция в том случае, если изображение является ссылкой. Браузер по умолчанию, ставит синюю рамку для изображения и красную для уже посещенной, если такой вариант вас не устроит, укажите значение 0.
ALT. Альтернативный текст.
HSPACE. Создает поле между изображением и текстом слева и справа от изображения.
VSPACE. Создает поле между изображением и текстом сверху и снизу от изображения.

Выравнивание изображения.

ALIGN

Полезный параметр, для того, чтобы вставить изображение в текст и выровнять его определенным образом относительно текста. Существуют следующие варианты:

TOP. Текст выравнивается по верхнему краю изображения.
MIDDLE. Текст выравнивается по середине изображения.
BOTTOM. Текст выравнивается по нижнему краю изображения.
LEFT. Изображение выровнено по левой стороне браузера, а текст обтекает его справа.
RIGHT. то же самое, но только изображение выровняется по правой стороне браузера, а текст обтекает его слева.

<html>
<head>
<title>Изображения. Параметры тега <IMG></title>
</head>
<body>
<p>Указываем параметры изображения</p>
<img src=”sample.jpg” width=”200″ height=”150″ alt=”Альтернативный текст” border=”0″>
<p>Выравниваем изображение в тексте</p>
<img src=”sample.jpg” align=”top”>
Это пример, который показывает выравнивание текста по верхнему краю изображения.
</body>
</html>





Rambler's Top100

© 2008 HtmlGuide.ru. Все права защищены.
Design by Luka Cvrk