Краткая история HTML

Начало истории HTML можно отнести к 1986 году, когда Международная организация по стандартизации (ISO) приняла стандарт ISO-8879, озаглавленный "Standard Generalized Markup Language (SGML)". Этот стандарт описывал обобщенный метаязык, позволяющий строить системы структурной разметки любых разновидностей текстов. Управляющие элементы (так называемые теги), вносимые в текст при такой разметке, не несли никакой информации о внешнем виде документа, а лишь задавали его логическую структуру, т.е. указывали границы и соподчинение составных частей документа. Размеченный таким образом текст могла интерпретировать любая программа, работающая на какой угодно компьютерной платформе с любым устройством вывода.

Несмотря на всю значительность принципов, лежащих в основе языка SGML, он не имел заметного распространения до тех пор, пока в 1991 г. сотрудник Европейского института физики элементарных частиц Тим Бернерс-Ли не выбрал его в качестве основы для нового языка разметки гипертекстовых документов. Этот язык, ставший самым известным и широко используемым приложением SGML, был назван HTML – HyperText Markup Language, что переводится как язык разметки гипертекста.

Первые версии HTML разделяли все особенности идеологии своего прародителя. Вся разметка была чисто логической, а из более чем сорока тегов HTML версии 1.2, вышедшей в свет в июне 1993 г., только три тега отвечали за физические параметры представления документа.

В сентябре 1993 года группа программистов Национального центра суперкомпьютерных приложений США (NCSA) выпустила первый (и на долгое время единственный) графический браузер Mosaic, благодаря которому язык HTML получил широкое распространение. Браузер покорил виртуальное пространство с поразительной быстротой – всего за год около двух миллионов пользователей установили Mosaic на свои компьютеры.

В апреле 1994 г. под эгидой созданного в том же году Консорциума Всемирной паутины (World Wide Web Consortium, W3C) началась подготовка новой версии языка HTML 2.0, ставшей официальной рекомендацией W3C лишь в сентябре 1995 г. Стандарт HTML 2.0 вобрал в себя всю сложившуюся к 1994 году практику создания веб-сайтов.

В марте 1995 г. началась работа над проектом HTML 3. К этому времени уже достаточно очевидно стало противоречие между идеологий чисто логической разметки существовавших версий HTML и потребностями пользователей, заинтересованных в расширении средств визуального оформления. Чтобы разрешить это противоречие, не отказываясь от парадигмы структурной разметки, авторы HTML 3 ввели поддержку нового средства - так называемых иерархических стилевых спецификаций (Cascading Style Sheets, CSS). Стилевые спецификации представляли собой отдельный по отношению к структурной разметке "информационный слой" и были предназначены только для визуального форматирования структурных элементов документа. К сожалению, работа над этой версией была прервана в связи с отсутствием поддержки со стороны производителей браузеров. Принятая чуть позже рекомендация HTML 3.2 потеряла многие новые свойства 3.0, однако закрепила разработки популярных в то время браузеров Netscape Navigator и Internet Explorer.

В 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 выделяет программные интерфейсы для работы с двумерной графикой, средства внедрения в веб-страницы видео- и аудиоматериалов, а также инструменты, позволяющие посетителям самостоятельно редактировать сайты. Ознакомиться с черновым вариантом спецификации 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). Пользователь не может создавать свои собственные атрибуты или использовать значения, не определенные Спецификацией, так как это может вызывать проблемы правильной интерпретации веб-страницы.

Как было отмечено, ряд атрибутов применим практически ко всем элементам 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, создающим ссылку на веб-страницу:

<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.

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

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

Внутри элемента HTML располагается заголовок. Заголовок документа, создаваемый элементом <HEAD>…</HEAD>, содержит информацию об общих свойствах документа. Данный элемент в обязательном порядке должен содержать элемент TITLE и может содержать необязательные элементы BASE, SCRIPT, STYLE, META, LINK и OBJECT. Элемент HEAD имеет три необязательных атрибута: lang, dir и profile; последний указывает местонахождение словаря метаданных. Предполагается, что такой словарь должен содержать имена метапеременных, значения которых определяются элементами META и LINK в заголовке документа.

После элемента HEAD следует элемент <BODY>…</BODY>, который является оболочкой, содержащей реальный контент веб-страницы. Элемент BODY обязательно должен содержать хотя бы один блочный элемент: в данном случае это элемент P, создающий параграф, который содержит текст "Это самый простой HTML-документ.". Элемент BODY имеет довольно много атрибутов, однако рекомендуемыми к применению являются только id, class, style, title, lang и dir.

Редакторы для верстки веб-страниц

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

Визуальные редакторы не требуют от разработчика знаний HTML, CSS и других технологий разметки документов. Пользователь просто располагает различные элементы будущей страницы в окне редактирования, а редактор сам генерирует соответствующий код. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами, что означает What You See Is What You Get - что видишь, то и получаешь.

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

К популярным визуальным редакторам относятся продукты компании Adobe - GoLive и Dreamweaver, а также Microsoft FrontPage и Microsoft Expression Web. Данные редакторы являются проприетарными, хотя производители предлагают всем желающим ознакомительные версии данных программ. Так, ознакомительную версию Microsoft Expression Web можно получить, перейдя по ссылке http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=0a73a3a7-3e06-4125-b3c6-f9c10387e9cc. Среди свободно распространяемых редакторов стоит выделить редактор Nvu, который хоть и уступает в функциональности упомянутым выше редакторам, однако бесплатное распространение делает его привлекательным для многих разработчиков.

Однако ни один визуальный редактор не совершенен, и все они так или иначе ограничены в своих возможностях. Поэтому профессиональные разработчики часто пользуются небольшими текстовыми редакторами. Текстовые редакторы, как правило, содержат набор функций, облегчающих разработчику написание кода. К наиболее распространенным функциям относятся подсветка кода, различные горячие клавиши и т.д. К наиболее популярным текстовым редакторам относятся Macromedia HomeSite и HTML Pad. Однако лидером среди текстовых редакторов является Notepad (он же Блокнот). В этой программе нет никаких специальных функций, но зато она есть у каждого пользователя Windows, т.к. входит в число стандартных. С нее можно начать свои первые шаги в написании кода, а затем уже сменить на более понравившийся редактор.