Графика в HTML-документах

В HTML-документах возможно использование растровой и векторной графики. Программы просмотра отображают три формата растровой графики

GIF (Graphics Interchange Format) – формат (быстрого) обмена изображениями. Используется для графики с “небольшим” количеством цветов. Этот формат допускает создание рисунков и анимационных изображений с прозрачным фоном;

JPEG (Joint Photographic Experts Group) – используется для отображений фотографий;

PNG (Portable Network Graphics) – альтернатива GIF и два формата векторной графики – технологии Shockwave и Flash компании Makromedia.

Для просмотра других форматов графики необходимо устанавливать дополнительное программное обеспечение, расширяющее возможности броузеров.

Фоновое изображение. Рисунок может использоваться в качестве фона Web–страницы. Для решения этой задачи используется параметр background оператора BODY. Слева по тексту приводится пример фонового рисунка. Необходимо отметить, что размер фонового рисунка значительно меньше окна программы просмотра. Поэтому фоновый рисунок будет повторяться по вертикали и по горизонтали до заполнения всего окна программы просмотра. Значение параметра background равно адресу фонового изображения. Адрес фонового рисунка указывает либо относительное местоположение рисунка (то есть путь доступа к рисунку относительно расположения исходного HTML-файла), либо его полный URI-адрес. Здесь и далее предполагается, что все рисунки размещены в папке Images, которая хранится в одной папке с исходным HTML-файлом.

Оператор BODY имеет еще один параметр, используемый для задания фонового рисунка bgproperties. Этот параметр может иметь единственное значение fixed. В этом случае фон не прокручивается вместе с текстом, а остается неподвижным относительно экрана.

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

Синтаксис элемента: одиночный тэг с двумя обязательными атрибутами — src и alt

<img src="URI" alt="альтернативный текст">

Собственные атрибуты элемента <IMG>

Наименование атрибутов	Описание атрибутов
SRC	Адрес URI-файла с графическим изображением.
ALT	Текстовая строка, которая отображается вместо графического файла, если броузер не может показать изображение или графическая система броузера отключена намеренно.
ALIGN	Выравнивание текста относительно изображения: left – по левой границе; right – по правой границе; top – по верхней границе; middle – по центру изображения; bottom – по нижней границе. Есть и еще ряд более “тонких” значений атрибута.
HEIGHT	Высота изображения в пикселях (рекомендуемый).
WIDTH	Ширина изображения в пикселях (рекомендуемый).
BORDER	Ширина рамки вокруг изображения (только NN).
HSPACE	Ширина свободного пространства в пикселях, которое должно отделять изображение от текста по горизонтали.
VSPACE	Ширина свободного пространства в пикселях, которое должно отделять изображение от текста по вертикали.
USEMAP	Адрес URI-файла, содержащего карту изображения (сегментированная графика).
ISMAP	Признак сегментированной графики.

Кроме перечисленных индивидуальных параметров, оператор <IMG>, также как и другие операторы, имеет ряд общих параметров и параметры для обработчиков событий.

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

Фоновые и сегментированные графические изображения масштабирования не допускают.

Пример 2.9. Использование графики в HTML-документах

<HTML>

<HEAD>

<TITLE>Проектирование WEB-сайта</TITLE>

</HEAD>

<DIV><P><big><H2>Графика в HTML-документах</H2>

<P><IMG align=top hspace=10 src="Images/Leti_tm2.gif">Это главный

корпус Ленинградского<br>Электротехнического института

<P align=left>Графическое изображение можно<IMG align=bottom height=40

src="Images/Cdrom.gif" width=160> включать непосредственно в

текст.</big></P></DIV>

<IMG align=bottom src="Images/vv.gif" vspace=20>Есть несколько

способоввыравнивания текста относительно изображения

<P>Просто текст</P></DIV>

</BODY>

</HTML>

Результат выполнения примера 2.9 (рис.2.9)

Рис.2.9. Просмотр примера “Графика в HTML-документах”

В рассматриваемом примере:

- в качестве фона документа (<BODY background="Images/Fon_Tile.gif">) рассматривается рисунок, который хранится в файле с именем Fon_Tile.gif в папке Images. Вид рисунка приводился в тексте параграфа;

- рассматриваются различные способы выравнивания текста относительно рисунка;

- при отображении рисунка Images/Cdrom.gif показывается возможность использования параметров height и width;

- в строке <IMG align=left width=30% height=10% alt="Здесь отображается РИСУНОК" src=hj> в параметре src задан несуществующий файл. Поэтому броузер высвечивает текст, заданный в параметре alt — "Здесь отображается РИСУНОК".

Замечание. Для отображения строки текста, указанного в качестве значения параметра alt, необходимо выделить место в окне броузера;

- в нижней части Web – страницы приведены два же рисунка, отличающихся одним параметром — прозрачностью фона рисунка. Первый рисунок, загружаемый оператором <IMG align=bottom src="Images/vv_pr.gif" vspace=20>, использует исходный рисунок с прозрачным фоном. Второй, загружаемый оператором <IMG align=bottom src="Images/vv.gif" vspace=20>, использует тот же самый исходный рисунок, но с непрозрачным фоном.

Замечание. При работе с графикой возникают проблемы с размещением и фиксацией рисунков в строго определенных местах окна программы просмотра. Решение этой задачи достигается за счет разметки окна программы просмотра либо в виде таблицы с невидимыми границами, либо за счет использования так называемого “плавающего” фрейма, который рассматривается далее.