Тема: Вставка изображения в документ HTML
Использование графики в документах позволяет повысить привлекательность ваших Web-страниц, делает изложенный материал более доступным для восприятия, а в некоторых случаях (искусство, реклама) без нее просто не обойтись.Web-броузеры поддерживают множество графических форматов, но наиболее часто используются GIF и JPEG (некоторые форматы требуют установки дополнительных программных компонентов броузера).Вставка изображений в документДля вставки изображения в документ используется одиночный тег <IMG>. Местоположение изображения на странице и его выравнивание относительно текста задается следующими атрибутами:
SRC - URL изображения;
- ALIGN - выравнивание текста относительно изображения {режимы с обтеканием текста: LEFT - изображение слева, текст обтекает справа / RlGHT-изображение справа, текст обтекает слева; режимы без обтекания текстом: ТОР - по верхнему краю изображения / MIDDLE - по центру изображения / BOTTOM - по нижнему краю );
- WIDTH - ширина изображения (пикселы);
- HEIGHT - высота изображения (пикселы);
- ALT - текстовое описание-альтернатива, для тех кто отключил загрузку изображений;
- BORDER - ширина рамки (поумолчанию BORDER=l);
- HSPACE - пустое поле от изображения по горизонтали;
- VSPACE - пустое поле от изображения по вертикали;
- ISMAP - признак карты-ссылок (обработка сервером)-,
- USEM АР - признак карты-ссылок (обработка клиентом);
Примерытега <IMG>:
<IMG SRC-'picl.gif1 ALIGN=MIDDLE>
<IMG SRC="pic2.jpg" HSPACE=20 VSPACE=20 АЕТ="Здесьизображениеофисанашейкомпании">
<IMG SRC="pic3.jpg" WIDTH=120 HEIGHT=160 ALIGN=LEFT BORDER=5> Закрепим на примере использование графики в ваших документах:
Пример 4. Использование графики. Гпросмотр примера в окне]
<HTML> <HEAD>
<TITLE>Bce графическое: элемент-якорь, линия-разделитель, фон и содержимое</Т1ТЬЕ> </HEAD>
<BODY BACKGROUND="bgp.gif', BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<H1 ALIGN=CENTER>flBa вида обезьян</Н1>
<P ALIGN=CENTER><IMG SRC="bar.gif' WIDTH="50%">
<P ALIGN=CENTER><IMG SRC="monkey.gif' ALT="GIF">&<IMG SRC="monkey.jpg" WIDTH=182 HEIGHT=122 • ALT="JPG">
<H2 ALIGN=CENTER>GIF обезьяна & JPEG обезьяна</Н2>
<P ALIGN=CENTER>
GIF обезьяна похуже качеством, но зато живая.<br>
JPG обезьяна красивая, но глазами хлопать не умеет. <Р>
<Р ALIGN=CENTER><IMG SRC="bar.gif' WIDTH="50%">
<Р ALIGN=CENTER>© 2001 <А HREF="mailto:[email protected]">
<IMG SRC="mbox.gif' BORDER=0 ALT="[ почта ]"></А>Вебмастер.
</BODY> </HTML>
Приведем несколько рекомендаций по использованию графики:
- старайтесь указывать размер изображения и его текстовую альтернативу, т.к. в случае невозможности загрузить изображение или загрузки в броузер с отключенной графикой не нарушается структура документа (вместо графики будет прямоугольник заданного размера с текстовым описанием);
- при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения (BC)RDER=0), дабы не портить внешний вид документа;
- при указании размеров изображения больших или меньших от оригинального размера броузер производит их масштабирование, что может нарушить качество изображения некоторых форматов;
Использование изображений в качестве - карты ссылок
Как я уже говорил выше (См. раздел 2.2.) возможно использование графических изображений-якорей для ссылок в HTML-документах. Для этого необходимо поместить тег <IMG SCR=" файл изображения"> в контейнер гиперссылки<А>...</А>.
Но существует еще один важный вариант использования изображений для ссылок - так называемые "карты ссылок" {imagemap). Типичным примером использования карт ссылок являются сервера крупных международных корпораций, где выбирая государство на изображении карты мира, вы получаете документ с соответствующей вашему выбору языковой и сервисной поддержкой. Карты ссылок бывают двух видов: обрабатываемые клиентом и обрабатываемые сервером.
