Обзор HTML и CSS

Начнём с того, что HyperText Markup Language (HTML) - язык определения (разметки) гипертекста.

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

Разметка - процедура внедрения в текст специальных обозначений ( тэгов ), которые определяют ссылки и форматирование. Например, текст, заключённый между тэгами <h1> и </h1>, превращается в заголовок 1-го уровня: <h1>Заголовок</h1>.

Текст между тэгами <a> и </a> становится гиперссылкой на ресурс, указанный в атрибуте href тэга <a>:

<a href="http://www.bing.com/">Поиск</a>.

Указанный тэг имеет имя a и один атрибут с именем href и значением "http://www.bing.com/".

Как видно, обозначения тэгов подобраны таким образом, чтобы их легко было отличить от обычного текста. Угловые скобки зарезервированы для выделения тэгов в гипертексте. При необходимости использовать эти символы в самом тексте их обозначают по-другому: &lt; и &gt; (сокращения от less than и greater than - меньше и больше).

Ещё одно правило тэговой разметки, которое иллюстрируют приведённые примеры, заключается в том, что тэги могут быть открывающими и закрывающими: <h1> и </h1>, <a> и </a> и т.д., причём закрывающий тэг отличается от открывающего наличием символа слэша перед именем тэга и отсутствием атрибутов. В целом структура, определяемая открывающим и парным ему закрывающим тэгами, называется элементом и имеет следующий общий вид:

<имя_элемента имя_атрибута1="значение_атрибута1" имя_атрибута2="значение_атрибута2"...> Текст </имя_элемента>

Варианты определения элемента:

• Элемент без атрибутов и содержимого, оформленный как самозакрывающийся тег:

  <hr />

• Элемент, вложенный в другой элемент:

  <p>
  <a href="http://www.bing.com/">Поиск</a>
  </p>

Совокупность таких обозначений и правил их использования и образует язык разметки гипертекста HTML. Этот язык в его первоначальном варианте был предложен в 1989 году английским физиком Тимом Бернерс-Ли. В 1994 году Бернерс-Ли основал консорциум WWW - с уставной целью определить стандарты для HTML и позднее для XHTML. Его члены ответственны за создание чернового варианта стандарта, организацию его обсуждения и за внесение изменений в первоначальный вариант, учитывая замечания и предложения, поступившие от интернет-сообщества, чтобы удовлетворить пожелания большинства. В настоящее время помимо HTML и XHTML в сферу ответственности консорциума WWW (W3C) входит стандартизация любых технологий, относящихся к сети ( веб-технологий ). Он занимается HTTP, каскадными таблицами стилей и расширяемым языком разметки ( Extensible Markup Language, XML) так же, как и связанными с ними стандартами адресации в сети. Кроме того, W3C рассматривает проекты стандартов для расширений существующих веб-технологий.

В 1990-е годы консорциумом был выпущен ряд рекомендаций, касающихся HTML. Термин "рекомендация" отличается от термина "стандарт" (стандартами занимаются государственные и международные организации по стандартизации), однако в веб-индустрии рекомендации W3C, как правило, считаются фактическими стандартами, и о них говорят как о стандартах. Выпуская рекомендацию, W3C гарантирует, что её содержимое было представлено на рассмотрение общественности и членов рабочей группы, тщательно протестировано и ратифицировано на финальной стадии.

Последняя такая рекомендация появилась в 1999 году - это HTML версии 4.01. А в 2000 году Международная организация по стандартизации (ISO) приняла HTML в этой версии как международный стандарт (ISO/IEC 15445:2000).

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

В принципе, если в html-файле (файле с расширением html или htm) написать произвольный текст безо всякой структуры, то браузер, вероятно, нормально его отобразит (браузеры "стараются" даже неправильные html-документы отобразить по возможности верно).

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

На первом месте HTML-документа, согласно стандарту (здесь и далее под стандартом подразумевается стандарт HTML 4.01), находится определение типа документа (ОТД).

HTML 4.01 специфицирует три ОТД: строгое, переходное и ОТД для набора фреймов.

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

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

Вставляя ОТД в HTML-документ, следует ввести в его начало следующий текст:

Строгое ОТД:

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

Переходное ОТД:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ОТД для набора фреймов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

На практике наиболее широко используется переходное ОТД: фреймами веб-разработчики пользуются всё реже, а следовать строгому ОТД труднее, чем переходному (без каких-либо преимуществ взамен).

Если вообще опустить ОТД, то браузер сам сделает предположение о том, согласно каким правилам отображать документ.

Непосредственно за ОТД должен следовать единственный в документе элемент наивысшего (корневого) уровня - элемент html (директива !DOCTYPE элементом не считается):

<html>
</html>

Раздел head ("шапка")

Проще всего ответить на вопрос, что должно размещаться в разделе head, таким образом: там размещается всё, что не входит в тело документа, но необходимо для его правильного отображения. Тело документа - такие вполне зримые элементы как абзацы с текстом, списки, изображения и таблицы. Шапка документа - его заголовок, метаданные (информация о самом документе, а не о его содержимом), стили, скрипты.

Пример минимального раздела head:

<head>
<title>Заголовок документа</title>
</head>

Элемент title - единственный обязательный элемент раздела head.

Метаданные могут включать в себя информацию об авторах, ключевых словах документа и т.п., например:

<meta name="Authors" content="Alexander Kudryashev & Pavel Svetashkov" />

Эти данные не видит пользователь, просматривающий страницу, но могут анализировать поисковые роботы.

О стилях и скриптах речь пойдёт подробно в последующих лекциях.

Раздел body ("тело документа")

Здесь размещается основное содержимое документа. Выглядит это, например, так:

<body>
<p>Hello, World!</p>
</body>

Таким образом, документ, оформленный по стандарту ISO HTML 4.01, должен содержать ОТД, шапку документа с заголовком и тело документа (возможно, пустое). Всё содержимое документа упаковывается в подходящие HTML-элементы (абзацы, списки, таблицы, секции и т.п.) и размещается в теле документа, т.е. в разделе body.

Пример пустого, но корректного документа HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>