Ссылки в HTML
В этой главе:
Как уже отмечалось ранее, ссылки – это основа гипертекста. Именно наличием ссылок HTML отличается от иных языков разметки, например, от PostScript. Ссылки состоят из двух частей – вызывающей (источника) и направления, или места назначения. Таковым может быть другой гипертекстовый документ, графический файл, архив, либо какой-либо элемент внутри гипертекстового документа.
В языке HTML для создания различных типов ссылок используются элементы A, LINK и BASE.
Элемент A
Уже знакомый нам по первой части книги элемент A, или якорь, служит для создания ссылок. В зависимости от того, с каким атрибутом этот элемент используется, он будет являться либо источником, либо местом назначения:
- Если указан атрибут HREF, то элемент A является источником, или, как это чаще называют, самой ссылкой.
- Если указан атрибут NAME, то элемент A является назначением для произвольного числа ссылок.
Пример:
<a href="#place1">Перейти дальше</a>
<a name="place1"></a>Дальше находится здесь!
<a href="http://www.snkey.net/index.html">SNK Software</a>
В первой строке мы создали ссылку на часть документа, текст которой будет выглядеть как «Перейти дальше», во второй – метку, на которую ссылается первая ссылка, а в третьей – ссылку на другой документ. Можно так же комбинировать подход, создавая, например, ссылку на определенную часть другого документа:
<a href="another_doc.html#some_place">Часть в другом документе</a>
Кроме того, ссылка может быть и меткой одновременно:
<a href="#email">Мои координаты</a>
...
<a href="mailto:serg@snkey.net" name="email">Пишите!</a>
Примеры подобных простых ссылок вы увидите в файлах links1.html и links2.html из каталога Links. А простыми они являются потому, что помимо рассмотренных двух основных атрибутов, а также стандартных, вроде STYLE и ID, элемент A располагает целым рядом собственных атрибутов (таблица 2.12).
| Атрибут | Примечание | Описание |
|---|---|---|
| id, class | Общие | Идентификаторы элемента |
| title, style | Общие | Определяет заголовок и стиль элемента |
| name | Отменен в XHTML 1.1 | Задает имя якоря, аналогичен ID по предназначению и используется для обеспечения совместимости |
| href | - | Задает URI, на который указывает ссылка |
| hreflang | - | Определяет язык документа, на который указывает ссылка |
| charset | - | Определяет кодовую страницу документа, указанного в HREF |
| type | - | Указывает браузеру, какого типа документ будет загружен по этой ссылке |
| rel, rev | См. элемент LINK и таблицу 2.14 | Указывает отношение текущего документа к документу, на который ссылается атрибут HREF и наоборот |
| target | - | Указывает имя окна (фрейма), в котором должен быть открыт документ, указанный в HREF |
| tabindex, accesskey | Оба атрибута не поддерживается Netscape 4, а accesskey – и Opera | Определяют порядок следования ссылок (при использовании перехода между ними при помощи клавиатуры) и «горячую клавишу» для быстрого перехода к ссылке соответственно |
| shape, coords | См. элементы AREA и MAP | Используются для определения координат в навигационных изображениях |
| onfocus, onblur | Общие | Определяют действие, которое должно произойти в момент получения и потерю ссылкой фокуса ввода |
| onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Общие | Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя |
Для начала пройдемся по вспомогательным (для браузера) атрибутам. Это HREFLANG, указывающий язык, на котором составлен документ, указанный в HREF, и CHARSET, определяющий кодовую страницу, на которой этот документ написан. При помощи TYPE браузер узнает, какого типа документ предстоит загрузить (к примеру, text/html для обычных HTML-файлов). Атрибуты REL и REV так же на практике используются редко, особенно с элементом A. В то же время они важны для элемента LINK, который будет подробно рассмотрен чуть позже вместе с этими атрибутами. Что касается атрибута TARGET, то он просто незаменим при работе с фреймами. Например, если имеется документ, состоящий из двух фреймов – левого, содержащего оглавление и правого, в который выводятся документы, то ссылки в левом фрейме должны содержать атрибут TARGET с именем правого фрейма в качестве значения. Начнем собственно с контейнера фреймов – ведь именно в нем задаются имена, которые будут использоваться в качестве значений атрибута TARGET (листинг 2.14, файл targets.html).
Листинг 2.14. Фреймы с именами для атрибута TARGET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN">
<html>
<head>
<title>Фреймы и ссылки</title>
</head>
<frameset cols="100,*">
<frame src="toc.html" name="topic" />
<frame src="links1.html" name="work" />
</frameset>
</html>
Как видно, здесь для фреймов заданы имена: topic – для правого, с файлом toc.html, содержащего интересующие нас ссылки с TARGET и work. – для левого, в котором должны будут открываться ссылки. Перейдем к файлу toc.html (листинг 2.15).
Листинг 2.15. Ссылки, использующие атрибут TARGET
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Toc</title>
</head>
<body>
<a href="links1.html" target="work">Ссылка 1</a>
<a href="links2.html" target="work">Ссылка 2</a>
<a href="links1.html" target="topic">Ссылка 3</a>
<a href="links2.html" target="work2">Ссылка 4</a>
</body>
</html>
Как видно, в ссылках присутствует атрибут TARGET с присвоенным значением «work», соответствующему имени правого фрейма. Поэтому, если открыть в браузере файл targets.html и щелкнуть по первой или второй ссылке в левом окне, новый документ будет загружен в правое. Если щелкнуть по третьей, то документ загрузится в левое окно, хотя в данном случае атрибут TARGET можно и не указывать: в типичном случае ссылки всегда открываются в том же окне, где по ним кликнули. Но если вы щелкните по четвертой ссылке, откроется новое окно! Связано это с тем, что фрейма с именем «work2» не существует, и поэтому браузер создаст новое окно, присвоив ему соответствующее имя. Однако если вы просто хотите открыть ссылку в новом окне, то следует использовать специальное значение параметра TARGET, а именно – «_blank». Кроме того, существует еще три специальных значения этого атрибута:
- _self (принято по умолчанию) – открыть в текущем окне (фрейме)
- _parent – открыть в окне, являющемся родительским для данного фрейма
- _top – открыть в полном окне.
Для нашего случая с единственным контейнером фреймов использование _top и _parent равнозначно, однако если бы документ targets.html был загружен внутрь другого контейнера фреймов, то при использовании _parent ссылка открылась бы внутри этого контейнера (вместо targets.html), а укажи мы _top, ссылка открылась бы вместо всех фреймов. В качестве иллюстрации того, как это работает, откройте в браузере файл targets2.html.
Теперь рассмотрим пример с использованием клавиатурной навигации по ссылкам. Так, в обычном случае при нажатии на клавишу Tab в документе, содержащем несколько ссылок, браузер переводит фокус ввода с первой встретившейся ему в тексте документа ссылке к следующей, и так – до конца документа. Чтобы изменить этот порядок, можно использовать атрибут TABINDEX, как это показано на листинге 2.16.
Листинг 2.16. Изменение порядка табуляции
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<title>Ссылки и клавиатура</title>
</head>
<body>
<a href="links1.html" tabindex="1">Ссылка 1</a>
<a href="links2.html" tabindex="3">Ссылка 2</a>
<a href="links3.html" tabindex="2">Ссылка 3</a>
</body>
</html>
Если бы не атрибут TABINDEX, то при нажатии клавиши табуляции в этом документе активной становилась бы сначала 1-я ссылка, затем – 2-я, а потом – 3-я. В данном же случае после первой фокус ввода перескочит сразу на 3-ю и лишь при следующем нажатии попадет на 2-ю. Еще один атрибут, связанный с навигацией на странице при помощи клавиатуры – это ACCESSKEY. С его помощью можно создавать «горячую клавишу» для быстрого перехода к элементу (в нашем случае – к ссылке). Так, если добавить этот атрибут со значениями 1, 2 и 3 для 1-й, 2-й и 3-й ссылок соответственно, то быстро перейти к ним можно будет, нажав на клавиатуре клавишу Alt и одну из этих цифр:
<a href="links1.html" tabindex="1" accesskey="1">Ссылка 1</a>
Для быстрого перехода к этой ссылке достаточно нажать Alt+1 (см. keylinks.html). Чтобы подсказать пользователю, какой символ является «горячим», его обычно выделяют начертанием шрифта или подчеркиванием:
<a href="links1.html" tabindex="1" accesskey="1">Ссылка <b>1</b></a>
К вопросу навигации и задания клавиатурных комбинаций мы еще не раз вернемся (например, при рассмотрении форм HTML), а в завершение знакомства с элементом A обратимся к атрибутам SHAPE и COORDS. Они используются для создания из рисунков «навигационных карт», или, проще говоря – назначения разным областям рисунка ссылок на разные файлы. Эти области могут представлять собой прямоугольники, окружности или произвольные многоугольники. Собственно, за тип области отвечает атрибут SHAPE, принимающий значения rect, corcle и poly. Оставшийся атрибут COORDS назначает координаты (в пикселях) для этих фигур:
<a href="index.html" shape="rect" cords="0,0,80,30">Главная</a>
Здесь мы определили прямоугольную область в 80х30 точек, начинающуюся с правого верхнего угла (0,0), и представляющего ссылку на файл index.html. Следует отметить, что само по себе такое определение не имеет смысла, т.к. использование данных атрибутов допустимо только тогда, когда ссылка являются вложенной в элемент MAP. Поэтому именно в контексте этого элемента мы впоследствии и рассмотрим навигационные карты изображений.
Свойства элемента гиперссылки (тэг A)
Закрывающий тег: требуется.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.
Элемент LINK
Элемент LINK определяет ссылку и отношения документов. В отличие от якоря A, элемент LINK может располагаться только в части заголовка (HEAD) документа. Информация, указанная в элементе LINK, может по-разному обрабатываться браузерами, в зависимости от указанных атрибутов. Например:
<link rel="Index" href="../index.html">
<link href="doc1.html" rev="Prev">
В первой строке указывается, что предметный указатель для группы документов, к которой относится данный документ, находится в файле index.html. Во второй – что предыдущим документом из данной группы документов является файл doc1.html. За эти определения, помимо HREF, отвечают атрибуты REL и REV – для обозначения связанной и обратной ссылок соответственно.
Еще одно применение элемента LINK – для предоставления информации поисковым машинам на различных языках. При этом указывают атрибут HREFLANG, и назначают ему соответствующий язык.
<link type="text/html" rel="Alternate" hreflang="en" href="english.html" />
В этом примере при помощи атрибутов REL, HREFLANG и HREG указан документ на другом языке, а атрибут TYPE подсказывает браузеру, какого типа это будет документ.
Но чаще всего элемент LINK применяется для указания файла таблиц стилей:
<link rel="Stylesheet" href="default.css" type=”text/css” />
Здесь атрибут REL указывает, что ресурс, определенный в HREF – таблица стилей для данного документа, а в атрибуте TYPE, как водится, указан тип документа (в данном случае – текст CSS). Эти и все прочие атрибуты элемента LINK перечислены в таблице 2.13.
| Атрибут | Примечание | Описание |
|---|---|---|
| id, class | Общие | Идентификаторы элемента |
| title, style | Браузерами не используются | Определяет заголовок и стиль элемента |
| href | - | Задает URI, на который указывает ссылка |
| hreflang | - | Определяет язык документа, на который указывает ссылка |
| charset | - | Определяет кодовую страницу документа, указанного в HREF |
| type | - | Указывает браузеру, на документ какого типа ссылается эта ссылка. Список типов (MIME) документов приведен в приложении А |
| rel, rev | См. таблицу 2.14 | Указывает отношение текущего документа к документу, на который ссылается атрибут HREF и наоборот |
| target | - | Указывает имя окна (фрейма), в котором должен быть открыт документ, указанный в HREF |
| media | - | Указывает на то, для какого типа представления следует применить таблицу стилей. Используется только для случая, когда LINK ссылается на таблицу стилей. По умолчанию принимает значение Screen |
| onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup | Общие | Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя |
Теперь давайте разберемся с допустимыми значениями для атрибутов REL и REV. Современные спецификации предусматривают 15 вариантов, все они приведены в таблице 2.14. Следует только отметить, что некоторые из них (например, Stylesheet), могут применяться только в качестве связанной ссылки (REL).
| Значение | Описание |
|---|---|
| Alternate | Задает альтернативный документ, например, составленный на другом языке, либо предназначенный для вывода на другом типе носителя |
| Stylesheet | Ссылается на внешнюю таблицу стилей. Может использоваться вместе с Alternate для задания переключаемых таблиц стилей |
| Start | Указывает на первый документ из группы документов, к которой принадлежит текущий документ |
| Next | Указывает на следующий документ из группы документов, к которой принадлежит текущий документ. На практике это может помочь браузеру загрузить следующий документ предварительно |
| Prev (Previous) | Указывает на предыдущий документ из группы |
| Contents (ToC) | Указывает на документ, являющийся оглавлением для данной группы документов |
| Index | Указывает на документ, являющийся содержанием (указателем) для данной группы документов |
| Glossary | Указывает на документ, являющийся словарем терминов для данной группы документов |
| Copyright | Указывает на сноску об авторских правах на данный документ |
| Chapter | Указывает на документ, являющийся главой для данной группы документов |
| Section | Указывает на документ, являющийся разделом для данной группы документов |
| Subsection | Указывает на документ, являющийся подразделом для данной группы документов |
| Appendix | Указывает на документ, являющийся приложением для данной группы документов |
| Help | Указывает на документ, предоставляющий справочную информацию по данному документу |
| Bookmark | Указывает на закладку. Закладка является входной точкой в каком-либо внешнем документе (т.е. подобна обычным закладкам, которые вы делаете, читая книги). При этом атрибут TITLE может являться, например, названием закладки |
Помимо перечисленных значений, для атрибутов REL и REV можно определять и произвольные. Рассмотрим это все на примере (листинг 2.17, файл rel_rev.html).
Листинг 2.17. Использование LINK
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>LINK</title>
<link rev="test" href="doc1.html" />
<link rel="contents" href="index.html" />
<link rel="alternate" href="english.html" type="text/html" hreflang="en" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<a href="file.html">Просто ссылка</a>
</body>
</html>
Здесь в первой же строке с определением LINK было задано собственное определение для атрибута REV – «test», с обратной ссылкой на файл doc1.html. Соответственно, если мы при этом захотим указать ссылку на этот файл из doc1.html, то в нем надо будет написать:
<link rel="test" href="rel_rev.html" />
Следующая строка определяет связанный файл с содержанием для этого и других документов из этой группы. Затем идет уже рассмотренная ранее ссылка на альтернативный документ, а замыкает группу ссылка на таблицу стилей. Еще одна ссылка, но уже с использованием традиционного якоря (элемента A) имеется в теле документа. Так что если посмотреть на свойства этого документа в каком-либо Mozilla-браузере, то можно будет увидеть все эти ссылки на соответствующей закладке (рис. 2.7).
Рис. 2.7. Информация о ссылках документа в Mozilla Firefox
Видно, что в качестве имен ссылок, определенных при помощи элемента LINK, используется значение атрибута REL или REV, а для якорей – содержание элемента.
К сожалению, с другими браузерами дела пока что обстоят не так хорошо: Opera не распознает элементы LINK в качестве ссылок и не показывает их в списке ссылок документа, а в MSIE вообще не предусмотрено подобного интерфейса. В то же время все браузеры прекрасно распознают внедрение таблиц стилей при помощи LINK, а Opera и Mozilla позволяют также пользователю переключаться между стилями:
<link title="Стиль 1" rel="Stylesheet" rev="alternate" href="style1.css" type="text/css" />
<link title="Стиль 2" rel="Stylesheet" rev="alternate" href="style2.css" type="text/css" />
При просмотре документа с таким внедрением стилей, в меню браузера Вид ? Стиль (или View ? Use Style в Netscape) будут отображены пункты «Стиль 1» и «Стиль 2», и выбор одного из них приведет к загрузке соответствующего файла стилей.
Кроме того, определенная при помощи LINK информация может пригодиться поисковым машинам:
<link rel="index" href="cover.html" />
Таким образом, если поисковая машина попадет на такую страницу, то она уж точно не пропустит и все остальные благодаря ссылке на основной документ группы.
С таблицами стилей связан еще один атрибут – MEDIA, отвечающий за то, к какому типу представления будет применен описываемый стиль. Помимо определенного по умолчанию значению screen, подразумевающего экран ПК, он может принимать значения tty, tv, projection, handheld, print, braille, aural и all. Подробнее о видах представления будет рассказано в разделе книги, посвященном CSS.
Свойства элемента LINK
Закрывающий тег: только XHTML.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.
Элемент BASE
В языке HTML все ссылки должны быть определены в виде URI. Они бывают как абсолютными, например, http://www.host.ru/mydir/file.html, так и относительными – ../index.html. Элемент BASE позволяет указать базовый URI для всех ссылок в документе. Если при этом в документе вдруг попадется «неправильная» ссылка, то при ее активизации будет загружен документ, указанный в атрибуте HREF элемента BASE. Рассмотрим действие этого элемента на примере (листинг 2.18).
Листинг 2.18. Использование элемента BASE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Испытываем BASE</title>
<base href="http://www.snkey.net/download/" />
</head>
<body>
<a href="games/index.html">Ссылка-1</a>
<a href="../projects/php/index.html">Ссылка-2</a>
<a href="http://www.ya.ru">Ссылка-3</a>
</body>
</html>
Здесь при помощи атрибута HREF элемента BASE задается «точка отсчета» для всех относительных адресов документа, вне зависимости от того, где он находится. Таким образом, адрес первых двух ссылок будут преобразованы таким образом:
http://www.snkey.net/download/games/index.html
http://www.snkey.net/projects/php/index.html
В то же время третья ссылка, URI которой указан полностью, останется без изменений.
Кроме указания базового URI, элемент BASE позволяет определить имя окна для ссылок. Делается это при помощи атрибута TARGET:
<base target="_blank" />
В данном случае все ссылки, за исключением тех, где атрибут TARGET указан явно, будут открываться в новом окне. Если же документ находится во фрейме, то может быть полезным указать имя того фрейма, в котором должны открываться все ссылки. Например, если имеется один фрейм, содержащий оглавление, то вместо того, чтобы в каждой ссылке указывать атрибут TARGET, проще задать этот параметр для всех ссылок сразу, воспользовавшись элементом BASE.
ПРИМЕЧАНИЕ
Элемент BASE всегда должен находиться в самом начале документа, в его заголовке. Если в документе явно отсутствует элемент BASE, то браузер автоматически назначает для него атрибут HREF, равный URI данного документа, и атрибут TARGET, равный _self.
Свойства BASE
Закрывающий тег: только XHTML.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: да (за исключением случая, когда используются 2 элемента: один – с HREF, и второй – с TARGET).
2011-05-26 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !
