<а 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.

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

Да, без таких гиперссылок интернет был бы не таким удобным. Нет, вру. Он был бы вообще не удобным в плане навигации. Вы можете представить интернет без них? Я лично нет.

И сегодня мы с вами узнаем, как вставить гиперссылку в html. Но сначала я хотел бы вас спросить: Знаете ли вы, что такое вообще гиперссылка и чем она отличается от обычной ссылки? Тут на самом деле всё просто: ссылка — это простое написание информации ссылающееся на какой-нибудь документ. При этом нажать вы на этот текст не можете (ничего не будет), но зато вы знаете, где искать информацию.

Пример: О том как выделять волосы в фотошопе вы можете узнать по адресу //сайт/adobe-photoshop/kak-vydelit-volosy/

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

О том, как правильно выделять волосы в фотошопе вы можете прочитать в одной из моих .

Ну да ладно. Хорош теории. Теперь перейдем к практике и посмотрим какие и отвечают за все эти дела.

За гиперссылку отвечает парный тег , но сам по себе он ничего из себя не представляет. Он всегда идет в связке с атрибутом. И в данном случае нам нужно постоянно прописывать этот самый href. В значении атрибута мы ставим саму ссылку на желаемый ресурс. А в самом содержимом мы пишем сам текст, который должен стать кликабельным (работать по нажатии). Посмотрите пример и думаю, что вы всё поймете.

Поисковая система Яндекс

Как вы поняли, в этом примере я написал, что при нажатии на кусок текста «Поисковая система Яндекс», человек направится по адресу, написанному в значении атрибута href .

Я думаю, что многие из вас знают, что существуют внутренние и внешние ссылки. Внутренние осуществляются внутри одного каталога, то бишь сайта, а внешние ссылки ведут на какой-то сторонний ресурс. И сейчас я покажу как делать и те, и другие.

Файл в той же папке

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

Файл в другой папке

1. Откройте в Notepad++ файл pushkin.html
2. Теперь найдите слово фото и заключите его в теги<a href> .
3. А теперь внимание! В значении атрибута прописываем путь относительно редактируемого файла, то есть самого pushkin.html. У вас должно будет получиться так:

Что мы сейчас сделали? А сделали мы следующее: так как путь к фотографии лежит в отдельной папке img, которая находится в одной папке с файлом pushkin.html, то в значении атрибута нам приходится сначала написать название папки, а потом через слеш (/) полное название документа (в нашем случае фотографии).

А вот теперь сохраните и запустите файл pushkin.html в браузере. Вы увидите, что слово «Фото» стало выделено синим цветом и стало кликабельным, а это значит, что нажав на эту ссылку мы попадем на файл fofo.jpg, который находится в папке img.

Ну как? Всё понятно? Вы в случае чего спрашивайте, не стесняйтесь.

Внешние переходы

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

Я буду учиться на мастера социальных проектов .

Здесь мы попадаем на конкретную страницу конкретного сайта.

Открытие в новом окне

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

В этом нам поможет атрибут target со значением «_blank» . Тут сложного ничего нет. Вам просто надо будет вставить это внутри открывающего тега после значения атрибута href . Давайте возьмем тот отрывок из файла lukomorye.html, где мы делали ссылку на страницу pushkin.html, только теперь пропишем этот самый атрибут. Выглядеть это должно так:

Из поэмы Руслан и Людмила (Автор - А.С. Пушкин)

Ну тут всё понятно. Теперь при нажатии на содержимое нужная страница откроется в новом окне. Эта вещь очень нужная, так как если ее не прописать, то пользователь просто напросто уйдет с вашей страницы. А так он в любом случае останется на ней, только если сам специально не закроет ее. Попробуйте проделать всё сами, только делайте всё своими ручками прекрасными. Не надо копировать и вставлять.

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

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

С уважением, Дмитрий Костин.