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

Итак, мы изучили технологию создания HTML-документов, научились сохранять и отображать исходный код. Ниже представлена структура, характерная для любого HTML-документа.

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

              

              <html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

              <title>Документ</title>

              </head>

              

              <body>

              </body>

              </html>

HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head>) и содержательной части (между тегами <body> и </body>).

Множество всех тегов HTML можно разбить на следующие группы:

структура документа;
ссылки;
вставка содержимого из внешних источников;
разметка страницы;
форматирование текста;
формы и элементы пользовательского интерфейса.

Кратко рассмотрим основные теги этих групп.

Тег !DOCTYPE

Во многих HTML-документах, созданных в специальных редакторах типа Dreamweaver, перед открывающимся тегом <html> нередко можно увидеть тег <!DOCTYPE>, с помощью которого объявляется тип и формат содержимого документа. Однако современные Web-браузеры обрабатывают документы и без него. Ниже приведено содержимое тега <!DOCTYPE>:

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

Здесь определен тип документа HTML, публичное DTD-описание которого принадлежит организации W3C, соответствует стандарту HTML 4.01 и ориентировано на англоязычные документы.

Если HTML-документ без тега <!DOCTYPE> открыть в браузере Internet Explorer, а затем выполнить команду Файл -> Сохранить как, выбрав при этом тип файла html, то браузер добавит в сохраняемый файл тег <!DOCTYPE>.

Возможны следующие версии DTD (Document Type Definition — определение типа документа):

Strict DTD — исключает все не рекомендованные консорциумом W3C теги и атрибуты, такие как <FONT>,< CENTER>, align и другие, связанные с форматированием, которые можно заменить соответствующими параметрами CSS.
Transitional DTD — включает все версии Strict DTD,а также все не рекомендованные элементы для обеспечения обратной совместимости со всеми существующими браузерами.
Frameset DTD — включает такие же элементы, что и Transitional DTD,а также элементы, необходимые для Web-страниц с фреймовой структурой.

Раздел HEAD

Раздел HEAD содержит техническую информацию о странице — заголовке, ее описание и ключевые слова для поисковых машин, данные об авторе и времени создания страницы, базовом адресе страницы и т.д. и расположен в контейнерном теге head. В этом теге размещаются также следующие теги:

<title> Заголовок страницы< /title> — единственный обязательный тег, текст которого отображается в окне веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он полностью не поместится в заголовке окна;
<meta> — одинарный тег, задает описание содержимого страницы и ключевые слова для поисковых машин;
<base> — одинарный тег, базовый URL-адрес документа;
<link> — одинарный тег связи между документами;
<style> — контейнерный тег, размещающий таблицу стилей;
<script> — контейнерный тег, размещающий код сценария.

Тег meta

Информация, содержащаяся в тегах <meta>, не отображается веб-браузером, однако имеет важное значение. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой:

<meta name="description" content=" Описание содержимого страницы">

Где,

description — описание документа. Один из наиболее важных параметров. Информация, содержащаяся в нем, влияет на результаты поиска, осуществляемого поисковыми системами

Пример:

<meta name="description" content="Основы HTML. Основные понятия. Первый HTML-документ ">

<meta name="keywords" content="Ключевые слова через запятую ">

Где, keywords — ключевые слова, набор слов и фраз, наиболее полно характеризующий данный документ, который является основным критерием поиска вашего документа поисковыми системами. В конечном счете, эти слова учитываются при выдаче результатов поиска и способствуют повышению рейтинга сайта.

Пример:

<meta name="keywords" content="Основы HTML, основные понятия, первый HTML-документ ">

Кроме того, тег meta позволяет запретить или разрешить индексацию веб-страницы поисковыми машинами:

<meta name="robots" content=" <Индексация>, <Переход по ссылке> ">

В параметре content указывается комбинация следующих значений:

index — индексация разрешена;
noindex — индексация запрещена;
follow — разрешено переходить по ссылкам, которые находятся на этой веб-странице;
nofollow — запрещено переходить по ссылкам;
all — комбинация index плюс follow;
none — комбинация noindex плюс nofollow.

Примеры:

Индексация и переход по ссылкам разрешены:

<meta name="robots" content="index, follow" >

Индексация разрешена, а переход по ссылкам запрещен:

<meta name="robots" content="index, nofollow" >

Индексация и переход по ссылкам запрещены:

<meta name="robots" content="noindex , nofollow">

С помощью тега meta устанавливается кодировка текста:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" meta http-equiv= "Content-Type" content="text/html; charset=utf-8">

Для автоматической перезагрузки страницы через заданный промежуток времени используется свойство refresh:

<meta http - equiv = "refresh" content = "30">

В этом примере страница будет перезагружена через 30 секунд. Если необходимо перенаправить пользователя на другую страницу, то указывается URL-адрес страницы:

<meta http - equiv = "refresh" content = "30, http://www.microsoft.com">

Здесь указано, что спустя 30 секунд произойдет перезагрузка страницы по указанному адресу.

Автоматическую периодическую перезагрузку документа обычно устанавливают в случаях часто обновляемых данных (котировки акций на фондовом рынке, например).

Для управления частотой индексации документа поисковыми серверами используется параметр document-state.

<meta nane = "document-state" content = "static" >

Где,

static — документ статичен, т.е. не меняется, и следовательно, индексировать его нужно только один раз.

<meta name = "document-state" content = "dynamic">

Где,

dynamic — значение для часто изменяющихся документов, которые нужно реиндексировать.

<meta name= "resource-type" content = "document"> — определяет тип ресурса. Для обычных HTML-документов значение этого параметра устанавливается равным "document".

<meta name= "updated" content = "29.06.09"> — определяет дату обновления страницы.

<meta name= "URL" lang = "ru" content = "https://sevidi.ru"> — определяет какой документ следует индексировать (чтобы не обрабатывать зеркала). Где URL— базовый URL-адрес.

<meta name= "AUTHOR" content = "имя автора"> — определяет имя автора данного документа.

Тег base

В HTML-документах обычно используются относительные ссылки на ресурсы. Например, в ссылке нередко приводится только имя файла. В этом случае предполагается, что его местоположение совпадает с расположением документа, из которого этот файл вызывается. Однако можно явно указать базовый URL-адрес, который будет использоваться во всех случаях применения относительных ссылок. Это делается с помощью тега <base> с атрибутом href, значением которого является базовый URL-адрес:

<base href = "URL-адрес">

Пример:

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

              <html>

              <head>

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

              <title>Использование тега <base></title>

              <base href="http://sevidi.ru/images/">

              </head>

              

              <body>

              <img src="sv1.gif">

              </body>

              </html>

В окне веб-браузера это будет выглядеть ТАК.

В этом примере графическое изображение имеет относительную ссылку (просто имя файла). Если базовый URL-адрес не был бы указан, то браузер искал бы файл sv1.gif в той же папке, где расположен HTML-документ со ссылкой на него. Поскольку базовый URL-адрес задан, то браузер будет искать файл в папке images на узле https://sevidi.ru.

При указании в теге <base> базового URL-адреса относительные ссылки продолжают работать, даже если вы переместите HTML-документ в другую папку. Это обеспечивает определенные удобства с локальной версией HTML-документа в условиях, когда компьютер подключен к сети.

Тег link

Тег <link> предназначен для обозначения связей между документами в больших и сложных по своей структуре узлах. Атрибут href содержит ссылку на другой документ, связанный с текущим. Адрес может быть абсолютным или относительным. Атрибут rel указывает отношения между документами:

home — расположение домашней страницы веб-узла;
next — расположение следующего документа серии, связанного с текущим;
previous — расположение предыдущего документа серии, связанного с текущим;
up — расположение следующего документа вверх по иерархии;
copyright — расположение документа с информацией об авторских правах для данного веб-узла;
stylesheet — расположение файла с таблицей стилей.

Используются также и другие значения для атрибута rel: glossary, help, toc, index, contents. Пример:

<link href="../../sevidi.css" rel="stylesheet" type="text/css">

В одном и том же HTML-документе тег <link> может присутствовать несколько раз.

Тег style

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

Тег script

В контейнерном теге <script> размещается код сценария (скрипт), выполняемый веб-браузером. В одном и том же HTML-документе тег <script> может встречаться несколько раз. При этом они могут размещаться вне тега <head>. Внутри тега <script> не могут находиться теги HTML и правила каскадных таблиц стилей.

Код сценария может быть написан на языке JavaScript или VBScript. Последний понимает только веб-браузер Internet Explorer. Языком по умолчанию является JavaScript. Созданию сценариев на JavaScript посвящен целый раздел сайта. Но обо всем по порядку.

Понравилась статья или раздел сайта - порекомендуйте их друзьям.

Обсудить на форуме

Комментарии(0)

Для добавления комментариев надо войти в систему и авторизоваться
Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться

Вход в Личный кабинет
Ваш логин:	Ваш пароль:

Забыли пароль?

ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Веб-инструмент

Веб-мастерская

Веб-услуги

Веб-графика

Веб-ресурсы