1.3.10. Ссылки в HTML-документе

Отличительной особенностью HTML-страниц по отношению к стандартным текстам, напечатанным в книгах, газетах, журналах и т.п., является наличие ссылок на другие фрагменты этой же страницы или на сторонние документы. Наличие ссылок на страницах сайтов создают не просто текст, а гипертекст, т.е. текст, в котором пользователь может получить дополнительную информацию, кликнув мышкой на соответствующей ссылке. В результате грамотная организация текста и ссылок значительно упрощает пользователю навигацию и поиск нужной информации в сети Интернет.

Ссылка в HTML-документах состоит из двух частей: видимой в окне браузера частью, называемой указателем ссылки (или анкором от англ. anchor – якорь) и адресной частью, URL-адресом, говорящим браузеру куда следует перенаправить пользователя при использовании данной ссылки.

Создание ссылок в документе

Ссылка задается с помощью тега <a>, у которого имеется основной параметр href="URL-адрес", определяющий URL-адрес страницы перенаправления:

<p>Пример <a href="mypage.htm">ссылки</a> в HTML-документе.

Рис. 1.15. Пример отображения ссылки в окне браузера документа, расположенного по адресу: http://its.alnam.ru/example/ex1.htm

Здесь mypage.htm – URL-адрес страницы, на которую перейдет пользователь при нажатии на ссылку, а слово «ссылки» - анкор ссылки, т.е. видимая ее часть в окне браузера. В качестве анкора ссылки чаще всего выступают фрагменты текста или изображения.

В приведенном примере используется относительный URL-адрес страницы перенаправления, т.е. указывается только часть пути, где расположен требуемый документ (в данном случае имя документа mypage.htm), остальная часть пути к документу достраивается браузером автоматически, используя базовый адрес страницы. По умолчанию перед именем mypage.htm добавится домен сайта, с которого был загружен документ (http://its.alnam.ru) плюс набор каталогов, в котором находится текущий документ (в данном примере каталог example). В итоге полный путь будет восстановлен в виде:

http://its.alnam.ru/example/mypage.htm

В случаях, когда страница mypage.htm находится по другому пути, то следует либо скорректировать относительный путь, либо указать абсолютный URL-адрес. Например, если страница mypage.htm находится по адресу

http://its.alnam.ru/mypage.htm

то ссылку из документа http://its.alnam.ru/example/ex1.htm можно организовать так:

<p>Пример <a href="http://its.alnam.ru/mypage.htm">ссылки</a> в HTML-документе.

или

<p>Пример <a href="../mypage.htm">ссылки</a> в HTML-документе.

В первом случае используется абсолютный URL-адрес страницы: http://its.alnam.ru/mypage.htm, а во втором – относительный: ../mypage.htm. Здесь ‘../’ означает родительский каталог, т.е. каталог, в котором находится каталог example. По сути это означает исключение каталога example из пути URL-адреса страницы, что приводит к тому же адресу, что и в первом варианте записи ссылки.

Здесь следует отметить, что относительные URL-адреса страниц могут быть достроены браузером, исходя из базового адреса, указанного в теге <baseurl>. Данный тег располагается в разделе <head> текущего документа и имеет параметр href="базовый адрес". Например, для корректной переадресации на страницу mypage.htm, можно создать следующий HTML-документ:

 <html> <head> <title>Пример тега baseurl</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <baseurl href="its.alnam.ru"> </head> <body> <p>Пример <a href="mypage.htm">ссылки</a> в HTML-документе. </body> </html>

В итоге относительный адрес будет иметь вид не

http://its.alnam.ru/example/mypage.htm,

http://its.alnam.ru/mypage.htm,

благодаря переопределению базового пути с помощью тега baseurl.

Внутренние ссылки

Помимо ссылок на другие страницы или сторонние ресурсы можно создавать ссылки на разные разделы текущего документа. Например, большой документ может содержать оглавление, состоящий из таких ссылок, щелкая по которым, пользователь автоматически переходит к выбранной части документа.

Для организации таких ссылок на странице создаются «маркеры», указывающие, куда должен быть перенаправлен пользователь при выборе той или иной ссылки. «Маркеры» создаются с помощью того же тега <a> с параметром name="имя маркера", а ссылка на этот маркер имеет вид

<a href="#имя маркера">Внутренняя ссылка</a>

Следует обратить внимание, что значение параметра href в этом случае должно начинаться с префикса #, говорящий что это внутренняя ссылка страницы.

Ниже представлен HTML-документ с внутренней ссылкой.

 <html> <head> <title>Пример внутренней ссылки</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <h1>Оглавление</h1> <a href="#chapter1">Глава 1</a> <h2>Введение</h2> <p>Введение в основы языка HTML. <a name="chapter1"></a> <h2>Глава 1</h2> <p>Первая глава книги </body> </html>

а) б)

Рис. 1.16. Пример организации внутренней ссылки в HTML-документе: а – начальное отображение страницы; б – результат перехода по ссылке к главе 1.

Ссылки на другие ресурсы сети Интернет

В стандартной реализации ссылки, заданные в теге <a>, указывают на HTML-страницы в сети Интернет или на локальных ресурсах. Вместе с тем, существуют различные сервисы, имеющие иной формат передачи, приема, отображения данных отличный от HTML. Например, это может быть почтовый клиент, либо ftp-сеть передачи данных, либо telnet и т.п. Все эти и другие сервисы могут быть интегрированы в HTML-документ через ссылки. В этом случае также используется тег <a>, но в параметре href сначала указывается сервис, который подключается к документу, а затем, через двоеточие необходимые параметры этого сервиса. Например, если необходимо автоматизировать написание почтовых сообщений владельцу сайта, то на странице (например, контакты) следует создать следующую ссылку:

<a href="mailto:tkkaf@ulstu.ru">Написать письмо</a>

Здесь префикс mailto: говорит браузеру, что следует открыть почтовый клиент, а параметр tkkaf@ulstu.ru указывает по какому адресу следует отправить письмо.

Ниже в таблице приведены общеизвестные сервисы для интеграции их в HTML-документ.

Таблица 1.2. Ссылки на ресурсы сети Интернет

Название ресурса	Формат ссылки	Пример записи ссылки
Web-страница	http://sitename	http://its.alnam.ru/mypage.htm
e-mail	mailto:address	mailto:tkkaf@ulstu.ru
Newsgroup	news:newsgroupname	news:news.questions
FTP	ftp://sitename	ftp://its.alnam.ru
Gopher	gopher://sitename	gopher:// gopher.mysite.com
WAIS	wais://sitename	wais://wais.mysite.com
TelNet	telnet://sitename	telnet://its.alnam.ru