Гиперссылки являются основным достоинством Web-страниц. Это, по сути,
и есть ядро всемирной паутины. Тем, без чего бы она так и осталась просто
еще одним средством отображения документов. Они являются видимым отображением
той технологии связи самых различных интернет-ресурсов, которая и создает
уникальную интегрированность Сети.
Мы все прекрасно знаем, что если при просмотре Web-страницы навести курсор
мыши на гиперссылку, внедренную в состав содержимого Web-страницы, то
курсор примет форму кисти руки с вытянутым указательным пальцем, а единичный
щелчок по этой гиперссылке заставит браузер отыскать в Сети тот ресурс,
на который гиперссылка указывает, и загрузить его.
В качестве гиперссылки может выступать любой фрагмент видимого содержимого
Web-страницы, т. е. и текст, и графические изображения. Для этого применяется
тег <а> со своим закрывающим близнецом
</а>. Рассмотрим самый простой пример.
Листинг 1.15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html47strict.dtd">
Рис. 1.15. Окно браузера с результатом отображения файла, приведенного в листинге 1.15
Как легко увидеть на рис. 1.15, гиперссылка также выделяется цветом, чтобы ее можно было отличить от обычного текста. Цвет выделения устанавливается удаленным пользователем в своем браузере, но мы имеем возможность явно указывать, какой цвет использовать для выделения гиперссылок при помощи стилевых таблиц. Их применение мы рассмотрим в следующей главе. Если мы посмотрим на код листинга 1.15, то увидим, что текст, с которым связывается гиперссылка, обрамляется тегами <а> и </а>. При этом открывающий тег обладает параметром href, в качестве значения которого используется URL того Интернет-ресурса, на который и указывает создаваемая гиперссылка. При этом URL может быть как полным, т. е. включающем в себя наименование протокола доступа к ресурсу, наименования сайта и страницы, Как, например, "http://www.mysite.com/mypage.htm", так и относительным, когда указывается путь к документу, находящемуся на том же сайте, где и исходная Web-страница. При этом будет использоваться код приблизительно следующего вида:
<а href="/chap2/page1.htm">
Здесь мы ссылаемся на Web-страницу, находящуюся в файле с наименованием
pagel.htm, который размещается в каталоге chap2.
Вообще, об URL следует рассказать несколько подробнее. Это единственное
и абсолютно точное средство идентификации любых ресурсов, размещенных
в Сети. В общем виде его можно написать следующим образом:
http://www.mysite.com/fоlderl/filel.htm
Сам URL можно разделить на три логические части. В самом начале URL мы описываем протокол, по которому производится доступ к интернет-ресурсу. Для Web-страниц используется протокол HTTP, как в нашем примере. Если необходимо установить гиперссылку на некий файл, размещенный на каком-либо FTP-сервере, то это наименование и записывается в начальной части URL. Также существует механизм, позволяющий при нажатии курсором мыши на гиперссылку, активировать почтовый клиент, установленный пользователем в системе по умолчанию, и запускать режим написания письма, одновременно указывая адрес получателя. Для этого используется гиперссылка следующего вида:
<а href="mailto://address@host.com">
Как видно, в качестве обозначения протокола используется ключевое поле
maiito, а после двоеточия и пары слэшей, которые
всегда отделяют наименование протокола от основной части адреса, записывается
адрес электронной почты, на который будет отсылаться написанное пользователем
электронное письмо.
Вторая часть URL описывает сам адрес ресурса. Для Web-страницы это доменное
имя сайта. Обычно применяется доменное имя второго или третьего уровня.
Доменные имена первого уровня записываются в самом конце доменного имени.
Внутри каждого домена первого уровня контролирующими организациями выделяются
доменные имена второго уровня. А владельцы доменных имен второго уровня
самостоятельно создают доменные имена третьего уровня. Так, практически,
каждый владелец доменного имени второго уровня выделяет себе доменное
имя третьего уровня WWW.
А третья часть URL представляет собой путь к конкретному файлу во внутреннем
файловом пространстве Web-сервера. Здесь необходимо сделать маленькое
отступление, разъясняющее механизм действия Web-серверов.
Для того, чтобы любой удаленный пользователь мог получить доступ к какому-либо
Web-сайту, представляющему собой, как известно, некую коллекцию отдельных
Web-страниц и специализированных выполняемых приложений — скриптов, необходимо,
чтобы все эти Web-страницы находились на отдельном компьютере, на котором
действует специализированное приложение, называемое Web-сервером. В обязанности
подобного Web-сервера входит получение запросов удаленных пользователей,
обработка этих запросов и передача удаленным пользователям содержимого
Web-страниц по протоколу HTTP. Для Web-сервера на диске компьютера выделяется
отдельный каталог, в котором и размещаются html-файлы, содержащие Web-страницы,
и приложения — скрипты, обеспечивающие интерактивные функции сайта. Естественно,
внутри общего каталога, отведенного для Web-страниц, мы можем создавать
свои структуры папок для более четкого разделения ресурсов сайта. Так
в отдельные папки обычно выделяются графические изображения, используемые
в оформлении Web-страниц, сами Web-страницы группируются в каталогах,
по признаку принадлежности к тому или иному разделу сайта. И полный путь
к некоему html-файлу или иному ресурсу, который используется в оформлении
Web-страниц, и является третьей частью URL. Рассмотрим маленький пример:
http://www.mysite.com/content/about.html
Этот URL указывает на файл с наименованием about.html, который располагается
в директории content, находящейся в файловом пространстве Web-сервера
с доменным именем www.mysite.com. При этом передача пользователю содержимого
искомого файла будет проходить с использованием протокола HTTP.
Впрочем, в поле ввода адреса интернет-ресурса любого браузера можно ввести
только доменное имя сайта, и мы уже получим доступ к основной Web-странице
данного сайта. Дело в том, что если не указывать в поле ввода протокол,
то браузер автоматически использует протокол HTTP. А если не указывать
полное наименование html-файла с Web-страницей, то Web-сервер, принимающий
запрос удаленного пользователя, выдаст главную страницу сайта, называемую
часто домашней страницей, которая обязательно
хранится в файле с наименованием index.html, т. е. каждый сайт обязан
содержать файл с таким наименованием, который и является стартовой страницей
Web-сайта.
Но при этом необходимо осознавать, что если в браузере мы можем позволить
себе написать адрес не полностью, понадеявшись на правильную его интерпретацию
самим браузером, то в гиперссылках мы обязаны писать URL полностью, за
исключением тех случаев, когда документы, на которые указывает гиперссылка,
находятся на том же сайте, что и исходная Web-страница. В подобных случаях
мы можем не указывать доменное имя сайта, ограничившись указанием протокола
и полного наименования, включающего в себя путь в файловой системе Web-сервера,
ресурса, на который указывает гиперссылка.
На самом деле, тег <а> обладает достаточно
большим количеством параметров, которые позволяют задавать самые различные
свойства гиперссылки. По мере изучения материала мы рассмотрим их все.
Гиперссылки принято разделять на глобальные и локальные. Глобальные гиперссылки
указывают на интернет-ресурсы, размещенные вне исходной Web-страницы.
Локальные же ссылки адресуют некоторые ресурсы, расположенные на текущей
странице. Часто этот прием используется если страница содержит достаточно
большой объем информации, который не умещается полностью в окне просмотра.
Например, мы размещаем на Web-странице некую повесть, или текстовый документ,
разбитый на разделы. При этом в начале этого документа мы можем создать
его оглавление, действующее на основе гиперссылок, каждая из которых будет
указывать на какой-либо раздел документа. Тогда пользователь, загрузивший
Web-страницу, сможет перемещаться по документу с использованием этих гиперссылок,
а не только при помощи вертикальной полосы прокрутки, что, несомненно,
облегчает навигацию.
Для того чтобы в документе мы могли использовать локальные гиперссылки,
необходимо сначала пометить те фрагменты документа, на которые они будут
указывать. Например, если мы хотим, чтобы какая-либо локальная гиперссылка
перемещала удаленного пользователя к некоему определенному абзацу, то
в этот абзац мы должны поместить тег <а>
с параметром name. При этом сама гиперссылка будет создаваться с использованием
несколько измененного значения параметра href.
Но проще все это увидеть на примере (рис. 1.16).
Листинг 1.16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Гиперссылки</title>
<body>
<p><a href="#аnсh1">Локальная гиперссылка</а></р>
<р>0бычный текст</р>
<р><а name="anch1">Teкст, на который мы ссылаемся
в начале страницы</ах/р>
</body>
</html>
Легко увидеть из текста листинга, что при ссылке на идентификатор, располагающийся в теле Web-страницы, мы в качестве значения параметра href указываем наименование этого идентификатора со знаком решетки перед ним. Впрочем, подобным образом мы можем использовать гиперссылки не только на фрагменты содержимого исходной Web-страницы, но и на фрагменты иных Web-страниц, помеченные подобным способом. Подобная гиперссылка будет иметь приблизительно следующий вид:
<а href="http://www.mysite.com/doc2.htmfanch3">
To есть, мы совмещаем использование полного URL документа и одновременно указывааем на некий его фрагмент, помеченный как "anchs".
Рис. 1.16. Окно браузера с результатом отображения файла, приведенного в листинге 1.16
Следует отметить, что если текст, на который указывает гиперссылка,
уже отображен в окне просмотра, как это случилось в нашем последнем примере,
то никаких изменений не произойдет. Но стоит лишь изменить размеры окна
просмотра браузера по вертикали так, чтобы скрыть последнюю строку содержимого,
на которую и указывает гиперссылка, и результат ее действия можно будет
наглядно продемонстрировать.
Естественно, все наименования подобных маркеров-закладок, которые определяются
при помощи значения параметра name, должны быть уникальными. При этом
следует учитывать, что HTML не делает различий между заглавными и прописными
символами. Поэтому, если в нашем HTML-документе определены две закладки,
на которые будут впоследствии ссылаться гиперссылки, различающиеся лишь
регистром символов, то для HTML-анализатора, встроенного в браузер, эти
идентификаторы будут считаться одинаковыми, и он не будет обрабатывать
ни один из них.
Впрочем, мы уже знаем, что идентифицировать какой-либо элемент HTML-документа
можно и при помощи параметра id, который может
использоваться в составе любого тега. При этом гиперссылки, указывающие
на фрагменты документов, могут использовать и эти параметры, т. е. для
установки маркера-закладки на какой-либо тег не обязательно использовать
тег <а> с параметром name, достаточно
лишь использовать параметр id.
Значения параметра name и параметра
id являются уникальными идентификаторами элементов HTML-документа.
Поэтому ни одно значение параметра name не должно совпадать ни с одним
значением параметра id.
Но какой вариант следует выбрать для своих Web-страниц, какой именно параметр
стоит использовать? Здесь необходимо осознавать, что, несмотря на то,
что параметр id может служить для выполнения
нескольких действий, таких как идентификация маркера-закладки, создание
уникальных щдентификаторов для выполняемых сценариев DHTML и стилевого
оформления, некоторые устаревшие браузеры могут не воспринимать эти идентификаторы
для ориентирования гиперссылок.
Совместно с тегом <а> может использоваться
параметр title, который поможет идентифицировать гиперссылку для удаленного
пользователя. Значением этого параметра является текстовая строка, которая
будет отображаться виде маленькой подсказки — хинта, когда пользователь
наведет курсор мыши на искомую гиперссыяку. Выглядит объявление подобной
гиперссылки приблизительно следующим образом:
<а href="www.site.com" title="Очень симпатичный сайт">
При помощи параметра hrefiang мы можем указать
язык, на котором написано текстовое содержимое того интернет-ресурса,
на который и указывает данная гиперссылка. В качестве значения параметра
используется одно из стандартных обозначений языка, которые мы рассматривали
в этой главе несколько ранее.
Но одного указания языка, на котором написано текстовое содержимое Web-страницы,
бывает мало. Необходимо указывать еще и применяемую кодировку. И здесь
нам может помочь знакомый уже нам параметр charset, значением которого
является стандартное обозначение кодировки, применяемой для отображения
текстового содержимого того интернет-ресурса, на который указывает искомая
гиперссылка.
При помощи параметра гel мы можем указывать
назначение документа, на который указывает гиперссылка, т. е. значение
этого параметра явно обозначает отношение между исходным документом и
документом, на который мы ссылаемся. Использование данного параметра никак
не влияет на способ отображения гиперссылки или механизм получения ресурса,
но может быть полезным. Если Web-страницы предназначены не только для
просмотра при помощи браузера, но и для обработки некоторыми специализированными
приложениями. Такими, например, как продвинутые поисковые системы, которые
в состоянии правильно распознавать и обрабатывать подобные отношения между
документами, обозначаемые с помощью гиперссылок.
В качестве значения параметра rel применяется
одно из предопределенных ключевых слов, которые мы сейчас рассмотрим.
При использовании этих значений необходимо учитывать, что в данном случае
HTML-анализаторы будут чувствительны к регистру символов, поэтому необходимо
полностью придерживаться того написания, которое приведено в нашем списке.
На самом деле, в HTML присутствует возможность создавать свои значения
для рассматриваемого нами атрибута, но так как для использования этого
параметра в полной мере необходимо использовать специализированные средства
описания этих новых значений и программное обеспечение, нацеленное на
распознавание этих типов ссылок. Так как нас интересуют браузеры, то создание
новых типов ссылок нам ни к чему.
Данная технология на самом деле является паллиативом, который призван
обеспечить хотя бы часть возможностей, предоставляемых новым языком описания
документов в Интернете — XML (extensible Markup Language), который пророчат
на роль преемника и "убийцы" HTML Но пока не существует распространенных
XML-браузеров и приложений, обрабатывающих XML-документы. И еще достаточно
долгое время эта технология не станет общепринятой, а значит, технология
HTML еще имеет полное право на жизнь и будет использоваться в качестве
основы для Web-страниц еще достаточно долго.
Но вернемся к рассмотрению атрибутов тега <а>.
Атрибут rev является противоположностью атрибутов
тега <а>. Если атрибут rel
определяет тип документа, на который указывает гиперссылка, то атрибут
rev определяет тип исходного документа, содержащего гиперссылку. В качестве
значений этого атрибута применяется все тот же набор ключевых слов, который
использовался и для атрибута rel.
При помощи параметра target мы указываем, в
каком фрейме необходимо отобразить документ, на который указывает гиперссылка.
Дело в том, что обычно в одном окне просмотра браузера отображается один
документ. Но в HTML существует возможность поделить окно просмотра на
несколько областей, называемых фреймами, в каждом из которых будет отображаться
свой HTML-документ. Саму технологию использования фреймов мы будем рассматривать
в одном из следующих разделов этой главы, а пока лишь отметим, что параметр
target позволяет явно указывать, в каком фрейме
необходимо отобразить Web-страницу. Установка гиперссылки с использованием
этого параметра будет выглядеть приблизительно следующим образом:
<а href="http://www.mysite.com/docl.html" target="_top">
Подобная гиперссылка заставит браузер загрузить Web-страницу, URL которой
указан в качестве значения параметра href, в
верхний фрейм, имя которого указано в параметре target.
В качестве значения последнего параметра используются ключевые слова,
определенные в спецификации HTML. Мы рассмотрим их в разделе, посвященном
фреймам.
Некоторые органы ввода информации и гиперссылки позволяют перемещать фокус
ввода между собой при помощи клавиши табуляции, т. е. одно нажатие этой
клавиши активизирует следующий орган ввода, входящий в общую последовательность.
А порядок перемещения между органами управления, входящими в общую последовательность,
задается при помощи параметра tabindex. В качестве
значения этого параметра используется обычное целое положительное число,
и чем больше это число у какого-либо органа ввода данных или гиперссылки,
тем позже дойдет до него очередь при перемещении фокуса ввода. Естественно,
ни у какой пары элементов оформления Web-страницы значение этого параметра
не должно совпадать, иначе браузер просто не будет включать их в последовательность
элементов с перемещением фокуса ввода.
Впрочем, помимо доступа при помощи последовательных нажатий клавиши табуляции,
мы можем использовать параметр access key, в
качестве значения которого указывается символ. Когда пользователь нажимает
на клавишу, которая отвечает за ввод данного символа, фокус ввода автоматически
передается искомой гиперссылке, в объявление которой и встроен параметр
access key, и пользователь может активировать
ее без использования мыши, одним лишь нажатием на клавишу <Enter>.
Рассмотрим маленький пример:
<а href="http://www.mysite.com/docl.html" tabindex="2" accesskey="U">
Этим тегом мы объявляем гиперссылку, доступ к которой можно получить
либо при помощи последовательных нажатий клавиши табуляции, либо нажав
клавишу с символом "U".
В качестве носителя гиперссылки может выступать не только текст, но и
графическое изображение. Для этого необходимо тег, объявляющий вставку
графики в состав содержимого Web-страницы, поместить между тегами <а>
и </а>. Но дело в том, что на графическое
изображение мы можем "навесить" не одну, а несколько гиперссылок,
т. е. в пределах картинки выделяется несколько активных областей, нажатие
мышью на каждую из которых активирует соответствующую гиперссылку. Подобная
технология называется сегментированной графикой.
Для создания подобных графических изображений, связанных с несколькими
гиперссылками, применяются специализированные теги. Сначала объявляются
активные области рисунка, называемые также сегментами. Вся их совокупность
составляет карту активных сегментов рисунка, которой присваивается некое
имя. А затем это имя карты связывается с самим изображением, объявляемым
при помощи тега <img>.
Рассмотрим типичный пример.
Листинг 1.17
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm!4/strict.dtd">
<html>
<head>
<title>Ceгментированная графика</title>
<body>
<р>Это обычный текст.<img srce"redhood.gif" usemap="#mapl"
alt="docs"x/p> <map namee"mapl">
<area href^"1.htm" shape-"rect" coords="l,
1, Ю, 10" alt-"l">.
<area href="2.htm" shape="circle" coords«"20,20,5"
alt-"2">
<area href-"l.htm" shape»"poly" coords-.111,30,10,35,1,
50', 1, 30" alt="3">
</raap>
</body>
</html>
В этом примере видно, что при объявлении рисунка, в тег <img>
мы вставляем параметр usemap, значением которого является наименование
карты активнь!х сегментов рисунка, связанных с гиперссылками. Перед наименованием
используемой карты активных сегментов вставляется символ решетки. Описание
этой карты помещается между тегами <тар>
и </тар>. При этом у открывающего тега
<тар> существует обязательный параметр
name, значением которого является наименование карты.
Карта состоит из описания сегментов. Каждый сегмент описывается при помощи
одного тега <агеа>. Мы можем применять
активные сегменты трех различных форм: прямоугольники, круги и многоугольники.
Форма задается при помощи обязательного параметра shape.
В качестве значения данного параметра мы можем использовать одно из трех
предустановленных значений.
После того, как мы задали тип формы, следует точно определить их размеры
и расположение на нашем графическом изображении. Для этого используется
параметр coords, в качестве значения которого
записывается перечень координат, определяющих активный сегмент. В листинге
1.17 мы можем увидеть, что координаты в общем списке разделяются обычной
запятой. Отсчет координат ведется от верхнего левого угла рисунка, который
имеет координаты (0;0).
Для прямоугольных сегментов задаются координаты верхнего левого и правого
нижнего угла. А для многоугольников последовательно перечисляются координаты
всех точек, в порядке соединения их линиями. Естественно, первая и последняя
пара координат должны совпадать, иначе многоугольник окажется незамкнутым,
и активный сегмент не будет обрабатываться.
В тег <агеа> входит и параметр href,
в качестве значения которого используется URL ресурса, на который указывает
гиперссылка данного сегмента.
Но этот параметр, как ни удивительно, не является обязательным. В том
случае, когда сегмент создается, но не должен соединятся с гиперссылкой,
следует использовать параметр nohref, который не имеет значения.
Но обязательный параметр для тега <агеа>
все-таки есть. Это параметр alt, значением которого
является текстовая строка, являющаяся альтернативным представлением рисунка.
Как мы знаем, данная строка отображается в виде хинта, когда пользователь
наводит курсор мыши на объект. В нашем случае подобным объектом является
активный сегмент, внедренный в графическое изображение.
Также в теге <агеа>, как и в тегах обычных
гиперссылок, используются параметры tabindex
и access key, которые позволяют активизировать
гипер-ссылку без использования мыши, при помощи одной лишь клавиатуры.
Структуру значений этих параметров мы рассмотрели несколько ранее. Немного
отступая от темы, следует заметить, что любой «давильным Web-мастер непременно
должен использовать эти параметры, так как только их применение может
гарантировать активацию гиперссылок без помощи мыши.
Итак, мы разобрались с применением технологии сегментированной графики.
Но о ссылках мы узнали далеко не все. В спецификации HTML определен тег
<link>, который создает не привычную
нам гиперссылку, а некоторую связь между отображаемым документом и каким-либо
дополнительным файлом. Теги <link> могут
размещаться только в разделе заголовка HTML-документа, между тегами <head>
и </head>В качестве примера применения
рассматриваемого нами тега <link> можно
привести следующий фрагмент кода:
Листинг 1.17
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Chapter 2</title>
<link rel="Index" href="/index.html">
<link rel="Next" href="Chapter3.html">
<link rel="Prev" href="Chapterl.html">
</head>
При помощи этого фрагмента мы указываем, что данная Web-страница содержит
вторую главу некоего обширного документа, и при помощи тегов <link>
указываем связи с Web-страницами, содержащими оглавление, а также предыдущую
и следующую главу. Тип документа, на который указывает ссылка, определяется
при помощи знакомого нам параметра гel, Обычный
браузер, конечно, не сможет каким-либо образом обработать и отобразить
подобные ссылки. Они были введены в HTML для создания документов, которые
обрабатывались бы при помощи неких специализированных приложений, позволяющих
на основе данного формата создавать системы документооборота. Но встроенных
скудных возможностей HTML
для создания полноценных систем документооборота было явно недостаточно,
и когда был разработан стандарт XML, разработчики с радостью сменили фаворита.
Так что же, получается, что в обычных Web-страницах тег <iink> абсолютно
бесполезен? На самом деле нет. Только при помощи этого тега мы можем соединять
Web-страницы с внешними стилевыми таблицами, мощнейшим средством управления
отображением документа в браузере. Но о стилевых таблицах мы узнаем чуть
позже, во второй главе. Там же мы и рассмотрим пример применения тега
<link>. А пока нам осталось лишь перечислить
параметры данного тега. Все эти параметры применяются и в тегах <а>
с теми же возможными значениями, поэтому мы не будем детально рассматривать
каждый параметр, а просто вкратце их перечислим:
На данный момент поддерживаются документы, отображаемые на обычных мониторах,
на брайлевских мониторах, рассчитанных на людей с потерей зрения, для
печатающих устройств и устройств речевого воспроизведения.
И, естественно, помимо этих параметров используется набор общих для всех
тегов параметров дополнительной идентификации.
Осталось нам рассмотреть только один тег, применяемый для обслуживания
гиперссылок. Как мы знаем, мы можем не указывать полный URL для документов,
на которые указывают гиперссылки, если этот документ находится на том
же Web-сайте, что и исходная Web-страница. Но оказывается, мы можем точно
так же поступать и с гиперссылками на Web-страницы, входящими в состав
иных сайтов.
При помощи тега <base> мы задаем основание
для гиперссылок с укороченными значениями параметра href.
Попробуем продемонстрировать действие этого механизма на простом и наглядном
примере:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Web-Cтраница</title>
<base href="http://www.mysite.com/tour.html"> </head>
<body>
<Р>Текст<А href="/cages/birds.gif">Ссылка</А>
</body>
</html>
В качестве значения обязательного параметра href тега <base>
мы задаем документ, являющийся основой для содержимого Web-страниц
нашего сайта. И теперь, если в теле нашего HTML-документа мы используем
гиперссылку с укороченным URL, то в качестве доменного имени для этого
URL будет использоваться не имя исходного сайта, а того, который указан
в теге <base>. Таким образом, в примере
гиперссылка указывает на документ c URL www.mysite.com/cages/birds.gif.
Следует уточнить, что тег <base>
размещается в заголовке документа между тегами <head>
и </head>.
И это все, что мы можем рассказать о применении гиперссылок в HTML.