НОУ ИНТУИТ | Введение в стандарты Web. Лекция 18: Ссылки HTML

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Твой путь к знаниям!

Опубликован: 28.11.2008 | Уровень: для всех | Доступ: свободно

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

Введение

В этом курсе мы узнаем все об одном из наиболее значительных изобретений в истории Web — ссылках. Ссылки позволяют читателю документа переходить по ним к другому документу и перемещаться с сервера на сервер, не создавая новое соединение. Много изменений произошло с тех пор, как они впервые были изобретены, но одно остается неизменным: ссылки являются очень важной частью использования Web, и можно облегчить или затруднить жизнь посетителям Web-сайта, в зависимости от того, как они используются.

После изучения этой лекции вы узнаете, как создавать ссылки, которые легко понять и использовать в любой рабочей среде. Более того, вы узнаете, как ссылки влияют на вашу популярность в поисковых системах, и получите несколько советов, как лучше сформулировать ссылки. Как обычно, имеется дополнительный zip-файл (http://dev.opera.com/articles/view/18-html-links-let-s-build-a-web/links_code.zip), который содержит несколько файлов, которые используются во время изложения материала. Лекция имеет следующую структуру:

Что такое ссылки?
Анатомия анкерной ссылки
Ссылка или цель? Атрибуты id и href
Не оставляйте никаких двусмысленностей относительно объекта ссылки
- Предоставление дополнительной информации с помощью атрибута title
- Соединение с ресурсами, отличными от HTML - не заставляйте людей гадать
- Внешние и внутренние ссылки
Фреймы и всплывающие окна - скажите просто нет
Преимущества исходящих и входящих ссылок
Формулировка ссылок
Стилевое оформление ссылки
Заключение
Контрольные вопросы

Что такое ссылки?

Ссылки являются частью Web-сайта (созданного обычно с помощью HTML, но не всегда), которые указывают на другие ресурсы — другие документы HTML, текстовые файлы, файлы PDF, и т.д. Существуют ссылки, по которым браузер должен переходить автоматически, созданные с помощью элементов link (вы уже встречали некоторые из них в предыдущих лекциях — они используются для импорта файлов CSS в документ HTML), и существуют также ссылки, которые пользователь не обязан активировать. Они называются анкерами, и их можно добавлять в документ с помощью элемента a.

Анатомия анкерной ссылки

Любой строковый элемент в документе можно превратить в анкерную ссылку, добавляя вокруг него элемент a. Например, в следующем документе HTML текст Yahoo Developer Network превращен в ссылку (linkexample.html).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Link Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>A link to the YDN</h1>
  <p><a href="http://developer.yahoo.com">Yahoo Developer Network</a></p>
</body>
</html>

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

Анкер имеет несколько атрибутов, которые можно использовать:

href - ресурс, на который указывает анкер (внешний файл или ID анкера ).
id - ID анкера, если анкер является целью, а не ссылкой.
title - дополнительная информация о внешнем ресурсе.

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

Ссылка или цель? Атрибуты id и href

Элемент a может играть несколько ролей в зависимости от заданных атрибутов. Наиболее часто используется атрибут href , который определяет ресурс, на который указывает ссылка. Этот атрибут может содержать различные значения:

URL, который может задаваться в той же папке (help.html), относительно текущей папки (например, "../../help/help.html" ), абсолютно, относительно корня сервера (например, "/help/help.html" ) или вообще на другом сервере (например, "http://wait-till-i.com", или "ftp://ftp.opera.com/", или "http://developer.yahoo.com/yui" ).
Идентификатор фрагмента или имя анкера с предшествующей решеткой (например, "#menu" ). Это является указателем на цель внутри того же самого документа.
Смесь обоих - можно соединиться прямо с разделом другого документа, указывая атрибут href с URL, за которым следует идентификатор фрагмента (например, "http://developer.yahoo.com/yui/#cheatsheets" ).

Любое из этих значений делает элемент a ссылкой, так как он указывает куда-то в другое место. С другой стороны атрибут id сделает его на странице анкером — позицией, на которую указывает другая ссылка. Это создает небольшую путаницу, так как в обоих случаях используется элемент анкер ( a ). Чтобы легче запомнить, представляйте это следующим образом: атрибут id делает ссылку анкером, и можно использовать его для соединения с определенными разделами документа. Следующий код HTML содержит примеры всех различных типов ссылок (linkexamples.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Different Link Example</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Different Link examples</h1>

  <h2>Example of in-page navigation with fragment identifiers, links and anchors</h2>
  <div id="nav">
    <ul id="toc">
      <li><a href="#sec1">Section One</a></li>
      <li><a href="#sec2">Section Two</a></li>
      <li><a href="#sec3">Section Three</a></li>
      <li><a href="#sec4">Section Four</a></li>
      <li><a href="#sec5">Section Five</a></li>
    </ul>
  </div>  
    
  <div id="content">
    <div>
      <h2><a id="sec1">Section #1</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec2">Section #2</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec3">Section #3</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec4">Section #4</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
    <div>
      <h2><a id="sec5">Section #5</a></h2>
      <p><a href="#toc">Back to menu</a></p>
    </div>
  </div>

  <h2>Some other link examples</h2>
  <ul>
    <li><a href="http://developer.yahoo.com">Yahoo Developer Network</a></li>
    <li><a href="http://dev.opera.com/articles/view/the-freelancing-business-part-1-pricing/#marketing">Tips on marketing yourself</a></li>
    <li><a href="ftp://get.opera.com/pub/opera/win/">Download different Opera versions</a></li>
    <li><a href="http://farm1.static.flickr.com/56/188791635_0b8bdd808d.jpg?v=0">Photo of my book</a></li>
  </ul>

</body>
</html>

Листинг 18.a. Примеры всех различных типов ссылок

Откройте этот файл в браузере и поэкспериментируйте с ним. Вы обнаружите, что активация любой из ссылок в первом списке вызывает переход в соответствующий раздел документа. Это связано с тем, что они связаны одним идентификатором фрагмента — первая ссылка в списке, например, имеет атрибут href со значением #sec1, что совпадает со значением ID ссылки в первом элементе h2 контента. Это все, что нужно сделать, чтобы соединить два анкерных элемента в документе — использовать то же самое значение в атрибуте ссылки href с предшествующим символом решетки, если это значение присутствует в атрибуте id. Можно также заметить, что URL в строке адреса в браузере изменился, и показывает теперь в конце идентификатор фрагмента, что означает, что посетители могут сделать закладку для этого раздела или отправить ссылку другому человеку через e-mail, чтобы точно направить их к соответствующему разделу.

Однако, если активировать любую из ссылок "Back to menu", происходит то же самое. Как это возможно? Идентификатором фрагмента может быть любой элемент с атрибутом ID. Повторим вкратце:

анкерные ссылки могут иметь идентификатор фрагмента в качестве значения атрибута href - этот идентификатор фрагмента должен начинаться со знака решетки ( # ).
При активации ссылка выполняет переход к любому элементу HTML с id, имеющим это значение. Значения ID на каждой странице должны быть уникальными.
ID следуют определенным соглашениям об именах. Самое важное, что они должны начинаться с алфавитно-цифрового символа и не должны содержать пробелов.

Это охватывает меню и различные разделы в примере, но как насчет других ссылок? Если проверить их, то можно увидеть, что они указывают на различные цели — одна переходит на другой сайт, другая выводит фотографию, а третья показывает определенный раздел другой Web-страницы (находимую при переходе к указанному ID). Если все это работает, то отлично — но как быть, если вы или ваш браузер не можете понять некоторые из этих ресурсов?

Не оставляйте никаких двусмысленностей относительно объекта ссылки

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

Предоставление дополнительной информации с помощью атрибута title

Как почти для любого другого элемента HTML в элемент a можно добавить атрибут title , чтобы предоставить некоторую дополнительную информацию. Браузеры показывают так называемую всплывающую подсказку, когда посетители проводят курсором своей мыши над ссылкой. Эта всплывающая подсказка сообщает информацию о ссылке. Например, можно дать небольшое введение в содержание и расположение присоединенного по ссылке документа (titleexample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Adding extra information with a title attribute</title>
<link rel="stylesheet" href="linkexamplestyles.css">
</head>
<body>
  <h1>Adding extra information with a title attribute</h1>
  <ul>
    <li>Find more information on the <a title="The Yahoo Developer Network is the main hub 
  for all the developer tools Yahoo offers, including the Yahoo User Interface Library (YUI) 
   and the Design Patterns repository" 
    href="http://developer.yahoo.com">Yahoo Developer Network</a>.</li>
  </ul>

  </body>
</html>

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

Ссылки на ресурсы, отличные от HTML, такие как файлы PDF, изображения, видео, звуковые файлы или загрузки.
Уход с текущего сайта и соединение с другим сервером (внешние и внутренние ссылки).
Соединение с документом, который открывается в другом фрейме или всплывающем окне.

Дальше >>

Введение в стандарты Web

Ссылки HTML - давайте создадим сеть Web!

Введение

Что такое ссылки?

Анатомия анкерной ссылки

Ссылка или цель? Атрибуты id и href

Не оставляйте никаких двусмысленностей относительно объекта ссылки

Предоставление дополнительной информации с помощью атрибута title

Вопросы и ответы

Авторизоваться

Введение в стандарты Web

Ссылки HTML - давайте создадим сеть Web!

Введение

Что такое ссылки?

Анатомия анкерной ссылки

Ссылка или цель? Атрибуты id и href

Не оставляйте никаких двусмысленностей относительно объекта ссылки

Предоставление дополнительной информации с помощью атрибута title

Вопросы и ответы