Реальный пример

Приведем сразу конкретный пример и далее его разберем:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
Всем привет!
</body>
</html>

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

HTML тэги

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

В языке HTML все тэги имеют однотипный формат: они начинаются знаком "<" и заканчиваются знаком ">". Теги могут быть парными и одиночными.
В случае парного тега есть открывающий (<html>) и закрывающий (</html>). Как видите, закрывающий тег отличается только наличием слэша "/" перед именем тэга. Всё, что находится между открывающим и закрывающим тэгами, является содержимым данного тэга. Одни тэги могут быть вложенными в другие.
Одиночные тэги не являются контейнерами, а только содержат инструкции, например, перевод строки <br />. В старых версиях языка HTML этот тег записывался в виде <br>, теперь такие теги содержат в себе и элемент закрывания (слэш) и выглядят, как показано выше: <br />.

В последнее время слово "тэг" стало модно использовать в другом значении. Тэгом теперь принято называть метки или ключевые слова какого-либо документа. Поэтому, чтобы не вносить путаницу в терминологию, в этом учебнике вместо тэгов мы будем говорить об элементах языка HTML.

Информация о версии языка. Элемент <!doctype>

Если посмотреть любой HTML-документ, то некоторые элементы в нем обязательно будут присутствовать. Правилом хорошего тона является размещение в первом элементе информации о версии языка, которая вами используется, чтобы браузер, отображающий Web-страницу, мог учесть особенности или ограничения этой версии. Рассматриваемый элемент имеет только открывающий тег <!doctype>, который начинается восклицательным знаком. В данном теге заключена информация о типе документа.

В версии HTML 4.01 есть ссылки на три вида документов:

  1. HTML 4.01 Strict — наиболее "правильная" версия, предъявляющая жесткие требования к синтаксису кода; не поддерживает отмененные элементы для форматирования текста. Элемент обычно имеет вид:
    <!doctype html public "-//W3C//DTD HTML4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    С указанного адреса браузер (в случае необходимости) может загрузить описание элементов данной версии языка. Часть, касающаяся адреса, может быть опущена. Аббревиатура DTD (Document Type Definition) означает "определение типа документа". Эта версия языка не поддерживает подокна-фреймы.
     
  2. HTML 4.01 Transitional — переходная версия языка, наиболее популярная в настоящее время. Подразумевается, что предыдущие требования к синтаксису смягчаются и поддерживаются страницы, написанные до появления стандарта HTML 4.0. Допустимы отмененные в современном языке элементы, например, <font>. В этом случае <!doctype> имеет вид:
    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    Как и в предыдущем примере, может быть использован адрес документа:
    http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd
     
  3. HTML 4.01 Frameset — используется в том случае, если ваш документ включает фреймы. Записывается
    <!doctype html public "-//W3C//DTD HTML4.01 Frameset//EN">
    Адрес документа: http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd

Для XHTML разработчиками W3C установлено следующее описание языка.

XHTML 1.0 Strict — версия языка XHTML. Слово Strict означает, что синтаксис должен жестко подчиняться последним требованиям вышеупомянутой спецификации, то есть не должен содержать отмененных элементов или атрибутов и фреймов.

Элемент <html>

[Парный. Не обязательный.]

Этот элемент служит признаком того, что перед нами именно Web-страница, или HTML-документ. Открывающий тег и закрывающий теги могут отсутствовать. Однако их использование является правилом хорошего тона. Все остальные элементы, кроме <!doctype>, помещаются внутрь контейнера <html>...</html> и служат его контентом.

Атрибуты:

  • version — не рекомендуемый атрибут, в котором описывается версия языка. Сейчас эта информация помещается в <!doctype>.
  • lang, dir — информация о языке и направленности текста.

Из содержимого контейнера наибольшее значение имеют два элемента, располагаемые друг за другом — <head> (голова) и <body> (тело), то есть заголовочная и основная части. Заголовочная часть не отображается браузером и несет служебную информацию. В <body> располагается основное содержание Web-страницы.

Таким образом, минимальный документ должен иметь структуру:

<html>
<head>
...служебная неотображаемая информация...
</head>
<body>
...воспроизводимое содержание документа...
</body>
</html>

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

Размещение контента. Элемент <body>

[Парный. Не обязательный.]

В элементе <body> располагается та часть информации, которая должна быть воспроизведена, то есть содержимое. Если элемент опущен, браузер сам будет пытаться определить начало и конец контента.

Атрибуты:

  • bgcolor — задает цвет фона, значениями служат единицы определения цвета.
  • background — указывает URI графического файла, используемого в качестве фона на всей странице, не рекомендуемый.
  • text — определяет цвет текста на всей странице, не рекомендуемый.
  • link — задает цвет ссылок, не рекомендуемый.
  • vlink — задает цвет просмотренных ссылок, не рекомендуемый.
  • alink — задает цвет активных ссылок, на которых находится маркер в данный момент. Используется для подсветки ссылок во время выбора, не рекомендуемый.
  • bgproperties — может принимать единственное значение fixed. В этом случае фон не прокручивается вместе с текстом, а остается "привязанным" к экрану.
  • topmargin — задает в пикселях расстояние между окном и текстом сверху.
  • leftmargin — задает в пикселях расстояние между окном и текстом слева.
  • bottommargin — задает в пикселях расстояние между окном и текстом снизу.
  • rightmargin — задает в пикселях расстояние между окном и текстом справа.
  • scroll — устанавливает полосы прокрутки.
  • id — задает идентификатор элемента, который может применяться в различных целях, например, в качестве программной метки, чтобы программа смогла найти этот элемент среди множества других.
  • class — указывает на принадлежность элемента к классу элементов, имеющих аналогичные свойства. Например class="red_text".
  • lang — задает информацию о языке.
  • dir — определяет направление написания текста и данных в таблицах.
  • style — встроенная информация о стиле.
  • onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove, onkeypress, onkeydown, onkeyup, onload, onunload — внутренние события.

Теперь мы знаем, что означали все элементы в нашем первом примере.