Начнем с самых простых — текстовых гиперссылок, которые представляют собой фрагмент текста.
Создать текстовую гиперссылку очень просто. Достаточно найти в блочном элементе (например, абзаце) фрагмент текста, который нужно превратить в гиперссылку, и заключить его в парный тег <A>. Интернет-адрес целевой Web-страницы указывают в атрибуте HREF этого тега.
Гиперссылка (т. е. тег <A>) представляет собой встроенный элемент Web-страницы, т. е. это часть блочного элемента, например, абзаца:
Вот гиперссылка, которая указывает на Web-страницу page125.html, хранящуюся в папке pages, вложенной в корневую папку сайта, на сайте http://www.somesite.ru:
<A HREF="http://www.somesite.ru/pages/page125.html">Страница № 125</A>
А эта гиперссылка указывает на архивный файл archive.zip, хранящийся в той же папке, что и Web-страница, которая в данный момент открыта в Web-обозревателе (текущая Web-страница):
<A HREF="archive.zip">Архив</A>
При щелчке на гиперссылке Web-обозреватель предложит загрузить этот архивный файл и либо открыть его, либо сохранить на диске клиентского компьютера. Пример:
<P><A HREF="22.html">Предыдущая страница</A>,
<A HREF="24.html">следующая страница</A>.</P>
Этот фрагмент HTML-кода создает абзац, содержащий сразу две гиперссылки, которые указывают на разные целевые Web-страницы.
Текст, являющийся гиперссылкой, можно оформлять, используя любые теги, приведенные в главе 3.
Пример:
<A HREF="http://www.somesite.ru/pages/page125.html">Страница
<EM>№ 125</EM></A>
Тег <A> поддерживает необязательный атрибут TARGET. Он задает цель гиперссылки, указывающую, где будет открыта целевая Web-страница. Так, если атрибуту TARGET присвоить значение "_blank", целевая страница будет открыта в новом окне Web- обозревателя.
Например, если мы изменим код первого примера гиперссылки таким образом (исправления выделены полужирным шрифтом):
<A HREF="http://www.somesite.ru/pages/page125.html" TARGET="_blank">Страница № 125</A>
"Страница № 125" будет открыта в новом окне Web-обозревателя.
Чтобы задать обычное поведение гиперссылки (когда целевая Web-страница открывается в том же окне Web-обозревателя), нужно присвоить атрибуту TARGET значение "_self" (это его значение по умолчанию) или вообще убрать данный атрибут из тега <A>.
Имеется также возможность создать гиперссылку, которая никуда не указывает ("пустая" гиперссылка). Для этого достаточно задать в качестве значения атрибута HREF значок # ("решетка")
<A HREF="#">А я никуда не веду!</A>
При щелчке на такой гиперссылке ничего не произойдет.
НА ЗАМЕТКУ
"Пустыми" гиперссылками мы будем активно пользоваться в частях III и IV, когда начнем писать Web-сценарии.
Правила отображения гиперссылок Web-обозревателем:
— обычные гиперссылки выделяются синим цветом;
— гиперссылки, по которым посетитель уже "ходил" (посещенные гиперссылки), выводятся темно-красным цветом;
— гиперссылка, по которой посетитель в данный момент щелкает (активная гиперссылка), выводится ярко-красным цветом;
— текст любых гиперссылок подчеркивается;
— при помещении курсора мыши на гиперссылку Web-обозреватель меняет его форму на "указующий перст".
Таково поведение по умолчанию, которое мы можем изменить, создав соответствующее представление. О том, как это сделать, будет рассказано в части II.
Об интернет-адресах файлов мы говорили еще в главе 1. Однако WWW привносит в них кое-что новое, что нам обязательно нужно знать.
Рассмотрим первый пример гиперссылки из предыдущего раздела. Ее интернет-адрес таков: http://www.somesite.ru/pages/page125.html. Он содержит и интернет- адрес Web-сервера, и путь файла, который нужно получить. Поэтому он называется полным. Полные интернет-адреса используют, если нужно создать гиперссылку, указывающую на файл, в составе другого Web-сайта.
Однако если гиперссылка указывает на файл, входящий в состав того же Web- сайта, что и файл текущей Web-страницы, предпочтительнее сокращенный интернет-адрес, содержащий только имя нужного файла (интернет-адрес Web-сервера и так известен Web-обозревателю).
Существуют два типа сокращенных интернет-адресов. Адреса первого типа задают путь к файлу, который нужно получить (целевому файлу), относительно корневой папки Web-сайта. Они содержат в своем начале символ / (слэш), который и говорит Web-серверу, что путь нужно отсчитывать относительно корневой папки.
НА ЗАМЕТКУ
О корневой папке сайта также было рассказано в главе 1. Вкратце: это особая папка, находящаяся на диске компьютера, на котором хранится Web-сайт и работает Web- сервер; в этой папке должны помещаться все файлы Web-сайта.
Например, интернет-адрес
/page3.html
указывает на файл page3.html, хранящийся в корневой папке Web-сайта. А интернет-адрес
/articles/article1.html
указывает на файл article1.html, хранящийся в папке articles, вложенной в корневую папку Web-сайта.
Такие интернет-адреса называют абсолютными и используют, если нужно создать гиперссылку на файл, хранящийся в "глубине" Web-сайта (скажем, в другой папке, нежели файл текущей Web-страницы).
Сокращенные интернет-адреса второго типа задают путь к целевому файлу относительно файла текущей Web-страницы. Они не содержат в начале символа слэша — и в этом их важное отличие от абсолютных интернет-адресов.
Рассмотрим несколько примеров подобных интернет-адресов. Интернет-адрес
archive.zip
указывает на файл archive.zip, хранящийся в той же папке, что и файл текущей Web-страницы.
Интернет-адрес
chapter3/page1.html
указывает на Web-страницу page1.html, хранящуюся в папке chapter3, вложенной в папку, в которой хранится текущая Web-страница.
Следующий интернет-адрес
../contents.html
указывает на Web-страницу contents.html, хранящуюся в папке, в которую вложена папка, где хранится текущая Web-страница. (Обратим внимание на две точки в начале пути — так обозначается папка предыдущего уровня вложенности.)
Такие интернет-адреса называют относительными. Их применяют, если нужно создать гиперссылку на файл, хранящийся в той же папке, что и текущая Web- страница, одной из вложенных в нее папок или папке предыдущего уровня вложенности.
НА ЗАМЕТКУ
Во многих случаях лучше поэкспериментировать с разными интернет-адресами, чтобы выяснить, какой именно подойдет — абсолютный или относительный.
ВНИМАНИЕ!
В Web-страницах, которые не должны быть опубликованы на Web-серверах, а будут открываться с диска клиентских компьютеров, следует применять только относительные интернет-адреса. Дело в том, что файловая система компьютера не знает, какую папку считать корневой, поэтому не сможет правильно интерпретировать абсолютные интернет-адреса. (Разумеется, гиперссылки, ссылающиеся на другие Web-сайты, должны содержать полные интернет-адреса.)
Разобравшись с гиперссылками и интернет-адресами, свяжем, наконец, наши Web- странички в единый Web-сайт. Чтобы нам было удобнее, создадим в папке, где хранятся все файлы нашего Web-сайта, папку tags. В эту папку перенесем все Web- страницы, описывающие теги HTML (их у нас пока что четыре), и сопутствующие им файлы (их три: изображение, аудио- и видеоролик). Файл index.htm никуда из корневой папки перемещать не будем — ведь он хранит Web-страницу по умолчанию.
Откроем Web-страницу index.htm и найдем в ней HTML-код, формирующий список тегов. Создадим там гиперссылки, указывающие на соответствующие Web-страницы.
Вот HTML-код, создающий гиперссылку, указывающую на Web-страницу с описанием тега <AUDIO>:
<CODE><A HREF="tags/t_audio.htm">AUDIO</A></CODE>
Остальные гиперссылки создаются аналогично.
Перейдя на Web-страницу, описывающую какой-либо тег, посетитель должен иметь возможность вернуться назад — на главную Web-страницу. Конечно, это можно сделать, нажав кнопку возврата назад на панели инструментов Web- обозревателя или клавишу <Backspace> на клавиатуре. Но правила хорошего тона Web-дизайна требуют, чтобы на Web-странице присутствовала соответствующая гиперссылка.
Создадим такую гиперссылку на всех Web-страницах, описывающих теги. Поместим ее в самом конце каждой Web-страницы — обычно она находится именно там. Вот так выглядит формирующий ее HTML-код:
<P><A HREF="../index.htm">На главную Web-страницу</A></P>
Осталось создать на главной Web-странице гиперссылку на Web-страницу Русской Википедии, которая содержит статью, посвященную языку HTML. Вставим ее в конец большой цитаты (листинг 6.1).
Листинг 6.1
<BLOCKQUOTE>
<P>HTML (от англ. HyperText Markup Language — язык разметки гипертекста) — стандартный язык разметки документов во Всемирной паутине. (<A HREF="http://ru.wikipedia.org/wiki/HTML" TARGET="_blank">вся статья</A>)</P>
</BLOCKQUOTE>
Здесь мы указали для тега <A> атрибут TARGET со значением "_blank". И Web-страница с текстом статьи о HTML будет открываться в новом окне Web-обозревателя. Так что посетитель сможет "залезть" в Википедию, не покидая нашего Web-сайта.
HTML позволяет нам создать гиперссылку, указывающую на адрес электронной почты (почтовую гиперссылку). Щелчок на ней запустит программу почтового клиента, установленную в системе по умолчанию. Интернет-адрес такой гиперссылки записывается особым образом.
Пусть мы хотим создать гиперссылку, указывающую на почтовый адрес: user@mailserver.ru
Согласно стандарту HTML, этот почтовый адрес должен быть записан так:
mailto: user@mailserver.ru
причем между двоеточием после mailto и собственно адресом не должно быть пробелов.
Тогда наша почтовая гиперссылка будет выглядеть так:
<A HREF="mailto: user@mailserver.ru">Отправить письмо</A>
В конце главной Web-страницы у нас приведены сведения о правах разработчиков. Давайте превратим слово "читатели" в почтовую гиперссылку. Создающий ее HTML-код будет выглядеть так:
<A HREF="mailto: user@mailserver.ru">читатели</A>
Адрес электронной почты в этой гиперссылки выдуман. Разумеется, вы можете заменить его на реальный.
Язык HTML предлагает нам некоторые дополнительные возможности для создания гиперссылок. Их применяют нечасто, но иногда они полезны.
Прежде всего, мы можем указать для гиперссылки "горячую" клавишу. Если посетитель нажмет эту клавишу, удерживая нажатой клавишу <Alt>, Web-обозреватель выполнит переход по данной гиперссылке.
Для указания "горячей" клавиши предусмотрен необязательный атрибут ACCESSKEY тега <A>. Значение этого атрибута — латинская буква, соответствующая нужной клавише:
<A HREF="http://www.somesite.ru/pages/page125.html" ACCESSKEY="d">Страница № 125</A>
Здесь мы указали для гиперссылки "горячую" клавишу <D>. И, чтобы перейти по ней, посетителю будет достаточно нажать комбинацию клавиш <Alt>+<D>.
На гиперссылках можно щелкать мышью — так поступает большинство пользователей. Но по ним также можно "путешествовать" с помощью клавиатуры. В этом случае говорят о фокусе ввода — признаке, какая гиперссылка будет обрабатывать нажатия клавиш. Гиперссылка, имеющая фокус ввода, выделяется тонкой черной штриховой рамкой.
— Если нажать клавишу <Enter>, Web-обозреватель выполнит переход по гиперссылке, имеющей в данный момент фокус ввода.
— Если нажать клавишу <Tab>, Web-обозреватель перенесет фокус ввода на следующую гиперссылку.
— Если нажать комбинацию клавиш <Shift>+<Tab>, Web-обозреватель перенесет фокус ввода на предыдущую гиперссылку.
Порядок, в котором выполняется перенос фокуса ввода с одной гиперссылки на другую при нажатии клавиш <Tab> или <Shift>+<Tab>, так и называется — порядок обхода. По умолчанию он совпадает с порядком, в котором гиперссылки определены в HTML-коде Web-страницы. Но мы можем указать свой порядок обхода с помощью атрибута TABINDEX тега <A>. Его значение — целое число от –32 767 до
32 767 — номер в порядке обхода.
— Если указан положительный номер, именно он будет определять порядок обхода. Иными словами, сначала фокус ввода получит гиперссылка с номером 1, потом — с номером 2, далее — с номером 3 и т. д.
— Если указан номер, равный нулю, обход будет осуществляться в порядке, в котором гиперссылка определена в HTML-коде Web-страницы. Фактически ноль — значение атрибута тега TABINDEX по умолчанию.
— Если указан отрицательный номер, данная гиперссылка вообще исключается из порядка обхода. До нее невозможно будет добраться с помощью клавиатуры — можно будет только щелкать мышью.
Рассмотрим небольшой пример:
<P><A HREF="page1.htm" TABINDEX="3">Страница 1</A></P>
<P><A HREF="page2.htm" TABINDEX="2">Страница 2</A></P>
<P><A HREF="page3.htm" TABINDEX="1">Страница 3</A></P>
Этот HTML-код создает три гиперссылки с "обратным" порядком обхода. Сначала фокус ввода получит гиперссылка "Страница 3", потом — "Страница 2" и напоследок — "Страница 1".