WEB-технологии

В 1997 году консорциум W3C опубликовал версию HTML 4.0 в качестве рекомендации, которая  включила дополнительные специальные расширения браузеров, но попыталась также рационализировать и очистить HTML. Многие элементы и атрибуты (в основном касающиеся визуального оформления) были помечены как не рекомендуемые. Это должно было стимулировать более "правильное" использование HTML.

Версия HTML 4.01 была опубликована в 1999 г. Это  самая последняя версия HTML, хотя W3C уже опубликовал черновой вариант  спецификации пятой версии языка HTML. Работа над черновой версией спецификации HTML 5 началась в марте 2008 года. Для этого была сформирована специальная группа, объединившая порядка пятисот участников, среди которых специалисты таких компаний, как Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, BEA Systems, Cisco, France Telecom и Hewlett-Packard.

Среди наиболее заметных и важных нововведений в HTML 5 Консорциум W3C выделяет программные интерфейсы для работы с двумерной графикой, средства внедрения в Web-страницы видео- и аудиоматериалов, а также инструменты, позволяющие посетителям самостоятельно редактировать сайты. Ознакомиться с черновым вариантом спецификации HTML 5 можно на официальном сайте Консорциума (http://www.w3.org/TR/2008/WD-html5-20080122/).

Семантические требования HTML

Ключевыми моментами в Спецификации HTML являются синтаксические правила HTML и определение семантики его  элементов.

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

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

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

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

Семантическая верстка неотделима от концепции  разделения структуры и представления, согласно которой язык разметки гипертекста HTML должен использоваться только для  описания структуры документа (т.е. его содержания), а для визуального представления этой структуры (т.е. его оформления) предлагается другой официально утвержденный W3C стандарт – каскадные таблицы стилей CSS (Cascading Style Sheets).

Составные элементы HTML-документа

Элементы

Любой HTML-документ представляет собой  набор элементов, описывающих отдельные  составляющие документа, такие как  заголовки, списки, абзацы текста, таблицы  и др. Имена большинства элементов  представляют собой общеупотребительные  слова английского языка, понятные сокращения и обозначения.

Чаще  всего элемент разметки состоит  из трех частей: начального и конечного  компонентов, между которыми размещаются  текст или другие элементы документа. Эти компоненты представляют собой  специальные управляющие конструкции для разметки содержимого HTML-документа и называются тегами. Начальный тег состоит из имени элемента, заключенного в угловые скобки (< и >). Конечный тег отличается от начального тем, что перед именем элемента в нем ставится косая черта (/). Например, элемент EM, используемый для акцентирования текста, будет иметь следующий вид:

<EM>акцентируемый  текст</EM>

Следует также заметить, что имена  элементов не чувствительны к  регистру, т.е. записи <EM> и <em> равнозначны.

Элементы  должны либо следовать друг за другом, либо быть вложены один в другой. Так, если начальный тег <STRONG> расположен внутри элемента <P>…</P> , то и конечный тег </STRONG> должен быть расположен внутри этого элемента.

Конечные  теги некоторых элементов в документе  можно опускать, т.к. большинство браузеров устроено так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Например, конечный тег элемента LI, используемого для создания пункта списка, не обязателен, поскольку начало очередного пункта списка означает конец предыдущего. Есть и другие конечные теги, без которых браузеры отлично работают, например, конечный тег   </HTML>. Тем не менее, рекомендуется не опускать конечные теги, чтобы избежать путаницы и ошибок при воспроизведении документа. Кроме того, некоторые элементы, такие, как, например, элемент IMG, используемый для вставки в HTML-документ изображения, не имеют конечного тега, поскольку не имеют содержимого.

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

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

Атрибуты

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

Атрибуты  размещаются в начальном теге после имени элемента и отделяются друг от друга одним или несколькими  пробелами, причем порядок следования атрибутов в теге значения не имеет. Значение атрибута (если таковое имеется) следует за знаком равенства, стоящим после имени атрибута. Значение должно быть помещено в одиночные или двойные кавычки. Несмотря на то, что в некоторых ситуациях кавычки можно опустить, Спецификация HTML рекомендует всегда заключать значения атрибутов в кавычки. Имена атрибутов могут быть набраны в любом регистре, однако их значения могут зависеть от регистра.

Все атрибуты и их возможные значения определяются в основном Спецификациями HTML (http://www.w3.org/TR/html401/index/attributes.html). Пользователь не может создавать свои собственные атрибуты или использовать значения, не определенные Спецификацией, так как это может вызывать проблемы правильной интерпретации Web-страницы.

Как было отмечено, ряд атрибутов применим практически ко всем элементам HTML. Наиболее часто используемыми атрибутами являются базовые атрибуты (class, id, style и title), определяющие общие свойства элементов, и локализующие атрибуты (dir и lang), которые указывают на свойства языка написания содержимого элемента. Кратко рассмотрим эти атрибуты.

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

<P id="footer">Знание  – сила! </P>

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

<P class="header">Заглавный  текст</P>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<META http-equiv="Content-Style-Type" content="text/css">

...

</HEAD>

<BODY>

...

<P style="color: red">Мир, труд, май! </P>

...

</BODY>

</HTML>

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

Все три описанных выше атрибута можно  применить ко всем элементам, кроме  элементов BASE, HEAD, HTML, META, SCRIPT, STYLE и TITLE.

Атрибут title определяет заголовок элемента и часто используется обозревателями в качестве подсказки, которая выводится на экран, когда курсор помещается на данный элемент. Приведенный ниже пример демонстрирует использование атрибута title совместно с элементом A, создающим ссылку на Web-страницу:

<A href="http://www.microsoft.com"

title="Официальный сайт Microsoft">Microsoft</A>

Атрибут lang определяет язык, на котором написаны значения остальных атрибутов данного элемента и его содержимое, а также всех вложенных элементов, не имеющих аналогичного атрибута. Использование атрибута позволяет авторам менять стиль текста в зависимости от языка. Например, текст двуязычного документа может быть оформлен следующим образом:

...

<P lang="en">This paragraph is in English. </P>

<P lang="ru">Этот  абзац на русском языке. </P>

...

Атрибут dir определяет направление вывода текста: слева направо (dir="ltr", по умолчанию) или справа налево (dir="rtl"). Для всех символов в кодировке Unicode в целях правильного отображения текста определено направление. Так, латинские и русские буквы выводятся слева направо, а еврейские и арабские – справа налево.

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

Специальные символы и ссылки-мнемоники

В документ HTML также могут быть включены ссылки-мнемоники (или символьные ссылки). Данные ссылки предназначены  для ввода в документ нестандартных и специальных символов. К нестандартным относятся символы, которые трудно или невозможно ввести с помощью клавиатуры или в кодировке конкретного документа, в то время как к специальным символам относятся символы, а также специальных символов. Специальным символам относятся символы, которые начинают и заканчивают части документа HTML, а не представляют соответствующие символы (<, >, & и ").

Ссылки-мнемоники  начинаются знаком & и заканчиваются  точкой с запятой (;). Однако многие браузеры могут быть достаточно лояльны к ошибкам HTML, таким как отсутствие точки с запятой.

Ссылки  могут быть либо числами (числовые ссылки), либо сокращенными словами (объектные  ссылки). Например, амперсанд может  быть введен в документ как &amp;, что является объектной ссылкой символа, или как &#38;, что является числовой ссылкой. Полную таблицу символьных ссылок можно найти на сайте evolt.org (http://www.evolt.org/article/A_Simple_Character_Entity_Chart/17/21234).

Комментарии в HTML

HTML-документы могут содержать  комментарии, которые являются  удобным средством для описания  кода, поиска разделов документа  или объяснения мотивов, которыми  руководствовался разработчик кода. Комментарии не влияют на отображение документа, а только поясняют его содержимое при просмотре HTML-кода. Текст комментариев располагается между двумя группами символов: открывающим ограничителем (<!--) и закрывающим ограничителем (-->). В тексте комментариев запрещается использовать два или более подряд идущих дефиса.

Комментарии в HTML могут выглядеть  следующим образом:

<!-- это комментарий  -->

<!-- это комментарий,  занимающий две строки -->

Структура HTML-документа

Пример HTML-документа выглядит следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

    <TITLE>Пример  простого HTML-документа</TITLE>

</HEAD>

<BODY>

    <P>Это самый  простой HTML-документ.</P>

</BODY>

</HTML>

Пример выполнения этого кода браузером  представлен на рисунке 4.1.

Рис. 4.1.  Вид в браузере простого HTML-документа

Каждый документ рекомендуется  начинать с элемента декларации типа документа, или DOCTYPE, который описывает используемый тип и версию HTML. Данная информация предназначена прежде всего для браузеров и программ-валидаторов разметки. DOCTYPE указывает браузеру основные синтаксические элементы для каждой версии HTML, а также режим воспроизведения. Валидаторы разметки просматривают DOCTYPE, чтобы определить, согласно каким правилам они должны проверять данный документ.

За  декларацией типа документа следует  элемент <HTML>…</HTML>, который указывает, что последующий документ является HTML-документом и включает в себя все остальное содержимое документа. Данный элемент называется корневым элементом документа. Он может содержать только элементы HEAD и BODY, причем каждый из этих элементов может встречаться внутри элемента HTML не более одного раза. Данный элемент имеет два необязательных атрибута: lang и dir.