Структура html-документа
Структура HTML-документа представляет собой вложенные друг в друга контейнеры. Собственно, сам документ - это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>:
<HTML> Содержание документа </HTML>
Контейнер HTML или гипертекстовый документ состоит из двух вложенных в него контейнеров: заголовка документа (HEAD) и тела документа (BODY).
В общем случае структура документа имеет вид:
<HTML>
<HEAD>
<TITLE>название документа</TITLE>
…
</HEAD>
<BODY>
…
</BODY>
</HTML>
Эти теги хорошо подчеркивают структуру документа, но обязательным является только <TITLE> </TITLE>. В случае их отсутствия структура документа будет определена броузером по контексту. Если в состав документа входят фреймы (окна, содержащие другие страницы), то вместо контейнера тела документа используется контейнер фреймов. С помощью атрибутов ROWS и COLS задаются размеры окон. Ниже приводится текст, обеспечивающий разделение окна броузера на четыре части, и внешний вид окна (рис. 6.2).
<FRAMESET ROWS="25%,50%,25%"> - делит окно на три полосы
<FRAME SRC="p1.htm"> - задает страницу для верхнего окна
<FRAMESET COLS="25%,75%"> - делит среднее окно на две колонки
<FRAME SRC="p2.htm"> - задает страницу для правого окна
<FRAME SRC="p3.htm"> - задает страницу для левого окна
</FRAMESET>
<FRAME SRC="p4.htm"> - задает страницу для нижнего окна
</FRAMESET>
<NOFRAMES> - задает текст, который будет выведен,
Альтернативный текст если броузер не поддерживает фреймы,
</NOFRAMES> например, <BODY>…</BODY>
Рис. 6.2. Вид окна с фреймами
Заголовок документа (контейнер <HEAD>…</HEAD>) содержит название (<TITLE>…</TITLE>) и различные данные, которые можно назвать служебными, поскольку они обычно пользователю визуально недоступны.
Текст названия, содержащийся в теге <TITLE> </TITLE>, на экране не отображается, но он будет в строке заголовка окна броузера, в закладке, в журнале. Это весьма важный элемент, хотя он и не бросается в глаза. Поисковые системы, программы-спайдеры обращаются в первую очередь к заголовку документа. При этом текст названия имеет для них больший вес, чем текст самого документа. В этой связи не следует бояться длинного названия и следует хорошо подумать о его смысле. Можно указать не только тему страницы, но и название самого сайта.
Кроме названия в разделе заголовка могут располагаться несколько дополнительных тегов. Чаще всего это: !DOCTYPE, LINK, BASE, SCRIPT, META, STYLE.
Тег !DOCTYPE содержит сведения о языке документа. Например,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML//EN">.
Тег LINK позволяет определять отношение текущего документа к другим документам и ресурсам, например, он может содержать адрес файла таблицы стилей:
<LINK REL=STYLESHEET HREF=”http://www.myserver.com/mysheet.css“ TYPE=”text/css>.
Элемент BASE определяет базовый адрес для относительных ссылок, например:<BASE href="http://www.acme.com">
...
<IMG SRC="icons/logo.gif">
В этом случае изображение будет загружаться из файла
http://www.acme.com/icons/logo.gif
При отсутствии элемента BASE в качестве базы используется местонахождение текущего документа.
Тег SCRIPT содержит сценарий (программу на языке JavaScript или VBAScript) для создания какого-либо эффекта на экране.
Тег META содержит информацию, которая не отображается при просмотре Web-страницы. Внутри тега обычно находятся два атрибута, первый из которых (NAME) содержит имя, задающее тип данных (семантику), а второй (CONTENT) – содержание этих данных. С помощью тега <META> можно определить некоторые свойства документа: информацию об авторе, список ключевых слов и т.п. Эти свойства станут доступны поисковым средствам и программам обслуживания.
Например, <META NAME="Author" CONTENT="Molchanov"> или <META NAME="keywords" CONTENT="Интернет, HTML, WWW, руководство, публикация, гипертекст">.
В любом месте HTML-документа, в том числе и в заголовке может содержаться комментарий – игнорируемый броузером текст. Комментарий может быть помещен в специальный парный тег
<COMMENT>текст комментария </COMMENT> или такую конструкцию <!--текст комментария-->.
В целом заголовок документа может выглядеть следующим образом:
<!—произвольный комментарий-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML//EN">
<COMMENT>еще один комментарий</comment>
<HTML>
<HEAD>
<TITLE>Структура Web-страницы</title>
<LINK REL=STYLESHEET HREF=”http://www.myserver.com/mysheet.css“ TYPE=”text/css>
<META NAME="Author" CONTENT="Molchanov">
<META NAME="Keywords" CONTENT="WWW, HTML, document, element">
</head>
Основными средствами, обеспечивающими придание документу требуемого вида в целом, являются атрибуты тега BODY. В документе разрешен только один тег BODY. Его атрибуты действуют на весь документ. При их отсутствии броузер использует значения по умолчанию. Атрибуты, их назначение и значения приведены в таблице 6.2.
Таблица 6.2 Назначение атрибутов тега BODY
Имя атрибута |
Значение |
Назначение |
background |
“путь к файлу рисунка” |
Создание фонового рисунка |
bgcolor |
#RRGGBB |
Цвет фона |
text |
#RRGGBB |
Цвет текста |
link |
#RRGGBB |
Цвет ссылок |
vlink |
#RRGGBB |
Цвет используемых ссылок |
alink |
#RRGGBB |
Цвет последней ссылки |
Цвет может задаваться шестнадцатеричным числом, содержащим яркость соответствующих цветовых компонентов (красный, зеленый, голубой), например, #FFAA99, можно также использовать имя цвета, например, red, blue и т.п. Кодировки цвета приведены в таблице 6.3.
Таблица 6.3 Кодировка цвета
Black |
черный |
#000000 |
Maroon |
темно-бордовый |
#800000 |
Green |
зеленый |
#008000 |
Olive |
оливковый |
#808000 |
Navy |
темно-синий |
#000080 |
Purple |
фиолетовый |
#800080 |
Teal |
чирок |
#008080 |
Gray |
серый |
#808080 |
Silver |
серебро |
#C0C0C0 |
Red |
красный |
#FF0000 |
Lime |
известь |
#00FF00 |
Yellow |
желтый |
#FFFF00 |
Blue |
синий |
#0000FF |
Fuchsia |
фуксия |
#FF00FF |
Aqua |
аква |
#00FFFF |
White |
белый |
#FFFFFF |
При необходимости задания одного из атрибутов BGCOLOR, TEXT, LINK, VLINK или ALINK, рекомендуется указывать значения всех. Иначе, например, специфицированный фоновый цвет может совпасть с пользовательским цветом для текста по умолчанию и текст станет невидимым.
Цвет текста можно изменять локально с помощью соответствующих тегов, однако цвет фона установить локально нельзя, он является единым для всего документа.
Атрибуты BGCOLOR и BACKGROUND можно использовать одновременно. В этом случае обычно броузер отдает предпочтение BACKGROUND, но если изображение фона невозможно загрузить или пользователь отказался от рисунков, будет использовано значение BGCOLOR.