Гипертекстовые ссылки от А до Я |
|
|
Рекомендуем сначала ознакомиться со
статьей "Что такое URL?", поскольку в данной статье мы будет
опираться на некоторые моменты, которые были уже описаны в предыдущей статье.
|
Гипертекстовые ссылки являются ключевым
компонентом, делающим World Wide Web (WWW) привлекательным для пользователей.
Используя гипертекстовые ссылки (далее мы будем говорить просто ссылки), вы
делаете набор web-документов связанным и структурированным, что позволяет
пользователю получать необходимую ему информацию максимально быстро и удобно:
переход с одного документа к другому осуществляется при помощи одного клика.
Ссылки имеют стандартный формат, что позволяет браузеру
интерпретировать их и выполнять необходимые действия в зависимости от типа
ссылки. Ссылки могут указывать на другой документ, специальное место данного
документа или выполнять другие функции: например, запрашивать файл по
FTP-протоколу для отображения его браузером. URL может указывать на
web-страницу по абсолютному или относительному адресу (что, почти всегда,
используется при организации ссылок на другие web-страницы в пределах одного
сайта).
Замечание: Вы можете
использовать ссылки как для перемещения по одному документу, так и для
перемещения от одного документа к другому. При перемещении внутри документа,
если нажать на клавишу Back, то Вы вернетесь на предыдущую часть документа.
Создание ссылок в HTML-документе
Синтаксис создания внешних ссылок на URL в языке HTML следующий:
<a
href="URL" target="цель"
title="подсказка">текст ссылки</a>
Тег <a> вместе с </a> образуют, так называемый анкор
(якорь). Применение анкора без атрибутов (также как и тега font) не имеет
смысла, поэтому разберем подробней возможные атрибуты и их значения:
href - обязательный атрибут
для создания внешних ссылок, со значением равным URL-адресу необходимого
ресурса. В зависимости от значения URL-адреса возможны различные действия при
клике по такой ссылке. URL, не отображается браузером непосредственно в тексте
web-странички (его можно посмотреть в строке статуса при наведенной мышки на
ссылку), а используется для выполнения предписанных действий при щелчке мыши на
ссылке.
target - необязательный
атрибут, который определяет в каком окне (или фрейме) браузера следует
отображать результат перехода по ссылке. Возможные значения атрибута:
_blank - результат перехода будет отображен в новом окне браузера;
_self - результат перехода - в окне, содержащем данную ссылку;
_parent - результат перехода - в окне, являющимся родительским по
отношению к текущему, т.е. непосредственным владельцем набора фреймов;
_top - результат перехода - на всем пространстве окна браузера (если
до этого существовало разбиение на фреймы, то оно исчезнет);
имя фрейма - результат перехода - во фрейме (окне) с указанным именем,
если такого фрейма не существует, то будет создано новое окно с таким именем;
Если значение этого атрибута для вашей ссылке равно _self (а так и должно быть
в большинстве используемых ссылок), то использовать атрибут target вообще не
имеет смысла, так как при его отсутствии подразумевается, что
target="_self".
Значения _parent, _top и имя фрейма используются, по большей части, для
организации навигации на сайтах, использующих фреймовую структуру.
title - атрибут,
определяющий своим текстовым значением подсказку (текст, обычно, на кремовом
фоне), которая будет появляться при задержке курсора мыши над ссылкой.
Заметьте, что значения этого атрибута должно быть обязательно заключено в
двойные кавычки.
текст
ссылки
- это непосредственно текст, который будет отображаться браузером как
гиперссылка, то есть этот текст подсвечивается специальным образом. Если Вы
используете в качестве гиперссылки изображение, то вместо текста ссылки должен
находиться html-код, отвечающий за вставку в документ изображения.
Замечание: если в качестве
ссылки используется изображение, то какой атрибут мы должны использовать, чтобы
создать подсказку: title (в якоре) или alt (в теге img)? В этом случае, как
правило, использовался 2 вариант, позволяющий и подсказку создать, и текст
отобразить при невозможности загрузить картинку. Неясность в этом вопросе
возникла с появлением Netscape 6. Он больше не отображает значение атрибута alt
над картинкой, если она успешно загружена, но отображает значение атрибута
title. Поэтому для Netscape 6 необходимо одновременное использование 2-ух
атрибутов; при одновременном указании 2-ух атрибутов в IE больший приоритет
имеет атрибут alt, значение которого он и отображает.
Пример:
<a href="http://webholm.ru"
target="_blank" title="Холм Web-мастера">Наш любимый
сайт</a>
Результат:
Наш любимый сайт
Ссылки в пределах одного документа
Вы можете создавать ссылки для навигации в пределах одного
документа, то есть создавать ссылки, которые будут осуществлять переход на
определенный фрагмент документа. Это позволяет быстро переходить от раздела к
разделу внутри документа, не используя скроллирование экрана. Как только вы
щелкнете на такой ссылке, браузер переместит вас на указанный раздел документа.
Для создания такой ссылки необходимо:
- определить место куда, необходимо осуществить переход, отметив его
специальным образом:
<a
name="name_of_anchor">Текст</a>
Здесь используется новый атрибут анкора - name. Он определяет
уникальное имя для данной закладки. Имя может состоять из английских букв и
цифр и знаков "_". Имя должно быть уникальным в пределах данного
документа.
Текст - это текст,
который после перехода окажется в первой строчке окна браузера, если Вы
создаете ссылки на разделы, то здесь может находиться название раздела или
какой то другой объект. Это значение можно вообще не указывать, главное, чтобы
анкор имел закрывающийся элемент.
- затем для перехода на данную закладку создается ссылка вида:
<a
href="#name_of_anchor">текст ссылки</a>
Эта ссылка, во всем похожа на внешние ссылки, единственное, что
значение атрибута URL немного не стандартно. Здесь при необходимости Вы можете
также использовать атрибуты target и title.
Замечание: кроме того, Вы
можете создавать ссылки на какой то раздел не только текущего, но и другого
документа. В этом случае в другом документе должны быть определены
соответствующие закладки, а Вы, создавая ссылку на этот документ, обязаны
дополнить URL-адрес символом # и именем закладки.
Например:
<a
href="http://www.site.ru/book.htm#razdel1"
target="_blank">Интересная книга (первый раздел)</a>
Но такого типа ссылки имеют небольшой недостаток: при переходе
сначала начинает загружаться сам документ, а затем, когда погрузятся данные,
содержащие закладку, осуществится переход к ней.
Пример:
<a
href="#make_links" title="В начало раздела Создание ссылок в
HTML документе">Создание ссылок в HTML документе (начало)</a>
Результат:
Создание ссылок в HTML документе (начало)
Когда Вы щелкните на эту ссылку, то попадете в начало раздела Создание ссылок в
HTML документе, поскольку там заранее была определена закладка, следующим
образом:
<a
name="#make_links">Создание ссылок в HTML документе</a>
Ссылки для открытия окна почтовой программы
Каким же образом создаются ссылки, которые при клике открывают окно почтовой
программы с уже заполненными поле "Кому", а иногда и с уже написанным
текстом в поле "Тема" и непосредственно в самом письме?
Для создания обычной ссылки на ваш e-mail, по нажатии на
которую открывается окно почтовой программы (например, Outlook Express) с уже
подставленным вашим e-mail адресом, необходимо использовать конструкцию:
<a
href="mailto:ваш e-mail">название ссылки на ваш e-mail</a>
В этой конструкции Вы можете использовать атрибут title, а
использование атрибута target вообще не рекомендуется. Это замечание также
относится ко всем следующим примерам.
Если вы хотите, чтобы кроме вашего e-mail адреса было уже
заполнено поле "Тема" (Subject), то используйте такой вариант:
<a
href="mailto:ваш e-mail?subject=Тема письма">название ссылки на
ваш e-mail</a>
Если вы хотите, чтобы кроме вашего e-mail адреса и темы
письма, был какой то текст набран в самом письме, то добавьте еще один параметр
так, как показано ниже:
<a
href="mailto:ваш e-mail?subject=Тема письма&body=Здравствуйте">название
ссылки на ваш e-mail</a>
Пример:
<a
href="mailto:webmaster@webholm.ru?subject=Вопрос
web-мастеру&body=Здравствуйте web-мастер">Написать письмо
web-мастеру</a>
Результат:
Написать письмо web-мастеру
Теперь, мы думаем, что Вы знаете о гиперссылках достаточно.