 |
Шаг 4. Структура HTML-кода
|
|
|
|
Влад Мержевич
Текстовая версия
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые остаются исходными, независимо от вида и направления сайта. Рассмотрим код, который первоначально создается в редакторе Nvu (пример 4.1). Для удобства добавлены номера строк, но в коде их, конечно же, быть не должно, иначе это приведет к ошибке.
Пример 4.1. Исходный код веб-страницы
01. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02. <html>
03. <head>
04. <meta content="text/html; charset=Windows-1251" http-equiv="content-type">
05. <title>Вторая страница</title>
06. </head>
07. <body>
08. <br>
09. </body>
10. </html>
Далее разберем отдельные строки нашего кода.
01.!DOCTYPE предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы (пример 4.2).
Пример 4.2. Допустимые DTD
HTML 3.2 (предыдущая версия HTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Строгий HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Переходный HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 при использовании фреймов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок, что обычно приводит к иному отображению документа, чем планировал разработчик. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип использовать предпочтительнее.
Заметьте, что в примере 4.1 не указывается путь к DTD-файлу, как это показано в примере 4.2. Этот параметр не является обязательным и его можно опустить.
|
|
|
Замечание
Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается по-разному при использовании <!DOCTYPE> и без него. Чтобы не произошло подобных ситуаций, всегда добавляйте этот тег в начало документа.
02. Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
03. Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице.
04. Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег с разными параметрами, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Так, чтобы браузер понимал, что имеет дело с кодировкой «Кириллица (Windows)» и добавляется строка, как в примере 4.1.
05. Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.1).
Рис. 4.1. Вид заголовка в браузере Internet Explorer
06. Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.
07. Тело документа <body> предназначено для размещения тегов и содержательной части.
08. Внутри контейнера <body> могут размещаться практически любые элементы веб-страницы, в частности, тег <br>, как показано в примере 4.1, создает перенос строки.
09. Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.
10. Последним элементом в коде идет закрывающий тег </html>.
|
|
|
Шаг 5. Теги HTML
Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, и применяются теги. Теги являются основой HTML и берутся в угловые скобки. Общий синтаксис написания тегов следующий.
<тег параметр1="значение" параметр2="значение">
<тег параметр1="значение" параметр2="значение">...</тег>
Теги бывают одиночными и парными (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные параметры, которые разделяются между собой пробелом. Впрочем, есть теги, без всяких дополнительных атрибутов. Параметры условно можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения.
Далее описаны некоторые рекомендации, которые относятся к тегам.
|
|
|
