Главная
К библиотеке

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

В Web используют толко два формата хранения графической информации: это Gif(файл с расширением *.gif, для хранения простых изображений) и JPG(файл с расширением *.jpg или *.jpeg - для хранения изображений с высокой степенью компресси). Для того, чтобы вставить изображение в страницу, используют тег <img>. Это одиночный тег и в простейшем случае имеет следующий формат:

                <IMG SRC="URL файла изображения">

                <IMG SRC="picture.gif">

Таблица 2.

Атрибут	Описание
ALT	Указывает текстовую альтернативу изображению
ALIGN	Управляет выравниванием теста, окружающего изображение
BORDER	Указывает размер окантовки в пикселах
HEIGHT	Указывает высоту изображения в пикселах
WIDTH	Указывает ширину изображения в пикселах
HSPACE	Определяет размер свободного места слева и справа от изображения
VSPACE	Определяет размер свободного места сверху и снизу от изображения
ISMAP	Сообщает, что изображение является картой-изображением на сервере.
USEMAP	Сообщает, что изображение является картой-изображением на стороне клиента.
SRC	Указывает URL изображения.

Рассмотрим подробнее каждый атрибут тега <img>:

ALT

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

 ALIGN

Атрибут ALIGN принимает любое из пяти возможных значений. Все они каким-либо образом определяют выравнивания текста относительно изображения. Вначале мы рассмотрим значения TOP, MIDDLE и BOTTOM.

Если атрибут ALIGN установлен в значение LEFT или RIGHT, то изображение будет "плавать" у левого или правого поля соответственно. Этот эффект позволит тексту обходить изображение, создавая впечатление, что оно встроенно в текст. Такая возможность открывает пути для создания весьма интересных дизайнов страниц.

Появление плавающих изображений вызвало необходимость начинать новую строку в месте, свободном от изображения. Для удовлетворения этой необходимости к тегу <br> был добавлен атрибут CLEAR. Если установить этот атрибут равным значению LEFT, то перевод строки будет выполняться к левому полю, свободному от плавающих изображений. Значение RIGHT оказвает анологичный эфект, но относительно правого поля. Если указать CLEAR=ALL, новая строка начнется с точки, где оба поля свободны от плавающих изображений.

BORDER

Атрибут BORDER предоставляет удобный способ размещения окантовки вокруг изображения. Он устанавливается равным значению, задающему ширину окантовки в пикселах. По умолчанию изображение выводится без окантовки.

Прииспользовании изображения в качестве гиперссылки рекомендуется установить BORDER=0, чтобы подавить цветовую окантовку, которая появится вокруг изображения.

 HEIGHT и WIDTH

Указав информацию о размерах изображения, автор страницы ускорит процесс ее размещения, что даст пользователям увидеть весь документ раньше. Браузер использует значение атрибутов HEIGHT и WIDTH, чтобы оставить на странице место для изображения. Когда изображение будет загруженно, оно появится на этом зарезервированном месте. Без этих атрибутов браузеру пришлось бы загружать изображение целиком, вычислять его размер, размещать на странице и лишь после этого распологать на странице остальные элементы. При наличии нескольких изображений такие задержки вызовут недовольство пользователей.

 HSPACE и VSPACE

Свободное пространство вокруг изображения в полиграфии называется оборкой (runaround). Оно улучшает внешний вид страницы, отделяя изображение от текста. Оборка необходима при использовании плавающих изображений, которые окруженны текстом, поскольку текст, прижатый к изображению читать трудно. Оборка устанавливается с помощью атрибутов HSPACE и VSPACE тега <img>. Значением каждого из них является количество пикселов свободного пространства слева и справа (HSPACE) или сверху и снизу (VSPACE) от изображения.

 ISMAP и USEMAP

Атрибуты, указывающие на то, что изображение является картой-изображением.

Графика как ссылка.

Если Вы не хотите, чтобы рисунок замедлял загрузку основного WWW-документа, Вы можете поместить рисунок в отдельный документ, написав на него гиперссылку. В этом случае пользователь сам должен решить - смотреть или не смотреть ему этот рисунок:

Синтаксис установки графической ссылки такой же, как при установке текстового. Однако между тегами <a href=url> и </a> вместо текста следует поместить тег <img>, как в следующем примере:

<a href=document.html><img src=docimg.gif></a>

Пример:

<HTML> 
<HEAD> 
<TITLE>Пример 1</TITLE> 
</HEAD> 
<BODY>
<H1>Изображения </H1> 
<P>Изображение можно встроить очень просто: </P> 
<P><IMG SRC="picture.gif" ALT="Это графика"></P> 
<P>Кроме того, изображение можно сделать "горячим", то есть 
осуществлять переход при нажатии на изображение:</P> 
<P><A HREF="h2.htm" target=_left><IMG SRC="picture.gif"></A></P> 
</BODY> 
</HTML>