Начнем со структуры HTML документа. В простом виде можно записать ее в следующем виде:
Сохраняем документ под именем index.html и открываем его в браузере.
Что мы видим? Ничего - пустая страница. Разберем этот пример и начнем ее заполнение.
Элементы HTML представляют собой теги. Теги - это ключевые слова, заключенные в угловые скобки. Теги могут быть одинарными (например, горизонтальная черта <hr>) или парными. Во втором случае элемент состоит из открывающегося тега (например, <html>) и закрывающегося тега (</html>). Действие элемента распространяется на область между открывающимся и закрывающимся тегом.
Весь гипертекстовый документ заключается внутри элемента html
(т.е. между <html> и </html>).
Внутри этого элемента содержится еще два элемента - заголовок документа (элемент head),
который содержит служебную информацию о документе и тело документа
(элемент <body>),
которое содержит информацию отображаемую в окне браузера.
Приведенной структуры достаточно для создания простых HTML документов для личных целей, но она не удовлетворяет стандарту. Главная ошибка заключается в том, что не указан в каком стандарте представлен документ. Стандарт прописывается первой строкой до тега <html>. Посмотрим какие основные стандарты существуют.
Для HTML 4.01
<!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">
Для XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Для XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Strict, Transitional, Frameset - означают строгую
(верстка не должна содержать отклонений от стандарта) спецификацию, переходную
(ошибки игнорируются, для чайников)
и для сайтов использующих фреймы (а такие еще есть?).
Указание типа документа чувствительно к регистру,
поэтому лучше ее копировать из приведенных здесь примеров для избежания ошибок.
Существуют и другие стандарты, для создания шаблона остановимся на первой из списка (мы легко сможете модифицировать шаблон под свой тип документа).
Перейдем к разделу заголовка. В нем указывается заголовок страницы
(элемент title), META-данные и другая служебная информация.
Здесь мы остановимся только на заголовке, остальные элементы рассмотрим в соответствующих темах
(отметим только два элемента, отвечающих за кодировку и CSS).
Добавим внутри элемента head строку <title>Структура документа</title>
и откроем страницу в браузере. В верхней верхней строке браузера мы видет то,
что указали внутри элемента title. Кроме того, эта информация используется
браузером для обозначения ссылок, когда вы добавляете страницу в закладки.
Для правильного отображения страницы мы должны задать в какой кодировке написан наш документ. Для этого добавляет строку
Здесь мы указываем стандартную виндоуз-кодировку windows-1251.
Конечно, указать это мало, необходимо, чтобы сам документ был набран в этой кодировке.
Также стандартной является кодировка utf-8 (уникод, поддерживает расширенный набор символов).
Так же укажем формат для каскадных таблиц стилей с помощью строки
Тело документа (элемент body) содержит визуальную информацию, т.е. ту, что будет непосредственно отображаться в окне браузера. Добавим строчку "Код документа содержит правильную структуру".
Итак, окончательный строгий вариант (который мы можем использовать в качестве шаблона для других документов) следующий:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <!-- Заголовок документа --> <title>Структура документа</title> <meta http-equiv="content-type" content="text/html;charset=windows-1251" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <!-- тело документа --> Код документа содержит правильную структуру </body> </html>
В итоге мы получили шаблон документа для выбранного нами стандарта.