Гиперссылка — что это такое, как сделать ссылку и вставить в HTML код (href, target blank и другие атрибуты тега a). Как вставить гиперссылку в HTML? Создание и использование гиперссылок в HTML Гиперссылка на другую страницу

<а href="http://www.mysite.com/doc2.htm/anch3">

To есть, мы совмещаем использование полного URL документа и одновременно указывааем на некий его фрагмент, помеченный как "anch3".

Рис. 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="Очень симпатичный сайт">

При помощи параметра hreflang мы можем указать язык, на котором написано текстовое содержимое того интернет-ресурса, на который и указывает данная гиперссылка. В качестве значения параметра используется одно из стандартных обозначений языка, которые мы рассматривали в этой главе несколько ранее.
Но одного указания языка, на котором написано текстовое содержимое Web-страницы, бывает мало. Необходимо указывать еще и применяемую кодировку. И здесь нам может помочь знакомый уже нам параметр charset, значением которого является стандартное обозначение кодировки, применяемой для отображения текстового содержимого того интернет-ресурса, на который указывает искомая гиперссылка.

При помощи параметра гel мы можем указывать назначение документа, на который указывает гиперссылка, т. е. значение этого параметра явно обозначает отношение между исходным документом и документом, на который мы ссылаемся. Использование данного параметра никак не влияет на способ отображения гиперссылки или механизм получения ресурса, но может быть полезным. Если Web-страницы предназначены не только для просмотра при помощи браузера, но и для обработки некоторыми специализированными приложениями. Такими, например, как продвинутые поисковые системы, которые в состоянии правильно распознавать и обрабатывать подобные отношения между документами, обозначаемые с помощью гиперссылок.

В качестве значения параметра rel применяется одно из предопределенных ключевых слов, которые мы сейчас рассмотрим.

• Alternate. Значение указывает, что документ является альтернативным представлением исходного документа. Если при этом в гиперссылке используется параметр lang со значением, которое отлично oт языка исходного документа, то подобная гиперссылка обычно рассматривается как ссылка на копию исходного документа на другом языке.
• Stylesheet. Обозначает, что документ, на который указывает гиперссылка, является стилевой таблицей. О механизме применения стилевых таблиц подробно рассказано во второй главе.
• Start. Применяется для обозначения начального, стартового документа некоего множества документов. Применительно к Web-сайту это, очевидно, будет домашняя страница.
• Next. Значение используется, если стартовый документ и документ, на который указывает гиперссылка, входят в некую линейную упорядоченную последовательность документов, и последний является следующим в последовательности по отношению к исходной Web-странице.
• Prev. Значение используется в том же случае, что и предыдущее, но теперь указывает на то, что документ в цепочке является не следующим, а предыдущим, по отношению к стартовому документу.
• index. Используется в гиперссылках, которые указывают на документ, являющийся индексированным содержанием исходной Web-страницы.
• Glossary. Значение указывает, что документ содержит словарь терминов, использующихся в исходном документе.
• copyright. Используется, если документ, на который указывает гиперссылка, содержит уведомление об авторских правах на содержимое исходного документа.
• chapter. Применяется в гиперссылках, указывающих на документы, являющиеся отдельными главами в некоем множестве документов.
• section. Гиперссылка с таким значением параметра rel указывает на документ, который является разделом в общем множестве документов, образующих единое целое содержание.
• subsection. Значение является некоторым продолжением концепции, обозначенной предыдущим рассмотренным нами значением. Оно обозначает, что документ является уже подразделом.
• Appendix. Значение указывает, что документ, на который указывает гиперссылка, является приложением к исходному документу.
• Help. Используется для ссылок на документы, которые предоставляют дополнительную справочную информацию по отношению к содержимому исходного документа.
• Bookmark. Применяется для ссылок на HTML-документы, содержащие ссылки на некоторые выделенные ключевые фрагменты исходного документа.

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

На самом деле, в HTML присутствует возможность создавать свои значения для рассматриваемого нами атрибута, но так как для использования этого параметра в полной мере необходимо использовать специализированные средства описания этих новых значений и программное обеспечение, нацеленное на распознавание этих типов ссылок. Так как нас интересуют браузеры, то создание новых типов ссылок нам ни к чему.

Данная технология на самом деле является паллиативом, который призван обеспечить хотя бы часть возможностей, предоставляемых новым языком описания документов в Интернете - XML (extensible Markup Language), который пророчат на роль преемника и "убийцы" HTML Но пока не существует распространенных XML-браузеров и приложений, обрабатывающих XML-документы. И еще достаточно долгое время эта технология не станет общепринятой, а значит, технология HTML еще имеет полное право на жизнь и будет использоваться в качестве основы для Web-страниц еще достаточно долго.

Но вернемся к рассмотрению атрибутов тега <а>. Атрибут rev является противоположностью атрибута rel. Если атрибут 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, и пользователь может активировать ее без использования мыши, одним лишь нажатием на клавишу . Рассмотрим маленький пример:

<а href="http://www.mysite.com/docl.html" tabindex="2" accesskey="U">

В качестве носителя гиперссылки может выступать не только текст, но и графическое изображение. Для этого необходимо тег, объявляющий вставку графики в состав содержимого Web-страницы, поместить между тегами <а> и . Но дело в том, что на графическое изображение мы можем "навесить" не одну, а несколько гиперссылок, т. е. в пределах картинки выделяется несколько активных областей, нажатие мышью на каждую из которых активирует соответствующую гиперссылку. Подобная технология называется сегментированной графикой.

Для создания подобных графических изображений, связанных с несколькими гиперссылками, применяются специализированные теги. Сначала объявляются активные области рисунка, называемые также сегментами. Вся их совокупность составляет карту активных сегментов рисунка, которой присваивается некое имя. А затем это имя карты связывается с самим изображением, объявляемым при помощи тега . Рассмотрим типичный пример.

Листинг 1.17

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/htm!4/strict.dtd">




<р>Это обычный текст.

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

Карта состоит из описания сегментов. Каждый сегмент описывается при помощи одного тега <агеа>. Мы можем применять активные сегменты трех различных форм: прямоугольники, круги и многоугольники. Форма задается при помощи обязательного параметра shape. В качестве значения данного параметра мы можем использовать одно из трех предустановленных значений.

• Значение rect используется для создания прямоугольных активных областей.
• Значение circle используется для создания кругового сегмента.
• Значение poly позволяет создавать активные сегменты в виде выпуклых многоугольников.

После того, как мы задали тип формы, следует точно определить их размеры и расположение на нашем графическом изображении. Для этого используется параметр coords, в качестве значения которого записывается перечень координат, определяющих активный сегмент. В листинге 1.17 мы можем увидеть, что координаты в общем списке разделяются обычной запятой. Отсчет координат ведется от верхнего левого угла рисунка, который имеет координаты (0;0).

Для прямоугольных сегментов задаются координаты верхнего левого и правого нижнего угла. А для многоугольников последовательно перечисляются координаты всех точек, в порядке соединения их линиями. Естественно, первая и последняя пара координат должны совпадать, иначе многоугольник окажется незамкнутым, и активный сегмент не будет обрабатываться.

В тег <аrеа> входит и параметр href, в качестве значения которого используется URL ресурса, на который указывает гиперссылка данного сегмента.
Но этот параметр, как ни удивительно, не является обязательным. В том случае, когда сегмент создается, но не должен соединятся с гиперссылкой, следует использовать параметр nohref, который не имеет значения.
Но обязательный параметр для тега <аrеа> все-таки есть. Это параметр alt, значением которого является текстовая строка, являющаяся альтернативным представлением рисунка. Как мы знаем, данная строка отображается в виде хинта, когда пользователь наводит курсор мыши на объект. В нашем случае подобным объектом является активный сегмент, внедренный в графическое изображение.

Также в теге <агеа>, как и в тегах обычных гиперссылок, используются параметры tabindex и access key, которые позволяют активизировать гиперссылку без использования мыши, при помощи одной лишь клавиатуры. Структуру значений этих параметров мы рассмотрели несколько ранее. Немного отступая от темы, следует заметить, что любой правильным Web-мастер непременно должен использовать эти параметры, так как только их применение может гарантировать активацию гиперссылок без помощи мыши.

Итак, мы разобрались с применением технологии сегментированной графики. Но о ссылках мы узнали далеко не все. В спецификации HTML определен тег , который создает не привычную нам гиперссылку, а некоторую связь между отображаемым документом и каким-либо дополнительным файлом. Теги могут размещаться только в разделе заголовка HTML-документа, между тегами и В качестве примера применения рассматриваемого нами тега можно привести следующий фрагмент кода:

Листинг 1.18

"http://www.w3.org/TR/html4/strict.dtd">

При помощи этого фрагмента мы указываем, что данная Web-страница содержит вторую главу некоего обширного документа, и при помощи тегов указываем связи с Web-страницами, содержащими оглавление, а также предыдущую и следующую главу. Тип документа, на который указывает ссылка, определяется при помощи знакомого нам параметра rel, Обычный браузер, конечно, не сможет каким-либо образом обработать и отобразить подобные ссылки. Они были введены в HTML для создания документов, которые обрабатывались бы при помощи неких специализированных приложений, позволяющих на основе данного формата создавать системы документооборота. Но встроенных скудных возможностей HTML для создания полноценных систем документооборота было явно недостаточно, и когда был разработан стандарт XML, разработчики с радостью сменили фаворита.

Так что же, получается, что в обычных Web-страницах тег абсолютно бесполезен? На самом деле нет. Только при помощи этого тега мы можем соединять Web-страницы с внешними стилевыми таблицами, мощнейшим средством управления отображением документа в браузере. Но о стилевых таблицах мы узнаем чуть позже, во второй главе. Там же мы и рассмотрим пример применения тега . А пока нам осталось лишь перечислить параметры данного тега. Все эти параметры применяются и в тегах <а> с теми же возможными значениями, поэтому мы не будем детально рассматривать каждый параметр, а просто вкратце их перечислим:

• charset - указывает кодировку документа, на который указывает ссылка;
• href - в качестве значения используется URL документа, на который указывает ссылка;
• hreflang - значением является кодовое обозначение языка, на котором написан связываемый документ;
• type - устанавливает тип документа, на который указывает ссылка;
• rel - задает статус документа, на который указывает ссылка по отношению к исходному документу;
• rev - задает статус исходного документа по отношению к тому, на который указывает данная ссылка;
• media - указывает тип устройства, на котором будет отображаться документ, на который указывает ссылка.

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

Осталось нам рассмотреть только один тег, применяемый для обслуживания гиперссылок. Как мы знаем, мы можем не указывать полный URL для документов, на которые указывают гиперссылки, если этот документ находится на том же Web-сайте, что и исходная Web-страница. Но оказывается, мы можем точно так же поступать и с гиперссылками на Web-страницы, входящими в состав иных сайтов.

При помощи тега мы задаем основание для гиперссылок с укороченными значениями параметра href. Попробуем продемонстрировать действие этого механизма на простом и наглядном примере:

"http://www.w3.org/TR/html4/strict.dtd">



<Р>Текст<А href="/pages/birds.gif">Ссылка

В качестве значения обязательного параметра href тега мы задаем документ, являющийся основой для содержимого Web-страниц нашего сайта. И теперь, если в теле нашего HTML-документа мы используем гиперссылку с укороченным URL, то в качестве доменного имени для этого URL будет использоваться не имя исходного сайта, а того, который указан в теге . Таким образом, в примере гиперссылка указывает на документ

c URL www.mysite.com/pages/birds.gif.

Следует уточнить, что тег размещается в заголовке документа между тегами и .

И это все, что мы можем рассказать о применении гиперссылок в HTML.

Гиперссылки придуманы для того, чтобы связывать документы в сети между собой и если у вас сайт состоит не из одной страницы, а из нескольких, то связать их между собой можно только создав гиперссылки. Давайте разберемся непосредственно на примере как это выглядит.

Создание простой гиперссылки

Перейти на другую страницу

Здесь все просто, для создания гиперссылки мы используем тег где href=”” это адрес страницы, на которую будет осуществлен переход, в нашем случае эта страница расположена в той же директории. Вы так же можете вставлять сюда адрес типа href=”http://site.ru/page.html“ или же это может быть ссылка на архив который расположен в другой папке на вашем сайте href=”arj/arhiv.zip” или же на любой другой документ, что собственно без разницы. Так же обязательным атрибутом любой гиперссылки является title это описание ссылки, это очень важный элемент в поисковой оптимизации и здесь вы прописываете ключевые слова той страницы или документа, на который ссылаетесь. Текст который расположен между тегом называется анкором, и так же является очень важным.

По сути здесь все просто, я поместил тег изображения между открытием и закрытием тега гиперссылки , но я опять таки не просто вставил два изображения, к одному я присвоил класс img в котором обнулил рамку вокруг изображения, так как когда оно становится гиперссылкой она появляется, но не во всех браузерах, например IE вы увидите, а в Google Chrome нет.

< /a>

Раздел….< /a>

Тег может быть использован двумя способами:

Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга . Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.