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

Еще немного об элементе head документа

Показывать лекцию целиком

Введение

В лекции 13 этого курса мы узнали о важных элементах, которые находятся в разделе ), содержащий код использованных примеров. Лекция имеет следующее содержание:

  • Отношения документов - соединение нескольких документов HTML в совокупность
  • Соединение с альтернативными версиями документа
  • Трансляции
  • Каналы
    •
  • Более привлекательные закладки - использование иконок сайта
  • Заключение
  • Контрольные вопросы

    • Отношения документов - соединение нескольких документов HTML в совокупность

    Одним из свойств HTML, которое имеет свои корни в происхождении Web как хранилища документов, является отношение документов. Оно определяет, как документ связан с другими документами, например, является ли он предшественником или последующим документом в логической цепочке, или он является индексом целой последовательности документов.

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Breeding Dogs - Tips about Alsatians</title>
  <link rel="stylesheet" type="text/css" media="screen" href="styles.css">
  <link rel="stylesheet" type="text/css" media="print" href="printstyles.css">
</head>
<body>
</body>
</html>

    Отношения текущего документа с другими определяется в значительной степени таким же образом с помощью элемента link и атрибутов rel или rev . Атрибут rel (relationship) определяет отношение, которое связанный элемент имеет с текущим, а атрибут rev (reverse relationship) определяет отношение, которое текущий документ имеет со связанным.

    Не беспокойтесь слишком много об атрибуте rev - он немного нечеткий, но требуется редко, если вообще требуется.

    Не существует обязательных фиксированных значений для атрибутов rel и rev , но для rel существует некоторая таксономия, поддерживаемая браузерами и средствами индексации, которой желательно следовать в большинстве обычных обстоятельств:

    home Основной документ текущей совокупности
    index Индекс текущей совокупности
    contents Список контента текущей совокупности
    search Страница поиска текущей совокупности
    glossary Глоссарий текущей совокупности
    help Страница справки текущей совокупности
    first Первый документ текущей совокупности
    previous Предыдущий документ относительно данного в логическом порядке совокупности
    next Документ, следующий за данным в логическом порядке совокупности
    last Последний документ текущей совокупности
    up Документ на один уровень вверх в иерархии текущей совокупности
    copyright Информация об авторских правах текущей совокупности
    author Информационная страница об авторе текущей совокупности

    Большинство браузеров ничего не делают с этой информацией. Некоторые, однако, будут следовать по ссылке и загружать документ в фоновом режиме, чтобы он выводился для читателя немного быстрее. Реальным браузером исключением является Opera, который имеет дополнительную навигационную панель инструментов, которую можно включить выбирая в меню View > Toolbars > Navigation bar. После включения вы получите ссылки отношений, определенные в документе как дополнительную панель инструментов. Рисунок 23.1 показывает документ стандартов HTML W3C в браузере Opera:

    (рис 52.1) Браузер Opera показывает ссылочные отношения текущего документа в специальной навигационной панели инструментов

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

    Теперь давайте перейдем дальше и посмотрим, как ссылочные отношения можно использовать для соединения нескольких документов в совокупность. Например, начальная страница онлайнового курса, охватывающего несколько документов, может иметь следующий вид ( start.html ):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

  <title>Link relationship example</title>
  <link rel="contents" title="table of contents" href="toc.html">
  <link rel="next" title="next: chapter one" href="chapter1.html">
</head>
<body>
  <h1>Course example</h1>
  <p>This would be the cover page of an article series or course</p>
  <ul>
    <li><a href="chapter1.html" rel="next">Let's start with Chapter One</a></li>
  </ul>
</body>
</html>

    Первая глава будет выглядеть таким образом (chapter1.html):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

  <title>Chapter One - Link relationship example</title>
  <link rel="contents" title="Table of Contents" href="toc.html">
  <link rel="home" title="Home Page" href="start.html">
  <link rel="prev" title="previous: Home Page" href="start.html">
  <link rel="next" title="next: Second Chapter" href="chapter2.html">
</head>
<body>
  <h1>Chapter One</h1>
  <p>This would be the chapter one page of an article series or course</p>
  <ul>
    <li><a href="start.html" rev="prev">Back to Start</a></li>
    <li><a href="toc.html" rel="contents">Table of contents</a></li>
    <li><a href="chapter2.html" rel="next">Go on to Chapter Two</a></li>
  </ul>
</body>
</html>

    Вторая глава (chapter2.html):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Link relationship example</title>
  <link rel="contents" title="Table of Contents" href="toc.html">
  <link rel="home" title="Home page" href="start.html">
  <link rel="prev" title="previous: first chapter" href="chapter1.html">
</head>
<body>
  <h1>Chapter Two</h1>
  <p>This would be the second chapter page of an article series or course</p>
  <ul>
    <li><a href="chapter1.html" rev="prev">Back to chapter 1</a></li>
    <li><a href="toc.html" rel="contents">Table of contents</a></li>
  </ul>
</body>
</html>

    И наконец оглавление (toc.html):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Table of contents - Link relationship example</title>
  <link rel="home" title="home page" href="start.html">
</head>
<body>
  <h1>Table of contents</h1>
  <ul>
    <li><a href="chapter1.html">Chapter One - about stuff</a></li>
    <li><a href="chapter2.html">Chapter One - about other stuff</a></li>
  </ul>
  <ul>
    <li><a href="toc.html" rel="home">Back to home</a></li>
  </ul>
</body>
</html>

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

    Атрибуты ).

    Соединение с альтернативными версиями документа

    Возможность соединиться с другими документами, которые имеют определенное отношение к рассматриваемому документу, включает также версии на различных языках одного и того же документа, или различных форматов. Это можно сделать, используя ссылку с атрибутом rel , имеющим значение alternate, указывающую на альтернативную версию.

    Трансляции

    Трансляции являются прекрасным кандидатом для взаимосвязи документов. Может быть, например, что версия документа на одном языке является очень успешной, и посетители, которые не говорят на этом языке, хотели бы также получить доступ к этой информации. Соединяя оригинал с версией на другом языке, вы позволяете читателям на другом языке понять и распространить содержимое и сделать, возможно, версию на другом языке такой же успешной. Следующий пример показывает, как можно определять версии на других языках (languageexample.html); обратите внимание на синтаксис - он вполне интуитивно понятен:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Multiple Languages example</title>
  <link rel="contents" title="table of contents" href="toc.html">
  <link rel="next" title="next: chapter one" href="chapter1.html">
  <link rel="alternate" title="The course in Dutch" type="text/html" hreflang="nl" href="../nl/start.html">
  <link rel="alternate" title="The course in German" type="text/html" hreflang="de" href="../de/start.html">
</head>
<body>
  <h1>Course example</h1>
  <p>This would be the cover page of an article series or course</p>
  <ul>
    <li><a href="chapter1.html" rel="next">Let's start with Chapter One</a></li>
  </ul>
  <ul>
    <li>Other languages:
      <uL>
        <li><a href="../de/start.html" lang="de" hreflang="de">Deutsch</a></li>
        <li><a href="../de/start.html" lang="nl" hreflang="nl">Nederlands</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>

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

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

    Каналы

    Канал является документом, содержащим сжатую информацию, описывающую новые добавления на сайте в хронологическом порядке. Пользователи могут подписаться на него и узнавать, что изменилось на сайте за последнее время, не посещая его. Они делают это, используя такие инструменты, как аггрегаторы каналов, такие как Google Reader (http://reader.google.com/), Netvibes (http://www.netvibes.com/) или Bloglines (http://www.bloglines.com/). Некоторые современные браузеры (такие как Opera) и клиенты e-mail (такие как Mac Mail, или Outlook в Windows) также могут обрабатывать и выводить каналы. Можно узнать, что Web-сайт предлагает канал по иконке RSS, рядом с адресом, как показано на рисунке 23.2:

    (рис 52.2) Браузер Opera показывает оранжевую иконку RSS рядом с адресом Web-сайтов, которые предлагают канал

    Страницы канала структурируются либо с помощью HTML, либо с помощью формата XML, такого как RSS или Atom, и они вряд ли когда-нибудь генерируются вручную. Чаще всего это делают персональные системы публикации, и, чтобы предложить миру канал сайта, необходимо только иметь ссылку на документ XML с правильным элементом с указателем на канал RSS (feedexample.html):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <link rel="alternate" type="application/rss+xml" title="Wait till I come! RSS Feed" href="http://www.wait-till-i.com/feed/">
  <title>Wait till I come!</title>
</head>
<body>
</body>
</html>

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

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

    Более привлекательные закладки - использование иконок сайта

    Последней темой, которая будет здесь рассмотрена, являются ярлыки или иконки сайтов ( favicons ). Это небольшие изображения с форматом файлов .ico — если поместить один из них на своем Web-сервере, можно использовать его для вывода небольшой иконки рядом с записью о Web-сайте в списке закладок посетителя, как показано на рисунке 52.3:

    (рис 52.3) Иконки рядом с закладкой облегчают запоминание сайта. Можно добавить одну из них, используя мета-элемент shortcut-icon.

    Самым большим препятствием для добавления ярлыка является создание его в правильном формате, так как не все графические пакеты поддерживают создание формат ). Когда вы получите файл иконки, то для добавления достаточно использовать мета-элемент со значением rel равным "Shortcut Icon", как показано в следующем примере (favicon-example.html):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Shortcut Icon example</title>
  <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <h1>Example of a shortcut icon</h1>
</body>
</html>

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

    Заключение

    На этом заканчивается лекция, и рассмотрение раздела head документа HTML. Существуют еще вопросы, которые можно было бы рассмотреть, но они относятся к достаточно сложным темам, и часто не приносят пользы — все, что было рассмотрено здесь и в лекции 13, содержит все, что нужно для успеха. В этой лекции было рассмотрено:

  • Определение отношений документов с помощью атрибутов rel и rev в элементах link
  • Соединение с альтернативными версиями того же самого документа, такими как трансляции или каналы
  • Добавление к документам иконок-маркеров, которые выводятся в закладках и на вкладках браузера
    •

    Контрольные вопросы

  • Почему имеет смысл определять ссылочные отношения, хотя они и не выводятся?
  • Как соединиться со страницей поиска?
  • Какая польза от предложения канала посетителям сайта? Какое значение rel используется для соединения с каналом?
  • Что необходимо проверить, когда вы соединяетесь с документами на других языках?
  • Если открыть примеры документов в текстовом редакторе, то можно найти другие мета-элементы, которые не были здесь рассмотрены с атрибутом content-type и чем-то, названным utf-8. Что такое utf-8?
    •

    Об авторе

    Крис Хайлман проработал Web-разработчиком в течение десяти лет, после того как бросил радио-журналистику. Он работает для Yahoo! в Великобритании в качестве инструктора и ведущего разработчика, и осуществляет надзор за качеством кода внешнего представления для Европы и Азии.

    Крис поддерживает блог на сайте Wait till I come (http://wait-till-i.com/) и доступен во многих социальных сетях под ником "codepo8".

    Bluesmoon (http://www.flickr.com/photos/bluesmoon/1545636474/)

     Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^