Карта изображения

При создании рисунка можно использовать его отдельные фрагменты в качестве ссылок на отдельные Web – страницы. Такой рисунок называют картой изображения. При создании карты изображения необходимо задавать координаты каждого фрагмента карты. Карту можно создать в обычном графическом редакторе, который указывает координаты карты в нижнем правом углу. Если карта создается на стороне клиента, то в коде HTML - документа должно быть сделано соответствующее пояснение.

< HTML>

< HEAD>

< TITLE> Карта изображения< /TITLE>

< STYLE TYPE=

”TEXT/CSS”>

BODY{TEXT – ALIGN=”CENTER”}

< /STYLE>

< /HEAD>

< BODY>

< MAP NAME=”KARTA” ID=’KARTA”>

< AREA SHAPE=”RECT” COORDS=”0, 0, 100, 100” HREF=”ONE.HTML” ALT=” Первый“ />

< AREA SHAPE=”RECT” COORDS=”100, 0, 200, 100” HREF=”TWO.HTML” ALT=”Второй“ />

< AREA SHAPE=”RECT” COORDS=”0, 100, 100, 200” HREF=”THREE.HTML” ALT=”Третий“ />

< AREA SHAPE=”RECT” COORDS=”100, 100, 200, 200”HREF=”FOUR.HTML” ALT=”Четвертый“ />

< /MAP>

< IMG SRC=”MAP.JPG” WIDTH=”200” HEIGHT=”200” ALT=”Карта изображения“ BORDER=”0” USEMAP=”#KARTA” />

< /BODY>

< /HTML>

Комментарий к коду HTML – документа.

Каждой карте изображения надо присвоить уникальное имя. Это выполняется с помощью дескриптора < MAP> и атрибутов NAME и ID. Этим атрибутам присвоено значение “KARTA”. Дескриптор < AREA> описывает область карты, атрибут SHAPE задает тип фрагмента карты. Значение этого атрибута “RECT” (прямоугольник). Атрибут HREF используется для указания ссылки на файл ONE.HTML, который требуется создавать дополнительно. Атрибут ALT со значением «первый» используется для получения всплывающей подсказки при выведении курсора на соответствующий квадрант. Назначение этого атрибута – контроль правильности создания карты. Атрибут COORDS задает координаты квадранта (X₁, Y₁, X₂, Y₂). В каждом квадранте задаются точки вершин, лежащих на диагонали, так как при отображении квадранта используется векторная графика. Для каждого квадранта процедура описания повторяется с соответствующим изменением значения атрибутов. Тег < IMG> сообщает браузеру с помощью атрибута SRC, где находится файл с рисунком карты изображения, атрибуты WIDTH и HEIGHT задают ширину и высоту изображения. Атрибут USEMAP со значением “#KARTA” сообщает браузеру, что карта изображения создается на стороне клиента. Всплывающая подсказка в вершинах самой карты изображения контролирует правильность ее создания.

ФРЕЙМЫ

Фреймы (FRAMES) позволяют отображать в одном окне браузера два или более HTML – документа. Чаще всего они используются для создания навигационной панели Web – узла. Создание фреймов предполагает создание нового HTML – документа специального типа, который называется управляющим файлом (FRAMESET). С помощью этого дескриптора осуществляется деление окна браузера на фреймы. Следует отметить, что при создании фреймов дескриптор < BODY> не используется. В пределах дескриптора < FRAMESET> с помощью атрибута ROWS указывается горизонтальное направление фрейма (строки), а с помощью атрибута COLS – вертикальное направление (столбцы). В каждом из фреймов отображается определенный файл Web – страницы. Это выполняется с помощью дескриптора < FRAME />. В нем используются атрибуты SRC, NAME, ID.

< HTML>

< HEAD>

< TITLE> Создание фреймов < /TITLE>

< STYLE TYPE=”TEXT/CSS”>

< /STYLE>

< /HEAD>

< FRAMESET ROWS=”20%, *, 10%”>

< FRAME SRC=”1.HTML” NAME=”TOP” ID=”TOP” />

< FRAMESET COLS=”30%, *, 10%”>

< FRAME SRC=”2.HTML” NAME=”LEFT” ID=”LEFT” />

< FRAME SRC=”3.HTML” NAME=”MAIN” ID=”MAIN” />

< FRAME SRC=”4.HTML” NAME=”RIGHT” ID=”RIGHT” />

< /FRAMESET>

< FRAME SRC=”5.HTML” NAME=”BOTTOM” ID=”BOTTOM” />

< /FRAMESET>

< HTML>

Комментарий к коду HTML – документа.

Первый дескриптор < FRAMESET> содержит атрибут ROWS, задающий деление на три строки в процентном соотношении 20%, 70%, 10%. Звездочка может ставиться на оставшееся поле по делению. Аналогично еще один дескриптор < FRAMESET> делит вторую строку на три столбца в процентном соотношении 30%, 60%, 10%. Название окон приведены в стандартном варианте: TOP, LEFT, MAIN, RIGHT, BOTTOM.

ФОРМЫ

Формы, по сути дела – электронные формуляры. Основными элементами формы являются поля и кнопки. Поя предназначены для ввода данных пользователем, кнопки – для выполнения определенных операций.

В дескрипторе каждого поля < INPUT TYPE=” тип поля” /> необходимо указывать его имя (значение атрибута NAME) и идентификатора (значение атрибута ID). Кнопка SUBMIT, которая предназначена для отправки введенных пользователем данных, является обязательным элементом любой формы. Адрес, по которому нужно отправить данные формы, присваивают атрибуту ACTION дескриптора < FORM>. Для создания кнопки необходимо воспользоваться дескриптором < INPUT TYPE=”SUBMIT”. Код любой формы должен быть расположен между дескрипторами < FORM> и

< /FORM>. У дескриптора < FORM> есть два обязательных атрибута ACTION и METHOD. Для упрощения кода атрибуту METHOD присваивается значение POST. Тег < TEXTAREA> создает элемент текстового поля заданной ширины и высоты, имеет закрывающий тег < /TEXTAREA>.

< HTML>

< HEAD>

< TITLE> Создание текстового поля< /TITLE>

< /HEAD>

< BODY>

< H2> Зарегистрируйтесь< /H2>

< FORM NAME=”MAIL” ACTION=”/CGI - BIN/MAIL.CGI” METHOD=”POST”>

Ваше имя: < BR />

Ваш E - MAIL: < BR />

< INPUT TYPE=”TEXT” SIZE=”30” MAXLENGTH=”35” NAME=”NAME” />

< BR />

< INPUT TYPE=”TEXT” SIZE=”30” MAXLENGTH=”35” NAME=”MAIL” />

< BR />

: < BR />

< TEXTAREA COLS=”25” ROWS=”5” NAME=”COMMENT”>

Ваш комментарий < /TEXTAREA>

< BR /> < BR />

< INPUT TYPE=”SUBMIT” VALUE=”Отправить“/> & NBSP;

< INPUT TYPE=”RESET” VALUE=” Очистить“/>

< /BODY>

< /HTML>