Понятие гипертекстовой ссылки

Одна из особенностей World Wide Web заключается в возможности перехода с одной веб-страницы на другую с помощью так называемой гипертекстовой связи (hyperlink). Путешествуя по Web, вы постоянно встречаете на веб-страницах гипертекстовые ссылки — фрагменты текста, подчеркнутые и выделенные другим цветом. Это делается с помощью HTML команд <а> и </а>; заключенный между этими командами текст называется текстом ссылки. Если на нем щелкнуть мышью, автоматически осуществляется переход на другую веб-страницу.

На предыдущих лабораторных вы научились интегрировать в веб-страницу графические изображения и фоновую графику. Теперь настало время сделать следующий шаг и научиться ссылаться на другие страницы в WWW. Гиперссылки на веб-страницы — одно из основных свойств WWW. Любой html-документ может содержать ссылку на некоторый раздел внутри этого же документа или на другой html-документ.

Гиперссылки-метки

Если html-документ является достаточно длинным, то для удобства быстрого перехода «внутрь» документа, а затем возврата «одним щелчком» в начало, при создании html-документа можно воспользоваться механизмом создания меток (еще такие гиперссылки называют якорями).

В том месте html-документа, куда необходимо попасть при щелчке по гиперссылке, ставится команда вида:

<a name="info"></а>Важная информация

Здесь в атрибуте name= указывается условное имя метки (может быть буквенно-цифровое).

Обратите внимание , что закрывающую команду </а> лучше поставить сразу после открывающей.

Имена меток (якорей) должны быть уникальны в пределах документа. Имена меток в одном документе не могут отличаться только регистром.

Затем, там, где формируется «оглавление», создаем гиперссылку на метку:

Посмотрите в разделе <a href="#info">Информация</a>.

Обратите внимание, что в атрибуте href= указывается имя метки, перед которым ставится знак # (он является обязательным!).

Гиперссылки на другие html-документы

Для создания гиперссылки используются команды <а> и </а>, причем в команде <а>, в атрибуте href= указывается адрес html-документа. Этот адрес называется универсальным указателем ресурсов (Uniform Resource Locator) — URL. В каждом URL-адресе есть три части: протокол, имя сервера и имя файла (включая путь к нему, если необходимо). Протокол — это правила, в соответствии с которыми два компьютера общаются друг с другом. Мы будем говорить в основном о http — стандартном протоколе WWW.

Например, гиперссылка на веб-сайт газеты «Наука в Сибири» формируется так:

<a href="http://www.sbras.ru/HBC/index.html"> &laquo;Наука в Сибири&raquo; </a>

здесь
http:// — протокол,
www.sbras.ru — имя сервера, где находится веб-сайт,
/HBC/index.html — путь и имя файла главной страницы веб-сайта.

А на экране вы увидите:

Причем, имейте ввиду: если на веб-сервере в папке с файлами сайта есть файл с именем index.html, то именно он откроется в браузере автоматически, даже если его имя и не будет указано в URL-адресе:

<a href="http://www.sbras.ru/HBC/"> &laquo;Наука в Сибири&raquo; </a>

Абсолютные и относительные URL-адреса

Абсолютный URL-адрес содержит полный адрес документа и используется для ссылки на html-документы, находящиеся в Интернете (на других серверах):

<a href="http://www.sbras.ru/HBC/2004/n09/f08.html"> ЧТО НИ ДЕЛАЕТСЯ — ВСЕ К ЛУЧШЕМУ…</a>

Это гиперссылка на конкретную статью в «НВС»:

Относительный URL-адрес связан с адресом текущего документа, т.е. определяется относительно той директории (папки), где расположен документ, открытый в браузере. Этот вид URL-адреса используется не только для создания гиперссылок, но и для того, чтобы правильно указывать путь к графическим файлам, используемым в html-документах. Например, если в html-документе lab3-t.htm необходимо сделать гиперссылку на файл lab3-z.htm, находящийся в той же самой папке, то достаточно указать:

<a href="lab3-z.htm">Задание</a>

Если же требуется, например, вставить в html-документ картинку logo.gif, находящуюся в папке ris, то следует делать так:

<img src="ris/logo.gif">

Адрес ../lab1/lab1-t.htm означает переход на одну папку вверх (..) и выбор файла из папки lab1.

Адрес /lab1/lab1-t.htm означает переход в корневую папку и соответствует абсолютному URL-адресу вида:
http://www.lab.ru/lab1/lab1-t.htm.

Как правило, относительные URL-адреса используются в html-документах, расположенных на одном сервере. Это делается для того, чтобы при модифицировании или переносе сайта на другой сервер в гиперссылках ничего не нужно было менять.

Но, категорически неверно указывать в URL-адресах имя диска (K:, L:), т.к. при переносе файлов на сервер никаких дисков уже нет! Да и при переносе файлов с компьютера на компьютер имена дисков могут различаться, и что, сидеть и все исправлять???

Картинки-гиперссылки

В качестве гиперссылки может выступать не только текст, но и картинка. При этом на экране вокруг картинки будет изображена цветная рамка. Если же эта рамка не нужна, ее можно убрать, используя атрибут border=0 в команде <img>:

<a href="#home"><img src="ris/up.gif" border=0> В начало </a>

Сравните:

В начало

и

В начало

E-mail-гиперссылки

Помимо гиперссылок на html-документы, в языке HTML есть возможность автоматически открыть почтовое приложение (если оно настроено на компьютере). Для этого используется особый вид значения атрибута href=:

<a href="mailto:[email protected]">[email protected]</a>

Обратите внимание на то, что значение атрибута href= обязательно должно быть в кавычках.

Атрибут target

По умолчанию гиперссылка открывается в том окне (вкладке) браузера, где находится веб-страница с этой гиперссылкой. А если хотелось бы, чтобы новая страница и открывалась в новом окне браузера?

Для этого следует воспользоваться атрибутом target= в команде <a>.

У этого атрибута есть стандартное имя _blank, когда каждая новая веб-страница будет открываться именно в новом окне браузера (или в новой вкладке — в зависимости от браузера).

<p><a href="page1.htm" target="_blank">Первая гиперссылка</a>.
<p><a href="page2.htm" target="_blank">Вторая гиперссылка</a>.

Если же в качестве значения атрибута target= указать произвольное имя и использовать его потом в нескольких гиперссылках, то все эти гиперссылки будут открываться в одном и том же окне браузера:

<p><a href="page1.htm" target="my-new">Первая гиперссылка</a>.
<p><a href="page2.htm" target="my-new">Вторая гиперссылка</a>.

Атрибут title

Еще один полезный атрибут команды <a> — это атрибут title=, позволяющий в момент наведения на гиперссылку указателя мышки отобразить рядом с курсором короткий текст (как правило, пояснительного характера):

<a href="http://www.sbras.ru" title="СО РАН - это Сибирское отделение Российской академии наук">Портал СО РАН</a>