8.8. Гиперссылки
Гипертекстовые ссылки являются отличительной особенностью гипертекстовых WEB – публикаций. Введение гипертекстовых ссылок (далее - ссылки) позволяет объединить любое множество документов в единое издание. Они делают набор документов связанным и структурированным, что позволяет читателю (пользователю) получать необходимую ему информацию максимально быстро и в полном объеме.
Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки.
Различают глобальные и локальные ссылки. Глобальные ссылки могут указывать на другой документ в рамках сети Internet, например, запрашивать файл по FTP-протоколу для отображения его браузером. URL – адрес в ссылке позволяет вызывать документы используя рассмотренную ранее систему именования Internet. Именно этот подход используется при организации больших структурированных Web - серверов.
Локальные ссылки используются в рамках одного документа. В этом случае ссылка используется для организации связь между некоторыми элементами или фрагментами Web – публикации в виде прямого соединения отдельных точек в документе с другими точками в том же самом Web - документt.
В HTML терминологии конечные точки связей часто называют anchors (якорь).
Существуют два конца связи (якоря): связь осуществляется от одной точки к другой. Последняя, называемая целью (target) связи, часто является началом документа.
Связанный текст (аббревиатура HUT), действует, как связь к Web - документу, который объясняет это сокращение и дает информацию о нем. Отображение текста связи возможно по-разному: текст связи может быть подчеркнут, окрашен или выделен в текстовом материале каким-то другим образом. Пользователь (читатель) может узнать, как связи отображены в каждом отдельном окружении.
HTML использует множество условных оборотов для текстовых и структурированных документов. Ссылки связывают один Web - ресурс с другим например, изображением, видеоклипом, звуковым файлом, программой, HTML - документом, элементом в документе HTML и т.д. Несмотря на простоту, ссылки стали основным залогом успеха Web - технологий.
По умолчанию со ссылкой бывает связана загрузка другого Web - ресурса. Запуск ссылки достигается обычно путем выбора ссылки курсором мыши и последующего щелчка левой клавишей мыши (или с помощью ввода с клавиатуры).
Web – ресурс задается URL - адресами:
- Абсолютным URL – адресом, например, http://www.mycompany.com/one. html#anchor-one.
- Относительным URL - адресом: */*/one.html#anchor-one.
- Именем файла, на который указывает ссылка, если этот файл размещен в той же директории (папке): one.html#anchor-one one.htm.
- Если ссылка определена в том же документе: #anchor-one.
Это внешний вид URL. Для того, чтобы браузер отобразил ссылку на URL - адрес, необходимо отметить этот адрес в HTML-документе специальными управляющими элементами (тэгами). Синтаксис HTML, позволяющий это сделать иллюстрируется следующим примером:
<html>
<head>
<title> Ссылки </title>
</head>
<A HREF="URL"> текст который будет подсвечен как ссылка </A>
</body>
</html>
Рис. 8.25 Визуализация ссылки
Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между открывающим и закрывающим тэгами подсвечивается специальным образом Web-браузером (рис. 8.25). Обычно этот текст отображается подчеркнутым и выделенным синим (или другим заданным пользователем) цветом. Код, обозначающий URL - адрес, браузером не отображается, а используется только для выполнения предписанных им действий при активизации ссылки. Отметим, что при совмещении курсора мыши с полем текста ссылки, курсор изменяет свою форму (пиктограмма руки с выпрямленным указательным пальцем).
Путем активизации этих ссылок (с помощью щелчка левой клавишей мыши, ввода с клавиатуры, голосовых команд и т.д.) пользователи могут перейти к этим ресурсам. Напомним, что атрибут href в каждом исходном якоре указывает адрес целевого якоря с использованием URL - адреса.
Целевой якорь ссылки может быть элементом в HTML - документе. Целевому якорю должно присваиваться имя и URL – адрес. Это имя используется в качестве идентификатора фрагмента.
Целевые якоря в HTML - документах могут указываться с помощью элемента A (и атрибута name) или с помощью других управляющих элементов HTML (используя атрибут id). Таким образом, например, можно создавать оглавление, элементы которого являются ссылками на элементы заголовков H1 – H6 и т.д. в том же документе.
Используя элементA для создания целевых якорей, можно записать:
<html>
<head>
<title> Ссылки</title>
</head>
<body>
<H3> Содержание; </H3>
<P><A href="#section1"> Введение </A>
<BR>
<A href="#section2"> Предыстория </A>
<BR>
<A href="#section2.1"> Более конкретные заметки </A>
<P>продолжение содержания...
<P>тело документа...
<H4><A name="section1"> Введение </A> </H4> ...раздел 1...
<H4><A name="section2"> Предыстория </A> </H4> ...раздел 2...
<H4><A name="section2.1"> Более конкретные заметки </A> </H4> ...раздел 2.1...
</body>
</html>
Визуализация приведенного выше HTML – кода в окне браузера иллюстрируется рис. 8.26.
Рис. 8. 26 Визуализация ссылок, созданных с помощью элемента А и атрибутов href и name.
Такого же эффекта можно достигнуть, сделав якорями сами элементы заголовка:
<html>
<head>
<title> Ссылки</title>
</head>
<body>
<H3> Содержание </H3>
<P><A href="#section1">Введение</A><BR>
<A href="#section2">Предыстория</A><BR>
<A href="#section2.1">Более конкретные заметки</A><BR>
продолжение содержания...
тело документа...
<H4 id="section1">Введение</H4>
раздел 1...
<H4 id="section2">Предыстория</H4>
раздел 2...
<H5 id="section2.1">Более конкретные заметки</H5>
раздел 2.1...
</body>
</html>
В последней записи использованы атрибуты href и id. Вид HTML – документа в окне браузера остается без изменений.
Наиболее часто сейчас ссылки используются для загрузки других Web – ресурсов (как показано в предыдущих примерах). Для ссылок, выражающих другие типы отношений, в исходном якоре указываются один или более типов ссылок.
Роли ссылок, определяемых элементами A или Link, указываются с помощью атрибутов rel и rev. Тип первой ссылки - "prev", второй - "next" (два из ряда распознаваемых типов ссылок).
Для задания заголовков ссылок используется атрибут title (для элементов A и LINK).
Рассмотрим управляющие элементы HTML, использующиеся при создании ссылок.
Управляющий элемент A - якорь (точка ссылки).
С помощью этого управляющего элемента HTML задаются типы прямых и обратных ссылок, кодировки символов связанного ресурса, код языка и другие параметры локальных ссылок. В записи кода HTML начальный и конечный тэги: обязательны.
Определения атрибутов:
- name = cdata. Этот атрибут присваивает якорю имя. Значением этого атрибута должно быть уникальное имя. Область действия этого имени распространяется на текущий документ. Этот атрибут использует общее пространство имен с атрибутом id.
- href = URL. Этот атрибут определяет местоположение ресурса Web. Он определяет связь между текущим элементом (исходным якорем) и целевым якорем.
- hreflang = langcode. Этот атрибут задает базовый язык ресурса, назначаемого атрибутом href.
- type = content – type. Этот атрибут определяет тип части содержимого, например, результат обратного действия ссылки на ресурс
- rel = link – type. Этот атрибут описывает отношение из текущего документа к якорю, заданному атрибутом href. Значением этого атрибута является разделенный пробелами список типов ссылок.
- rev = link – type. Этот атрибут используется для описания обратной ссылки из якоря, задаваемого атрибутом href, в текущий документ. Значением этого атрибута является разделенный пробелами список типов ссылок.
- charset = charset. Этот атрибут задает кодировку символов назначаемого ссылкой ресурса.
Каждый элемент A определяет якорь:
- Содержимое управляющего элемента A определяет положение якоря.
- Атрибут name этого элемента задает имя якоря, так что он может служить пунктом назначения любого числа ссылок.
- Атрибут href назначает якорь пунктом назначения для одной ссылки.
В качестве примера приведем содержание некоторого HTML – документа, состоящее из четырех глав:
<HTML>
<HEAD>
<TITLE> Ссылки в Web-страницах </TITLE>
</HEAD>
<BODY>
<P> <H3> Содержание: </H3>
<A href="ogl1.htm"> <P> Глава 1 </A>
<A href="ogl2.htm"> <P> Глава 2 </A>
<A href="Ogl3.htm"> <P> Глава 3 </A>
<A href="ogl4.htm"> <P> Глава 4 </A>
</BODY>
</HTML>
Здесь ссылки даются на HTML – файлы, размещенные в той же директории, что и файл данного примера.
На рис.8.27 приведен визуальный вид Содержания в окне браузера.
Рис. 8.27 Вид исходного HTML - документа в окне браузера
Слова, использующиеся в качестве исходного якоря ссылки, выделены подчеркиванием.
При наличии HTML – файлов (целевых якорей), на которые производится ссылка, браузер выведет этот файл на экран компьютера (рис. 8.28).
Рис. 8.28 Вид оглавления первой главы в окне браузера
Как видно из приведенного рисунка, в составе оглавления первой главы представлены слова (выделенные подчеркиванием), в свою очередь являющиеся исходными якорями для ссылок на конкретный материал определенного параграфа.
При создании вышеприведенных примеров использован атрибут href.
Ссылки на точки внутри документа. В процессе создания Web - публикации можно делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя скроллирование экрана. Как только вы щелкнете на ссылке, браузер выведет на экране указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена в качестве первой строки окна браузера (если данная строка не присутствует на экране браузера в момент активизации ссылки).
Для создания такой ссылки создается маркер раздела, который вызывается по ссылке, и создается сама ссылка на данный маркер:
- Маркер раздела. Синтаксис данного маркера следующий:
<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке-броузера </A>
- Ссылка на данный маркер:
<A HREF="#named_anchor"> Текст </A>
В качестве примера приведем начальный текстовой фрагмент данного параграфа:
<HTML>
<HEAD>
<TITLE> Ссылки внутри документа </TITLE>
</HEAD>
<BODY>
<P> <H4> 8.8 Ссылки </H4>
<P> Гипертекстовые ссылки являются отличительной особенностью гипертекстовых WEB - публикаций. Введение гипертекстовых ссылок (далее - ссылки) позволяет объединить любое множество документов в единое издание. Они делают набор документов связанным и структурированным, что позволяет читателю (пользователю) получать необходимую ему информацию максимально быстро и в полном объеме.
<P> Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки.
<P> Различают глобальные и <A HREF="#ex1"> локальные ссылки </A>. Глобальные ссылки могут указывать на другой документ в рамках сети Internet, например, запрашивать файл по FTP-протоколу для отображения его браузером. <A HREF="#ex2"> URL - адрес в ссылке</A> позволяет вызывать документы используя рассмотренную ранее систему именования Internet. Именно этот подход используется при организации больших структурированных Web - серверов.
<P> <A NAME="#ex1"> Локальные ссылки используются в рамках одного документа. В этом случае ссылка используется для организации связь между некоторыми элементами или фрагментами Web - публикации в виде прямого соединения отдельных точек в документе с другими точками в том же самом Web - документ </A>.
<P> В HTML терминологии конечные точки связей часто называют <I> anchors (якорь).</I>
<P> Существуют два конца связи (якоря): связь осуществляется от одной точки к другой. Последняя, называемая <I> целью (target)</I> связи, часто является началом документа.
<P> <I>Связанный текст </I> (аббревиатура HUT), действует, как связь к Web - документу, который объясняет это сокращение и дает информацию о нем. Отображение текста связи возможно по-разному: текст связи может быть подчеркнут, окрашен или выделен в текстовом материале каким-то другим образом. Пользователь (читатель) может узнать, как связи отображены в каждом отдельном окружении.
<P> HTML использует множество условных оборотов для текстовых и структурированных документов. Ссылки связывают один Web - ресурс с другим (например, изображением, видеоклипом, звуковым файлом, программой, HTML - документом, элементом в документе HTML и т.д.). Несмотря на простоту, ссылки стали основным залогом успеха Web - технологий.
<P> По умолчанию со ссылкой бывает связана загрузка другого Web - ресурса. Запуск ссылки достигается обычно путем выбора ссылки курсором мыши и последующего щелчка левой клавишей мыши (или с помощью ввода с клавиатуры).
<A NAME="#ex2">
<P>Web - ресурс задается URL - адресами:
<P>- Абсолютным URL - адресом, например, http://www.mycompany.com/one. html#anchor-one.
<P>- Относительным URL - адресом: */*/one.html#anchor-one.
<P>- Именем файла, на который указывает ссылка, если этот файл размещен в той же директории (папке): one.html#anchor-one one.htm.
<P>- Если ссылка определена в том же документе: #anchor-one.
</A>
</BODY>
</HTML>
Каждой ссылке сопоставляется определенный код. Определив якорь, мы можем связать его с этим же или с другим документом. URI, назначающие якорь, включают символ "#", за которым следует имя якоря (идентификатор фрагмента). В данном случае используются имена ссылок "#ex1", "#ex2".
Символы "#ex1" сообщает браузеру, что необходимо найти в данном HTML-документе маркер с именем "#ex1". Аналогичная процедура осуществляется и со вторым адресом"#ex2".
На рис. 8.29 приведен вид в окне браузера HTML – документа с созданными ссылками.
Рис. 8.29 Визуализация ссылок в окне браузера
После щелчка курсором мыши по первой ссылке, материал в окне браузера перемещается таким образом, чтобы фрагмент, на который произведена ссылка, отобразился начиная с первой строки (рис. 8.30).
Рис. 8.30 Визуализация фрагмента текста, вызванного по ссылке
Текстовой фрагмент, вызванный по первой ссылке (#ex1) специально выделен авторами (и отображается инверсно).
Реакция на вторую ссылку (URL – адрес ссылки) иллюстрируется рис. 8.31.
Рис. 8.31 Фрагмент, вызванный второй ссылкой
Маркер раздела может быть вставлен как в том же документе, который просматривается в текущий момент, так и в любом другом документе. В последнем случае браузер осуществит загрузку другого документа и перейдет к визуализации указанного в ссылке раздела.
Обычно браузеры представляют ссылки таким образом, чтобы они были наглядно различимы пользователями (например, подчеркивание). Конкретное представление зависит от браузера. Представление ссылки может различаться в зависимости от того, посещал ли уже кто-либо указанную ссылку. Возможно визуальное представлением предыдущей ссылки.
В спецификации HTML для перемещения зоны просмотра на выделенный по ссылке фрагмент без скроллинга, используется термин «фокус». Таким образом, можно сказать, что ссылка перемещает фокус на целевой якорь ссылки.
Синтаксис имен якорей. Именем якоря является значение атрибута name или атрибута id, используемого в контексте якоря. К именам якорей применяются следующие правила:
- Уникальность. Имена якорей должны быть уникальны в пределах документа. Имена якорей в одном документе не могут отличаться только регистром.
- Соответствие строк. Сравнение между идентификатором фрагментов и именами якорей должно проводиться на основе полного (с учетом регистра) совпадения.
Имена якорей могут содержать только символы набора ASCII.
Ссылки и якоря, определяемые элементом А, не могут быть вложенными. Элемент А не должен содержать других элементов А.
Якоря могут создаваться и с помощью атрибута id. Атрибут id может использоваться для создания якоря в начальном тэге любого элемента (включая элемент A).
Элемент LINK - отношения документов.
С помощью этого элемента создаются независимые от устройства ссылки. В записи HTML – кода начальный тэг: обязателен, конечный тэг: запрещен.
Этот элемент определяет связь. В отличие от элемента А (присутствующим только в теле документа), он может присутствовать только в заголовке документа HEAD HTML - документа, хотя может присутствовать неограниченное число раз. Элемент LINK не имеет содержимого. Он содержит информацию об отношениях, которая может представляться различными способами (например, в виде панели с выпадающим списком ссылок).
Элемент LINK определяет отношение между текущим документом и другим ресурсом. Хотя элемент LINK не имеет содержимого, определяемые им отношения могут отображаться некоторыми браузерами.
Прямые и обратные ссылки. Атрибуты rel и rev задают прямую и обратную ссылки, соответственно. Оба атрибута могут определяться одновременно.
Элемент BASE - информация о пути. Начальный тэг: обязателен, конечный тэг: запрещен. В качестве атрибута используется href = URL. Этот атрибут задает абсолютный URL - адрес, служащий базовым URL для разрешения относительных URL.
В HTML ссылки на внешние изображения, апплеты, программы для обработки форм, таблицы стилей и т.д. всегда задаются с помощью URL. Относительные URL задаются в соответствии с базовым URL, который может определяться из различных источников. Элемент BASE позволяет авторам явно указать базовый URL - адрес документа.
Элемент BASE вставляется в раздел HEAD HTML - документа, до элементов, ссылающихся на внешние ресурсы. Информация о пути, указанная в элементе BASE, влияет только на URL в документе, в котором присутствует этот элемент.
Например, ниже иллюстрируется пример использования элемента BASE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE> Ссылка на рисунок</TITLE>
<BASE href="A:/LINK/pic.jpg">
</HEAD>
<BODY>
<P> Щелкнув курсором мыши по ссылке, Вы увидите <A href="A:/LINK/pic.jpg"> картину </A>
</BODY>
</HTML>
В приведенном примере элементы А и BASE используются для создания ссылки на рисунок (рис. 8.32).
Рис. 8.32 Использование элементов BASE и А для создания ссылки на рисунок
После щелчка курсором мыши по ссылке на экране браузера визуализируется картина (рис. 8.33).
Рис. 8.33 Реализация ссылки на картину
Ссылки, указанные в заголовках HTTP, обрабатываются так же, как элементы LINK, установленные в документе.
Считается, что элементы OBJECT и APPLET определяют атрибуты, имеющие преимущество над значением, установленным для элемента BASE.
