Служба www своей популярностью, в большой степени, обязана механизму гипертекстовых ссылок. Одно нажатие на ссылку может перенести пользователя к другому документу или файлу, который может находиться хоть на другом конце Земли.

В этой статье о ссылках подробно.

Эта статья — продолжение цикла статей о началах изучения html. Она посвящена ссылкам.

Служба www своей популярностью, в большой степени, обязана механизму гипертекстовых ссылок. Одно нажатие на ссылку может перенести пользователя к другому документу или файлу, который может находиться хоть на другом конце Земли.

В этой статье я рассмотрю этот элемент гипертекстовой разметки подробно.

Ссылки

Ссылки были и являются основой сегодняшнего Интернета. Именно благодаря ссылкам, служба www получила такую популярность, как сейчас, и похоронила такую службу, как gopher. Что же такое ссылка? Это, по сути, указатель на документ. Когда пользователь нажимает на ссылку, браузер формирует запрос какому-то серверу (какому — указано в коде ссылки), а потом получает необходимый документ.

Итак, пример кода ссылки:

<a href="http://dayte2.com/">Главная</a>

Посмотрим. Как видно, мы имеем дело с тегом <a></a>, который является контейнерным. Для этого тега определен атрибут href, значение которого содержит адрес документа, который будет запошен, при нажатии на ссылку. В тег заключен текст, который будет отображаться на экране браузера. По умолчанию, ссылки оформляются синим цветом и подчеркиванием.

Адрес, задаваемый в качестве значения атрибута href, не обязательно должен быть полным. Если требуемый документ находится на том же домене, что и документ, содержащий код ссылки, то можно писать относительный URL. Например, если мы находимся на документе http://dayte2.com, и хотим попасть на страницу error.html, на том же домене, то мы можем написать одну из двух ссылок:

<a href="http://dayte2.com/error.html">Ошибка</a>
<a href="/error.html">Ошибка</a>

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

Некоторые думают, что атрибут href — обязательный атрибут для ссылки. На самом деле, это не так. Но большинство ссылок снабжено этим атрибутом. О ссылках без этого атрибута поговорим ниже. Есть и еще атрибуты, которые часто можно встретить в коде ссылок. Рассмотрим более полный код ссылки.

<a href="http://google.ru" target="_self" title="Goooogle it!">поисковая система</a>

В этом примере мы создали ссылку на сайт компании Google. На экране эта ссылка будет выглядеть так: поисковая система. Что же обозначают новые атрибуты target и title?

Атрибут target — укажи цель.

Атрибут target, как можно понять из названия, определяет «цель» ссылки. Он может принимать любые значения, но есть и несколько зарезервированных значений. При нажатии на ссылку с атрибутом target="main", браузер запросит документ, указанный в атрибуте href, у сервера. После того, как документ будет получен и интерпретирован, браузер начнет искать фрейм с именем "main" (о фреймах подробно мы поговорим позднее. Скажу лишь, что это «окно в окне»). Если фрейм с таким именем найден, то документ будет загружен в него. Если нет — браузер создаст новое окно (или вкладку — зависит от браузера и его настроек), с именем "main" и загрузит в него полученный документ. В следующий раз, если мы не будем закрывать новое окно и нажмем другую ссылку с target="main", новый документ загрузится в поименованное окно.

Атрибут target позволяет не только указывать конкретный, именованый фрейм или окно, в которые следует загрузить документ. Он имеет закрепленные значения, которые имеют особый смысл. Вот они:

• _self
• _parent
• _blank

target="_self" обозначает, что документ должен загрузиться в то окно, где была нажата ссылка. Если атрибут target не указан вовсе, нажатие на ссылку приведет к такому же эффекту, поэтому это значение можно встретить редко.

target="_parent" выводит загруженный документ в окно, родительское к тому, в котором нажали кнопку. В обычных условиях, это не приведет ни к чему. Эффект будет получен, если одно окно содержится в другом (фреймы), либо окно было вызвано другим.

target="_blank" создает новое безымянное окно и выводит документ в него. Это значение атрибута target встречается довольно часто, что не очень хорошо. Дело в том, что чаще всего, появление нового окна браузера — неожиданность для пользователя. К тому же, это чаще всего неудобно. Поэтому двести тысяч раз подумайте, прежде чем применять этот атрибут. Если есть хоть доля вероятности, что без него можно обойтись — не ставьте его.

Вроде, с этим разобрались. Едем дальше.

Атрибут title. Всплывающая подсказка.

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

Замечу, что атрибут title можно ставить во всех разумных местах кода, а не только на ссылках. Его можно присвоить абзацу, блоку, span-у, кнопке, заголовку изображению. Но не стоит использовать его слишком часто. Зачем делать всплывающую подсказку для абзаца?

Якоря. Внутристраничные ссылки.

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

Для того, чтобы указать место, в которое должен «приехать» экран, нужно использовать тот же тег <a></a>, но немного по-другому. Вот так:

<a name="part1">Часть первая</a>

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

Чтобы сослаться на этот якорь, нужно создать ссылку вида:

<a href="#part1">Часть первая</a>

Теперь, если мы нажмем на вторую ссылку, экран перескочит на то место, где мы поставили якорь. По возможности, якорь окажется в самом верху экрана. Если задать ссылку, ссылающуюся на безымянный якорь (href="#"), то экран перейдет в самый верх страницы.

Все перемещения экрана происходят без перезагрузки страницы. Это очень удобно иногда. Скажем, в больших текстах рекомендуется иногда ставить ссылки типа «перейти в верх страницы»

Итог

Я рассмотрел во всех подробностях объект ссылки в html. Многие веб-мастера забывают про некоторые возможности (например, про именованные окна или якоря), или используют их не по назначению (например, часто открывают ссылки в новом окне). Я надеюсь, что прочитав эту статью, вы будете правильно использовать их силу.

• С чего начать изучение html?
• Основы html. Общие правила. Блочные и строчные элементы.
• Основы html 2. Абзацы, списки, заголовки.
• Основы html 3. Таблицы.
• Основы html 4. Ссылки.
• Основы html 5. Формы.
• Основы html 6. Формы (продолжение).
• Основы html 7. textarea.

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