Для вставки изображения в документ используется одиночный тег <IMG>;. Местоположение изображения на странице и его выравнивание относительно текста задается следующими атрибутами:
- SRC - URL изображения;
- ALIGN - выравнивание текста относительно изображения (режимы с обтеканием текста: LEFT - изображение слева, текст обтекает справа / RIGHT-изображение справа, текст обтекает слева; режимы без обтекания текстом: TOP - по верхнему краю изображения / MIDDLE - по центру изображения / BOTTOM - по нижнему краю);
- WIDTH - ширина изображения (пикселы);
- HEIGHT - высота изображения (пикселы);
- ALT - текстовое описание-альтернатива, для тех кто отключил загрузку изображений;
- BORDER - ширина рамки (по умолчанию BORDER=1);
- HSPACE - пустое поле от изображения по горизонтали;
- VSPACE - пустое поле от изображения по вертикали;
- ISMAP - признак карты-ссылок (обработка сервером);
- USEMAP - признак карты-ссылок (обработка клиентом);
Примеры тега <IMG>;:
<IMG SRC="pic1.gif" ALIGN=MIDDLE>
<IMG SRC="pic2.jpg" HSPACE=20 VSPACE=20 ALT="Здесь изображение офиса нашей компании">
<IMG SRC="pic3.jpg" WIDTH=120 HEIGHT=160 ALIGN=LEFT BORDER=5>
Закрепим на примере использование графики в ваших документах:
Пример 4. Использование графики. [просмотр примера в окне]
<HTML>
<HEAD>
<TITLE>Все графическое: элемент-якорь, линия-разделитель, фон и содержимое</TITLE>
</HEAD>
<BODY BACKGROUND="bgp.gif", BGCOLOR ="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<H1 ALIGN=CENTER>Два вида обезьян</H1>
<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 обезьяна</H2>
<P ALIGN=CENTER>
GIF обезьяна похуже качеством, но зато живая.<br>
JPG обезьяна красивая, но глазами хлопать не умеет. <P>
<P ALIGN=CENTER><IMG SRC="bar.gif" WIDTH="50%">
<P ALIGN=CENTER>© 2001 <A HREF="mailto:myname@mail.ru">
<IMG SRC="mbox.gif" BORDER=0 ALT="[ почта ]"></A> Вебмастер.
</BODY>
</HTML>
Приведем несколько рекомендаций по использованию графики:
- старайтесь указывать размер изображения и его текстовую альтернативу, т.к. в случае невозможности загрузить изображение или загрузки в броузер с отключенной графикой не нарушается структура документа (вместо графики будет прямоугольник заданного размера с текстовым описанием);
- при использовании изображения в качестве элемента-якоря ссылки отключайте рамку изображения (BORDER=0), дабы не портить внешний вид документа;
- при указании размеров изображения больших или меньших от оригинального размера броузер производит их масштабирование, что может нарушить качество изображения некоторых форматов;
