Гиперссылки и карты.

Цель: Научиться вставлять гиперссылки на другие документы, на начало и на некоторые заданные места документов. Научиться формировать карту.

Задание: Продолжить создание Web-страницы.

Последовательность выполнения:

1. <A> - тэг – гиперссылка. Самое важное в HTML-документе. Текст, который пользователь должен видеть несколько особым образом, и щелчок мышкой по которому заставит браузер показать другой документ, вкладывается в тэг – контейнер «гиперссылка». Сначала создайте еще один документ (файл с расширением .HTM), сохраните его в вашу папку, например, с именем «FILE2.HTM». Затем в ваш первый документ вставьте гиперссылку так, как показано в примере. И теперь попробуйте щелкнуть по гиперссылке. Вернуться в предыдущий документ можно, щелкнув по кнопке «назад» (back) в браузере. Обычно она изображается стрелкой влево на панели инструментов. Обратите внимание, что вместе с текстом (и вместо него) в контейнере гиперссылки может быть картинка.

<A HREF="FILE2.HTM"> это текст - гиперссылки </A>

2. Часто возникает потребность перейти в заданное место другого или даже этого же документа. Делается это следующим образом. Задайте в том месте, куда хотите перейти контейнер A, но с атрибутом NAME, который просто именует место. А затем в первой гиперссылке укажите имя метки места. Итак, сначала попробуйте реализовать гиперссылку в конец текущего документа. Первая строка примера должна стоять в вашем документе сразу после тэга <BODY>, а вторая – в самом конце файла. Замечание: чтобы увидеть результат, обязательно надо обеспечить большое количество строк (не умещающееся на одном экране) между гиперссылкой и поименованным местом!

<A HREF="#End" > перейти в конец файла</A>

……….. текст Вашей странички

<A NAME="End" > сюда переходим из начала файла </A>

3. Теперь аналогично попробуйте реализовать гиперссылку в начало текущего документа. Первая строка примера должна стоять в вашем документе сразу после тэга <BODY>, а вторая – в самом конце файла.

<A NAME="Beg"> сюда переход с конца файла</A>

……….. текст Вашей странички

<A HREF="#Beg"> перейти в начало файла </A>

4. Обратите внимание на то, что в тэге <A> можно одновременно указывать и имя текущего места, и имя нового файла. То, что мы только что разобрали, можно было бы записать следующим образом:

<A HREF="#End" NAME="Beg"> перейти в конец файла</A>

……….. текст Вашей странички

<A NAME="End" HREF="#Beg"> перейти в начало файла </A>

5. Теперь задайте имя некоторого места во втором файле (в середине файла) и создайте гиперссылку, по которой покажется второй файл, начиная от указанного места. Для этого вставьте гиперссылку в первый файл, а именование места – во второй.

<A HREF="FILE2.HTM#PL"> переход в середину второго файла</A>

…

<A NAME="PL"> именованное место во 2 файле </A>

6. Атрибуты LINK, VLINK, и ALINK тэга BODY определяют цвет пока не посещенной гиперссылки, посещенной гиперссылки и активной гиперссылки. Задайте например, синий цвет для не посещенной гиперссылки и черный – для посещенной.

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

8. Мы научились связывать гиперссылки с некоторым текстом, с целым рисунком. Теперь встает вопрос, можно ли связать гиперссылки с частями рисунка? Рисунок, помещенный в HTML-текст, может быть своеобразной картой. Например, Вы можете показать карту города с предприятиями, транспортными маршрутами и т.п. И связать с ней самые разные тексты, описывающие предприятие, условия работы на нем, потребность в кадрах и т.п., а для транспортных маршрутов – интервал движения, цену билета и т.п. Для того чтобы сообщить браузеру, что Вы хотите рассматривать заданный рисунок в качестве некоторой карты, Вы должны использовать атрибут USEMAP в тэге IMG. Значение атрибута USEMAP – имя карты, описанной в текущем документе с помощью тэга – контейнера MAP.

Если описание карты не передается клиенту (например, оно слишком большое!), то можно обеспечить такую же с точки зрения пользователя реакцию, но отрабатываемую не браузером клиента, а сервером HTML-документа, указав только атрибут рисунка ISMAP. При этом серверу передаются (как часть URL) координаты «кликнутой» точки. Это можно использовать для выяснения координат нужных точек:

</a>

Обратите внимание, что рисунок должен быть частью гиперссылки. Кроме того, должны быть явно заданы размеры рисунка (если браузер сам его растягивает или сжимает, то координаты точки ничего не скажут серверу).

9. В случае, когда карта обрабатывается на стороне клиента, необходимо описать ее чувствительные зоны (гиперссылки). Тэг MAP содержит элементы AREA, которые их описывают. Пользователь не видит границ зон, но при перемещении мышки по рисунку он может заметить, что мышка превращается в указатель гиперссылки, следовательно, пользователь может нажать на кнопку в данном месте и перейти в другой документ. Поместите в ваш документ еще одну картинку, свяжите с ней карту. Так как по карте должно быть не менее двух-трех переходов, то создайте еще два – три файла – документа. Атрибуты тэга AREA: SHAPE – вид области действия гиперссылки, значения – RECT – прямоугольник, CIRCLE – круг, POLY – многоугольник; COORDS – список координат, причем для прямоугольника задаются сначала координаты левого верхнего угла, а затем – правого нижнего, для круга задаются координаты центра и радиус, для многоугольника задаются координаты точек в направлении по часовой стрелке; HREF – имя файла, который следует показать; атрибут ALT используется, чтобы показывать текстовое пояснение, которое может высвечиваться в строке статуса, когда мышь или другое устройство управления курсором находится над горячей зоной, или же для создания текстовой строки для неграфической программы просмотра. Координаты – это отступ от левого верхнего угла рисунка по горизонтали и по вертикали. Можно задавать координаты в процентах от размера рисунка.

<AREA HREF="FILE2.HTM" ALT="Файл2"

SHAPE=RECT COORDS="0, 0, 118, 100">

<AREA HREF="search.htm" ALT="Поиск"

SHAPE=RECT COORDS="118, 0, 300,200">

<AREA HREF="shortcut.htm" ALT="Переход"

SHAPE=RECT COORDS="118,101, 400, 400">

</MAP>

10. Тэг – контейнер <FORM> помещает в документ заполняемую форму, используемую для таких действий пользователя, как регистрация, поиск или формирование запроса. Формы могут содержать широкий диапазон видов полей форм, такие, как однострочные или многострочные текстовые поля, группы радиокнопок, переключатели и меню. Атрибут ACTION задает имя программы на сервере, обрабатывающей данные, полученные из формы. Атрибут METHOD=GET задает способ передачи данных на сервер. Эти атрибуты можно пока вам не задавать. Элементы формы – это тэги INPUT, SELECT и TEXTAREA. У всех элементов формы обязательно должны быть заданы атрибуты NAME и VALUE. NAME – имя элемента (для всех элементов должны вводиться разные имена, только элементы одной группы радиокнопок должны иметь одно имя). VALUE – это значение, передаваемое серверу. Внесите в ваш документ форму, а затем дополняйте ее (то есть вставляйте в нее) элементами:

<FORM>

</FORM>

11. Сначала рассмотрим все возможные типы полей, задаваемые тэгом INPUT. Этим тэгом с дополнительным атрибутом TYPE можно задать текстовое одностроковое поле, поля пароля, переключатели, радиокнопки, кнопки установки и перезагрузки, скрытые поля, кнопки выгрузки файла, кнопки изображений и т.д.

TYPE=TEXT(тип=текст - по умолчанию)

Одностроковое текстовое поле, чей видимый размер может быть установлен атрибутом SIZE, например, SIZE=40 для 40-символьного поля. Пользователи могут вводить и больше символов, чем этот предел, но с текстовым скроллингом (пролистыванием) поля, чтобы курсор ввода оставался видимым. Вы можете задать верхний предел количества символов атрибутом MAXLENGTH. Атрибут NAME используется для наименования поля, а атрибут VALUE инициализирует текстовую строку в поле, когда документ впервые загружен.

TYPE=PASSWORD (тип=пароль)

Этот тип подобен TYPE=TEXT, однако все вводимые символы представляются в виде *, чтобы скрыть текст от подсматривающих глаз, когда вводится пароль. Вы можете использовать атрибуты SIZE и MAXLENGTH, чтобы управлять видимой и максимальной длинами поля точно так же, как для обычного текстового поля.

TYPE=CHECKBOX (тип=поле установки - переключатель)

Помещает перед текстом, следующим за этим тэгом, кнопку-окошко, в котором пользователь может щелчком проставить «галочку» (то есть отметить, как выбранное им значение). Таким образом, чтобы представить клиенту некоторое меню, требуется указать несколько элементов этого типа. Каждое заполненное переключательное поле генерирует отдельную пару имя/значение в формируемых данных, даже если это приводит к дублированию имен. Используйте атрибут CHECKED для инициализации поля установки по умолчанию.

Ваше имя, пожалуйста,

Пароль

<BR> Ваш заказ:

<INPUT TYPE=CHECKBOX NAME=f1> суп

<INPUT TYPE=CHECKBOX NAME=f2> котлета

<INPUT TYPE=CHECKBOX CHECKED NAME=f3> салат

<INPUT TYPE=CHECKBOX CHECKED NAME=f4> хлеб

<INPUT TYPE=CHECKBOX CHECKED NAME=f5> компот

TYPE=RADIO (тип=радиокнопка)

Используется для атрибута, который может принимать единственное (в отличие от checkbox) значение из множества. Каждое поле радиокнопки в группе должно быть задано только одним значением атрибута NAME. Радиокнопки требуют явного атрибута VALUE. Единственная нажатая радиокнопка в группе генерирует пару имя/значение в формируемых данных. Одна радиокнопка в группе атрибутом CHECKED должна быть предварительно установлена по умолчанию. Для того чтобы в одной форме организовать несколько независимых меню одиночного выбора, обязательно задавайте атрибут NAME с одинаковым именем во всех пунктах одного меню.

<BR> Ваш возраст:

<INPUT TYPE=RADIO NAME=age VALUE="z0"> от 0 до 12 лет

<INPUT TYPE=RADIO NAME=age VALUE="z13"> от 13 до 17 лет

<INPUT TYPE=RADIO NAME=age VALUE="z18"> от 18 до 25 лет

<INPUT TYPE=RADIO NAME=age VALUE="z26" CHECKED> от 25 до 35 лет

<INPUT TYPE=RADIO NAME=age VALUE="z36"> свыше 36 лет

<BR> Ваш пол:

<INPUT TYPE=RADIO NAME=sex VALUE="man"> мужчина

<INPUT TYPE=RADIO NAME=sex VALUE="women"> женщина

<BR> Ваше социальное положение

<INPUT TYPE=RADIO NAME=sp VALUE="sc"> школьник

<INPUT TYPE=RADIO NAME=sp VALUE="in"> студент

<INPUT TYPE=RADIO NAME=sp VALUE="wo"> трудящийся

<INPUT TYPE=RADIO NAME=sp VALUE="pe" CHECKED> пенсионер

TYPE=SUBMIT (тип=отсылка)

Определяет кнопку, которую пользователь может нажать, чтобы передать содержимое формы серверу. Текст-подсказка на кнопке задается атрибутом VALUE. Если атрибут NAME задан, то пара наименование/значение для исполняемой кнопки будет включена в передаваемые данные. После нажатия на кнопку обратите внимание на строку Address в IE, в ней должен появиться некоторый текст. Вы можете включить несколько исполняемых кнопок в форму с целью сообщить серверу тип обработки.

TYPE=RESET (тип=вернуть к умалчиваемому)

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

TYPE=FILE (тип=файл)

Этот тип дает возможность пользователям прикрепить файл к содержимому формы и отправить его на http-сервер. Элемент обычно отображается, как текстовое поле с кнопкой, при нажатии на которую появляется файловый браузер для отбора имени файла. Имя файла также может быть введено прямо в текстовое поле. Таким же образом, как для TYPE=TEXT, для TYPE=FILE можно использовать атрибут SIZE, чтобы установить видимую ширину поля. Вы также можете установить верхний предел для длины имени файла, используя атрибут MAXLENGTH.

TYPE=HIDDEN (тип=скрытый)

Этот тип поля не отображается пользователю. Используется при программировании на JavaScript.

TYPE=IMAGE

Используется для графических кнопок отсылок (то есть то же самое, что и кнопка типа SUBMIT), отображаемых изображением. Файл изображения задается атрибутом SRC. Выравнивание изображения может быть задано атрибутом ALIGN.

12. Выпадающее меню единичного или множественного выбора содержится в контейнере <SELECT>. Пункты меню указываются через контейнеры <OPTION>.

<BR> Ваши любимые фрукты:

<OPTION> бананы </OPTION>

<OPTION> апельсины </OPTION>

<OPTION> мандарины </OPTION>

<OPTION> земляника </OPTION>

</SELECT>

13. Многострочное текстовое поле.

14. Фреймы позволяют разбить окно браузера на несколько окошек, в каждом из которых показывается некоторый документ. Описание этих окошек надо поместить в отдельный файл. (Важно, что для IE-3 в этом файле требуется указать обязательные тэги (HTML, HEAD, BODY), а для IE-5.0 их можно не указывать.) Тэг – контейнер FRAMESET разбивает текущее окно на несколько колонок или строчек. Например, <frameset rows="100,20%,*"> разбивает окно на три части по горизонтали. Причем ширина верхней части равна 100 pt, ширина второй составляет 20% от ширины разбиваемого окна, а ширина третьей части – "то, что осталось". Аналогично можно задать и разбиение окна на столбцы, указав атрибут cols. Ширина строки или высота столбца может быть задана явно (к-во pt), либо в процентах к размеру разбиваемого окна, либо *- все оставшееся. Можно задать одновременное разбиение по двум направлениям, тогда окна образуют решетку. Для каждой части надо указать, что в ней находится. Это может быть уже файл – документ, тогда следуем задать его при помощи тэга FRAME. Если же вам требуется одну из частей разбить еще на части по другому направлению, то надо вложить еще один FRAMESET. Атрибуты тэга FRAME: SRC – имя файла –документа, NAME – имя окна – фрейма. Не забудьте в примере изменить имена файлов на имеющиеся у вас в папке.

</frameset>

Теперь, если этот текст сохранить в Вашей папке с именем "FR.htm", а затем показать в браузере, то такое разбиение окна будет выглядеть следующим образом:

F1.htm
F2.htm	F3.htm	F4.htm

15. Часто даже требуется выделить место в текущем документе, которое выглядит как вложенное окно. Это делает тэг IFRAME. Этот тэг – контейнер, вложенный текст показывается теми браузерами, которым не известен тэг iframe.

16. Для того чтобы по гиперссылке новый файл показался не поверх текущего окна надо указать имя окна, в котором изменить показываемое содержимое. Для этого посмотрите, как у вас называется окно (атрибут NAME в тэге FRAME), и в гиперссылке укажите это имя в атрибуте target=имя окна. Сделать это надо в файле, который показывается в другом окне, например, в файл INDEX.HTM (он у вас показывается в верхнем окне с именем fr1) внесите гиперссылку из примера. По щелчку на эту гиперссылку изменится содержимое среднего окна (с именем fr3).

<A HREF="F5.HTM" TARGET="fr3"> изменяем frame3 из frame1</A>

17. Точно так же можно изменять содержимое плавающего окна, то есть тэга IFRAME.

<A HREF="F5.HTM" TARGET="ifr"> изменяем iframe по гиперссылке</A>

18. Существуют специальные зарезервированные имена окон: _top – поверх самого верхнего уровня, _self – поверх текущего, _parent – поверх родительского, _blank – открыть новое окно. Попробуйте вставить их в гиперссылки в качестве значений атрибута TARGET, проанализируйте результат.

<A HREF="F5.HTM" TARGET="_top"> пробуем _top</A>

<A HREF="F5.HTM" TARGET="_self"> пробуем _self</A>

<A HREF="F5.HTM" TARGET="_blank"> пробуем _blank</A>

<A HREF="F5.HTM" TARGET="_parent"> пробуем _parent</A>

Вопросы: Фреймовая структура страницы. Плавающий фрейм. Изменение содержимого некоторого заданного фрейма по гиперссылке, расположенной в другом фрейме. Форма, элементы формы.

Тэг А, атрибуты HREF, NAME. Карта.

<== предыдущая лекция	\|	следующая лекция ==>
Протоколы Web-серверов	\|	Анализ конкурентоспособности организации

Дата добавления: 2016-04-19; просмотров: 711;