Гиперссылки

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

Гиперссылка – это указатель адреса в глобальной Сети, по которому можно моментально перейти из окна браузера.

Любая гиперссылка состоит из двух частей: указателя ссылки (якоря – от англ. anchor) и адреса ресурса, на который осуществляется переход. Внешне отличить гиперссылку от обычного текста можно при наведении мыши на нее, указатель мыши принимает вид руки с указательным пальцем, а сама ссылка подчеркивается (текстовая ссылка).

В качестве указателя может выступать текст (слово, фраза и даже целая страница) и графическое изображение.

Указатель ссылки описывается тегом < A > < / A >, адрес перехода осуществляется с помощью атрибута HREF. Значением атрибута является URL-адрес документа, на который осуществляется ссылка.

< A HREF=" URL" > текст гиперссылки (графическое изображение)

< /A>

Все гиперссылки можно разделить на два вида: внешние и внутренние. Внешние ссылки ведут на другие ресурсы глобальной Сети или другие HTML-документы одного сайта, а внутренние – позволяют путешествовать в пределах одного документа.

Внешние ссылки. Существуют два способа записи адреса перехода по внешней ссылке: абсолютный и относительный. Абсолютный – в значении параметраHREFуказывается полный путь к ресурсу. Относительный – в значении параметраHREFуказывается конечный документ относительно текущего документа.

Формат абсолютного адреса указателя ресурса имеет следующий вид:

метод: //имя_сервера: порт/путь#якорь

URL обычно состоит из трех частей:

– протокол доступа к источнику – это правила, которые должны выполняться при обмене данными (web-страницами);

– имя сервера, на котором хранится документ;

– имя источника (имя файла документа).

Протокол доступа – это правила, по которым происходит обмен данными между компьютерами. Наиболее часто используемые протоколы: http (поиск документов по всему WWW), ftp (протокол передачи файлов), mailto (вызов протокола электронной почты SMPT).

< A HREF=" https://www.kodak.com/us/en/health" > текст ссылки < /A>

< A HREF=" mailto: //medinews@kodak.com" > текст ссылки < /A>

Кроме рассмотренного атрибута HREF тег < A> имеет еще несколько атрибутов (табл. 2.1).

Таблица 2.1

Атрибуты тега < A>

Пример использования некоторых атрибутов тега < A>:

< A HREF=" https:// www. server.ru/page.htm" TARGET=" _blank"

TITLE=" вызов_содержимого_страницы" > текст гиперссылки < /A>

где HREF – адрес страницы, с которой планируется установить гиперсвязь; TARGET – содержит директивы, описывающие правила открытия целевого документа (если атрибут TARGET принимает значение _blank (TARGET=" _blank"), то открытие нового HTML-документа происходит в новом окне; если этот атрибут опущен, то новый HTML-документ открывается в этом же окне); TITLE – атрибут, который задает всплывающее название гиперссылки, при наведении на нее указателя мыши, его можно опускать (рис. 2.1).

Рис. 2.1. Пример применения гиперссылки

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

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

Если искомый документ расположен в одной директории с текущим, то в качестве параметра атрибута HREF достаточно написать название файла:

< A HREF=" page1.htm" > текст гиперссылки < /A>

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

Процесс создания гиперссылки можно условно разделить на два этапа.

1. Подготовка закладки. Этот этап включает в себя создание именного идентификатора (имя закладки), указывающего место в HTML-доку-менте, куда должны переместиться после нажатия на гиперссылку. Для этого применяют атрибут NAME тега < A >.

< A NAME=«имя закладки»> ключевое слово< /A>

Например,

самыми любимыми предметами, которые изучают в университете, являются: < A NAME=" 1" > информатика < /A >, английский, культурология.

В приведенном выше тексте закладка сделана на ключевое слово «информатика» и присвоено имя этой закладке «1». В качестве имени можно использовать любое сочетание символов и цифр. Для задания имени закладки, конечно же, рекомендуется лучше использовать латинские символы, но и то имя, которое мы дали, не будет являться ошибкой.

2. Создание самой ссылки. Поскольку переход задается в пределах одного документа, внутренние ссылки записываются без указания URL-адреса, вместо него задается имя закладки, к которой осуществляется переход с использованием символа «#» перед этим именем. Этот символ означает, что ссылка указывает на метку, а не на внешний файл: < A HREF=" #имя закладки" > текст ссылки< /A>.

< A HREF=" #2" > Увлечения< /A>

< A HREF=" #1" > Любимые предметы< /A>

< A HREF=" #3" > Понравившиеся фильмы< /A>

В приведенном списке ссылок, при нажатии на текст гиперссылки Любимые предметы, вы перемещаетесь по тексту в то место, где сделана закладка с именем «1».

Оформление ссылок. При создании ссылок можно задать цвета ссылок, задать ссылки в виде рисунка.

Задание цвета ссылок по умолчанию устанавливает браузер в определенных цветах. Можно изменить эти цвета с помощью атрибутов: LINK – цвет неактивизированной ссылки, VLINK – цвет просмотренной ссылки, ALINK – цвет активной ссылки. Эти атрибуты вводятся в элемент тега < BODY>.

< BODY LINK=" olive" ALINK=" green" VLINK=" red" >

Однако сейчас уже используется другой способ изменения цвета ссылок (см. гл. 5), а эти атрибуты считаются устаревшими.

Ссылкой может быть не только текст, но и изображение. Для этого в контейнере < A> вставляют элемент < IMG> вместо текста ссылки или вместе с ним:

< A HREF=" page1.htm" > < IMG SRC=" ap1.gif" > < /A>

где < IMG> – одиночный тег вставки изображения, а атрибут SRC – файл графического изображения.

Пример использования изображений в качестве гиперссылки (рис. 2.2):

Рис. 2.2. Пример использования графических гиперссылок

< A HREF=" page1.htm" > < IMG SRC=" image003.gif" WIDTH=" 50"

HEIGHT=" 50" > & nbsp Ромашки< /A>

< A HREF=" page2.htm" > < IMG SRC=" image006.jpg" WIDTH=" 50"

HEIGHT=" 50" > & nbsp Лилии< /A>