Основные способы применения графики
Чего еще не хватает нашему HTML-файлу? Конечно же, гиперссылок! Без них любой документ в Интернете воспринимается гораздо скучнее, поскольку посетитель сразу видит, что зашел в тупик. Поэтому обязательно добавляйте гиперссылки везде, где это только можно. В данном случае, например, слово “Yamaha” просто просится стать гиперссылкой на сайт соответствующей компании. Сделаем это:
<A HREF="http://www.yamaha.com">Yamaha</A>Кстати, картинки тоже могут содержать гиперссылки. Мы можем, напри мер, точно так же, как со словом “Yamaha”, поступить и с нашим тегом картинки. Тогда щелчок на изображении клавиновы также уведет пользователя на сайт компании Yamaha.
Давайте посмотрим, что у нас получается.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>КЛАВИНОВА</TITLE></HEAD> <BODY BACKGROUND="Images/back4.jpg" TEXT="#F8F8F8" LINK="Yellow" VLlNK="Yellow" ALINK="Yellow" BGCOLOR="#OBOBOB"> <H1><DIV ALIGN="center">КЛАВИНОВА</DIV></H1> <DIV ALIGN="center"> <A HREF="http://www.yamaha.com"> <IMG SRC="Images/clavi.gif" WIDTH="300" HEIGHT="200" ALT="КЛАВИНОВА" BORDER="0"> </A> </DIV> <BIG> <P ALIGN="justify">Инструменты серии <BIG>КЛАВИНОВА</BIG> , выпускаемые компанией <A HREF="http: //www.yamaha.com">Yamaha </A> , являются достойной заменой <I>обычных</I> пианино для массового пользователя. Во-первых, <BIG>КЛАВИНОВА</BIG> стоит <B>дешевле</B> мало-мальски хорошего пианино или тем более рояля, а во-вторых, ее звук и исполнительские ощущения зачастую не хуже, а <U>лучше</U>, чем на «живых» инструментах того же (или даже чуть более <SUP>Высокого</SUP> ) ценового диапазона.</Р> </BIG></BODY> </HTML>Результат наших трудов представлен на рис. 3.3. Обратите внимание на то, что для расположения картинки по центру мы поступили так же, как и при центрировании обычного текста – использовали конструкцию <DIV ALIGN="center">.
Текст теперь действительно воспринимается гораздо лучше. Правда, из-за использования слов разного размера и тега <SUP> наши строчки получились разной высоты, что не очень красиво. Однако пока не будем этим заниматься – гибко управлять высотой строк можно с помощью каскадных таблиц стилей, о чем пойдет речь в следующей главе.
Еще следует заметить, что мы не зря определили в нашем примере цвет фона (с помощью атрибута BGCOLOR=). Ведь если у пользователя в браузере отключена загрузка графики, то наш белый текст будет у него отображаться на заданном по умолчанию белом фоне, и в результате ничего не будет видно! Да и вообще, фоновый рисунок может загрузиться и прорисоваться не сразу, ведь это графический файл, имеющий гораздо большие размеры, чем текст! Поэтому всегда нелишне явно указать нужный цвет фона, желательно близкий по оттенку к фоновому рисунку.
Рис. 3.3. Пример странички с фоновым рисунком и иллюстрацией
Кстати, тег <IMG> может иметь собственный атрибут ALIGN=, который управляет расположением рисунка относительно текста. В нашем примере это было не актуально, поскольку рисунок находился в отдельном блоке <DIV>. Но если рисунок “встроен” в текст, то есть несколько вариантов его расположения:
- ALIGN="left – текст обтекает рисунок, который располагается слева;
- ALIGN="right – текст обтекает рисунок, который располагается справа;
- ALIGN="top – рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границей букв текста (можно также применять значение "texttop");
- ALIGN="middle – рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центру рисунка (можно также при менять значение "absmiddle");
- ALIGN="bottom – рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста (можно также применять значение "absbottom" или "baseline").
Кроме того, чтобы рисунок не слишком “прижимался” к тексту, можно оставить между ними немного “воздуха”. Для этого в теге <IMG> используют атрибуты HSPACE= и VSРАСЕ=, значения которых задают соответственно горизонтальное и вертикальное “поля” рисунка.
И еще небольшое замечание: браузер Internet Explorer (версия 4 и выше) позволяет с помощью тега <IMG> загружать и просматривать также видеофрагменты в формате AVI (Video for Windows). Для этого можно установить атрибут DYNSRC=, в качестве значения которого указать имя AVT-файла. При этом можно дополнительно указать в атрибуте START=, когда следует начинать проигрывание видео: "FILEOPEN" – сразу после загрузки файла или "MOUSEOVER" – после наведения указателя мыши на изображение. Атрибут LOOP= позволяет установить количество проигрываний: "О" означает бесконечное повторение, а любое другое число указывает точное количество повторов.