Материал: 1896
Рис. 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-страницы в окне браузера