Материал: 1896
Гиперссылка Электронная почта осуществляет переход на абзац, рассказывающий об электронной почте (рис. 66).
Рис. 66. Вид Web-страницы в окне браузера
Гиперссылка Телеконференции осуществляет переход на абзац телеконференции соответственно (рис. 67).
Рис. 67. Вид Web-страницы в окне браузера
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; harset=windows1251"><TITLE>label</TITLE></HEAD>
<BODY>
<P ALIGN="CENTER"><B>Электронная почта и другие услуги сетей</B><BR><A HREF="#mail">Электронная почта</A>
<BR><A HREF="#teleconference">Телеконференции</A>
<BR><P ALIGN="CENTER">
<B><A NAME="mail”>Электронная почта</A></B>
<P ALIGN="JUSTIFY"><I>Электронная почта </I> – это основной вид услуг компьютерных сетей.
<BR><I>Электронное письмо </I> – это обычный текстовый файл, содержащий электронный адрес получателя и текст письма. В письме могут содержаться не только текстовая информация, но и специальным образом перекодированные рисунки, программы, архивы и пр.
<P ALIGN="CENTER">
<B><A NAME="teleconference">Телеконференции</A></B>
<P ALIGN="JUSTIFY"><I>Телеконференция </I> – это общение группы людей по объединяющей их теме. Телеконференция не ограничена во времени, она может продолжаться месяцами и годами.
<BR>Участники такой конференции – абоненты компьютерной сети. Телеконференция заключается в обмене электронными письмами между ее участниками.
</BODY></HTML>
Символ # указывает браузеру, что следует искать флажок, а не отдельный HTML-документ. Для посетителей текст такой ссылки будет выглядеть так же, как и текст любой другой ссылки. Однако при щелчке на таком тексте происходит переход на метку в том же файле.
Имя метки, указанное в теге <A HREF=" ">, должно соответствовать имени метки, указанном в теге <A NAME=" ">.
1.6.5. Переход к метке, созданной в другом HTML-документе
Рассмотрим на примере. Созданы два HTML-документа: label_1.htm и label_2.htm (см. рис. 68).
Рис. 68. Слева файл label_1.htm, справа файл label_2.htm
При щелчке на ссылку Электронная почта в файле label_1.htm осуществляется переход к метке Электронная почта файла label_2.htm
Текст программы label_1.htm:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; harset="windows1251"><TITLE>label</TITLE></HEAD>
<BODY>
<P ALIGN="CENTER">
<B>Электронная почта и другие услуги сетей</B><BR>
<A HREF="label_2.htm#mail">Электронная почта</A>
<BR><A HREF="label_3.htm#teleconferenc">Телеконференции</A>
</BODY></HTML>
Текст программы label_2.htm:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; harset=windows1251"><TITLE>label</TITLE></HEAD>
<BODY><P ALIGN="CENTER">
<B><A NAME="mail”>Электронная почта</A></B>
<P ALIGN="JUSTIFY"><I>Электронная почта </I> – это основной вид услуг компьютерных сетей.
<BR><I>Электронное письмо </I> – это обычный текстовый файл, содержащий электронный адрес получателя и текст письма. В письме могут содержаться не только текстовая информация, но и специальным образом перекодированные рисунки, программы, архивы и пр.
</BODY></HTML>
Замечание: файл label_3.htm организуется аналогично файлу label_2.htm c NAME="teleconferenc".
1.6.6 Полезные советы по созданию гиперссылок
Совет первый: ограничьте количество гиперссылок на одной Webстранице.
Поскольку текст ссылки выводится подчеркнутым шрифтом, слишком большое число ссылок делает страницу абсолютно нечитаемой, и вряд ли это понравится посетителям.
Если есть необходимость ввести множество ссылок, необходимо создать простой (но хорошо организованный) список в конце страницы.
Совет второй: текст гиперссылок должен быть понятным. Необходимо сделать так, чтобы смысл ссылок был понятен. Ссылки
лучше выделить жирным шрифтом. Ссылки не должны нарушать плавности повествования.
Совет третий: предупреждайте о ссылках на большие документы. При ссылке на большие рисунки, файлы, звуковые файлы или видеоклипы лучше заранее предупредить об этом посетителей, поскольку
загрузка больших файлов может занять много времени.
Совет четвертый: поддерживайте ссылки в действующем состоянии. Большинство ссылок со временем устаревают. Web-страницу, на которую делается ссылка, могут удалить или перенести на другой узел. Периодически проверяйте ссылки на Web-cтранице, чтобы точно знать,
что они актуальны. Иначе их лучше не использовать.
1.6.7. Создание изображения-карты
Гиперссылкой может являться не все изображение, а отдельный его фрагмент. Для этого изображение размещается на Web-странице и графически разделяется на фрагменты. В качестве фрагмента могут быть прямоугольник, окружность и многоугольник, т. е. для каждого фрагмента необходимо определить координаты (координаты задаются в пикселях), соответствующие ссылке на HTML-файл (табл. 18).
|
Таблица 18. Теги изображения-карты |
||||
Тег |
|
|
Комментарий |
|
|
1 |
|
|
2 |
|
|
<IMG SRC=" " |
|
Помещает графический файл на Web- |
|
||
USEMAP="#Изображение-карта"> |
|
страницу. |
|
|
|
|
|
USEMAP сообщает браузеру, что данный |
|
||
|
|
графический |
файл |
является |
|
|
|
изображением-картой, и дает ему |
|
||
|
|
указание найти именной раздел под |
|
||
|
|
названием "Изображение-карта" |
|
|
|
<MAP |
|
Указывает браузеру, на что ссылается |
|
||
NAME="Изображение-карта"> |
|
каждый из фрагментов изображения- |
|
||
<AREA …> |
|
карты. |
|
|
|
… |
|
AREA задает фрагмент, являющийся |
|
||
<AREA …> |
|
ссылкой на HTML-файл. |
|
|
|
</MAP> |
|
Замечание: значение, присваиваемое |
|
||
|
|
NAME, должно совпадать со значением, |
|
||
|
|
заданным USEMAP |
|
|
|
Окончание табл. 18
1 |
|
|
|
2 |
|
|
|
<AREA SHAPE="RECT" |
Задает |
прямоугольный |
фрагмент |
||||
COORDS="Х1,У1,Х2,У2" |
изображения с |
координатами левого |
|||||
HREF="f1.htm"> |
верхнего(X1,У1) |
и |
правого |
||||
|
нижнего(X2,У2) |
углов прямоугольника в |
|||||
|
пикселях. Осуществляет переход к файлу |
||||||
|
f1.htm |
(Х1,У1) |
|
||||
|
|
|
|||||
|
|
|
|
|
|
|
|
(Х2,У2)
<AREA SHAPE="CIRCLE" |
Задает |
фрагмент-окружность |
с |
|
COORDS="Х,У,R" HREF="f2.htm"> |
координатами центра окружности(X,У) и |
|||
|
радиусом R |
|
|
|
|
|
|
R |
|
|
|
|
(Х, У) |
|
|
|
|||
<AREA SHAPE="POLY" |
Задает фрагмент-многоугольник с |
|||
COORDS="Х1,У1,Х2,У2,Х3,У3, Х4,У4, |
координатами |
каждого |
угла |
|
Х1,У1" HREF="f3.htm"> |
многоугольника |
|
|
|
|
|
|
(Х2, У2) |
|
|
(Х1, У1) |
|
|
|
|
(Х4, У4) |
|
|
|
|
|
(Х3, У3) |
|
|
Приведем пример:
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=windows1251"><TITLE>Card</TITLE></HEAD>
<BODY BACKGROUND="fon.gif"> <P ALIGN="CENTER">
<B><FONT COLOR="#000000" SIZE="6">
Дистанционные курсы</FONT></B>