1896
.pdf
Рис. 62. Вид Web-страницы в окне браузера
1.6. ГИПЕРТЕКСТОВЫЕ ССЫЛКИ НА WEB-СТРАНИЦЕ
1.6.1. Понятие гипертекстовой ссылки
Гиперссылки на Web-странице – одно из основных свойств WWW. Любой документ может содержать ссылку на другой WWW-документ, заданную с помощью специального тега <HTML>.
Гипертекстовые ссылки – это фрагменты текста, подчеркнутые и выделенные чаще всего синим цветом. Отображенный таким образом текст называется текстом ссылки. Если на нем щелкнуть мышью, он автоматически осуществляет ссылку на другую Web-страницу. В каждом URL-адресе есть три части: протокол, узел Интернета и имя файла (включая путь к нему, если необходимо). Напомним, что протокол – это правила, в соответствии с которыми два компьютера общаются друг с другом. Будем говорить в основном о HTTP – стандартном протоколе WWW. Необходимо также указать узел Интернета и имя файла, например: http://www.symbol.ru/dk/articles/color.htm
Если перевести это на русский язык, получится, что браузер должен с помощью определенного способа связи (HTTP) связаться по Интернету с указанным адресом symbol.ru, затем найти Web-страницу color.htm в поддиректориях dk/articles.
Гипертекстовые ссылки на Web-страницах очень часто используются, поскольку могут легко связать два документа, расположенные на противоположных концах мира. Каждый документ и файл в Интернете
имеют уникальный адрес, называемый универсальным указателем ресурсов (Uniform Resource Locator – URL). Чтобы связать два документа, разработчики домашних страниц помещают на одной из них URL другой. URL напоминают адреса электронной почты.
Таблица 16. Теги гиперссылок
Тег |
|
Комментарий |
|
|
<A HREF="URL">…</A> |
Создает |
гиперссылку на |
другие |
|
|
документы |
или |
часть |
текущего |
|
документа |
|
|
|
<A NAME="метка">…</A> |
Задание метки соответствующему тексту |
|||
<A HREF="#метка">…</A> |
Создает |
ссылку, |
осуществляющую |
|
|
переход к заданной метке в том же |
|||
|
файле, где задана метка |
|
||
<A HREF="имя_файла#метка">…</A> |
Создает |
ссылку, |
осуществляющую |
|
|
переход к заданной метке в другом |
|||
|
файле |
|
|
|
Приведем пример гиперссылки:
<A HREF=http://www.symbol.ru/dk/articles/color.htm>Цвет в веб-
дизайне, Кирсанов Д.</A>
где А – якорный тег;
HREF – ключевое слово гипертекстовой ссылки; http://www.symbol.ru/dk/articles/color.htm – URL;
Цвет в веб-дизайне, Кирсанов Д. – этот текст будет выделен;
</A> – закрывающий якорный тег.
Ccылки на местные Webстраницы
Вполне вероятно, что в одном месте может оказаться несколько HTML-документов. В таком случае естественно поместить на главной Web-странице ссылки на каждый из этих документов, которые позволяют легко и быстро на них перейти. Желательно выполнить главную Webстраницу в виде оглавления, ссылающегося на несколько отдельных страниц.
Замечание: для удобства главному документу следует присвоить имя index. htm
Если искомый файл находится в отдельном каталоге, то необходимо прописать путь к нему.
Пример: <A HREF=HOME/computer.htm>Здесь вы можете узнать все о компьютерах</A>
Ссылки на любое место в WWW
Для таких ссылок понадобится полный URL документа, а не только путь и имя файла. Тем не менее ссылка выглядит так же: обозначается имя
файла и текст ссылки тегами <A HREF=" "> и </A>. Когда ссылаются на другой HTML-файл в Web, URL всегда начинается с HTTP://
Таким образом, браузер знает, что искать следует документ в WWW, а не файл на Web-узле. Остальная часть URL состоит из пути в Интернет к нужному узлу и имени файла документа, который необходимо найти. Это очень похоже на написание адреса на конверте: чтобы адресата можно было найти, необходимо правильно указать все части адреса.
В качестве иллюстрации ссылки на любое место в Интернете поместим на страницу ссылку на советы по Web-дизайну Лебедева А. «Руководство по Web-дизайну».
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows- 1251"><TITLE>Web-design</TITLE></HEAD>
<BODY TEXT="#000000">
<A HREF=http://www.design.ru/rukovodstvo/index.htm>
Руководство по Web-дизайну</A> </BODY></HTML>
На рис. 63 показано, как будет выглядеть файл в окне браузера.
Рис. 63. Вид Web-страницы в окне браузера
Цвет гиперссылки
Для изменения цвета гиперссылки используется тег: <BODY> (табл.
17).
|
Таблица 17. Теги изменения цвета гиперссылки |
|
Тег |
Комментарий |
|
<BODY LINK=" "> |
Устанавливает цвет гиперссылки, по умолчанию |
|
|
отображается синим цветом |
|
<BODY VLINK =" "> |
Устанавливает цвет гиперссылки, на которой посетитель |
|
уже побывал (Visited Link) |
|
|
<BODY ALINK =" "> |
Устанавливает цвет, который приобретает текст |
|
гиперссылки в момент щелчка |
|
|
Изменим цвет гиперссылки в предыдущем примере.
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows- 1251"><TITLE>Web-design</TITLE></HEAD>
<BODY TEXT="#000000" LINK="Dark Blue" VLINK="Cormflower" ALINK="Blue">
<A HREF= http://www.design.ru/rukovodstvo/index.htm>
Руководство по Web-дизайну</A> </BODY></HTML>
1.6.3.Использование изображений в качестве гиперссылок
Вкачестве средства ссылок на другие WWW-страницы можно использовать не только текст, но и изображения. То есть при щелчке мышью на изображении на экран выводится другой Web-документ, ссылкой на который и служило это изображение. По умолчанию Webбраузеры окружают изображение синей рамкой.
Вкачестве ссылок на Web-документы можно использовать любые виды изображений, рисунков и пиктограмм (кроме фоновых узоров).
Вкачестве примера можно привести стрелки перехода со страницы на страницу (рис. 64).
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD>
<BODY>
<P ALIGN="CENTER"><B>Интернет и World Wide Web</B><BR> <P ALIGN="CENTER">Здесь вы можете узнать:
<P ALIGN="LEFT">Что такое Интернет
<P ALIGN="LEFT">Историю создания Интернета
<P ALIGN="LEFT">Основные понятия среды Интернета
<P ALIGN="CENTER">
<A HREF="list.htm">
<IMG SRC="more.gif" ALT="Переход к следующей странице"></A> </BODY></HTML>
Рис. 64. Вид Web-страницы в окне браузера
1.6.4. Переход по метке внутри одного документа
Рассмотрим на примере. Создан HTML-документ, где размещены заголовок, две гиперссылки – Электронная почта и Телеконференции, осуществляющие переход внутри данного документа, а также текст, посвященный разъяснению данных понятий (рис. 65).
Рис. 65. Вид Web-страницы в окне браузера
Гиперссылка Электронная почта осуществляет переход на абзац, рассказывающий об электронной почте (рис. 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>