Итак, мы изучили технологию создания 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=windows-1251">
<title>Документ</title>
</head>
<body>
</body>
</html>
HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head>) и содержательной части (между тегами <body> и </body>).
Множество всех тегов HTML можно разбить на следующие группы:
Кратко рассмотрим основные теги этих групп.
Во многих 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 — определение типа документа):
Раздел HEAD содержит техническую информацию о странице — заголовке, ее описание и ключевые слова для поисковых машин, данные об авторе и времени создания страницы, базовом адресе страницы и т.д. и расположен в контейнерном теге <head>. В этом теге размещаются также следующие теги:
Информация, содержащаяся в тегах <meta>, не отображается веб-браузером, однако имеет важное значение. Если текст между тегами <title>и</title>используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой:
Где,
description— описание документа. Один из наиболее важных параметров. Информация, содержащаяся в нем, влияет на результаты поиска, осуществляемого поисковыми системами
Пример:
<meta name="description" content="Основы HTML. Основные понятия. Первый HTML-документ ">
Где,
keywords — ключевые слова, Набор слов и фраз, наиболее полно характеризующий данный документ, который является основным критерием поиска вашего документа поисковыми системами. В конечном счете, эти слова учитываются при выдаче результатов поиска и способствуют повышению рейтинга сайта.
Пример:
<meta name="keywords" content="Основы HTML, основные понятия, первый HTML-документ ">
Кроме того, тег <meta> позволяет запретить или разрешить индексацию веб-страницы поисковыми машинами:
<meta name="robots" content=" <Индексация>, <Переход по ссылке>">
В параметре contentуказывается комбинация следующих значений:
Примеры:
Индексация и переход по ссылкам разрешены:
<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=windows-1251"
meta http-equiv= "Content-Type" content="text/html; charset=windows-1251">Для автоматической перезагрузки страницы через заданный промежуток времени используется свойство refresh:
<meta http - equiv = "refresh" content = "30">
В этом примере страница будет перезагружена через 30 секунд. Если необходимо перенаправить пользователя на другую страницу, то указывается URL-адрес страницы:
<meta http - equiv = "refresh" content = "30, http://www.microsoft.com">
Здесь указано, что спустя 30 секунд произойдет перезагрузка страницы по указанному адресу.
Автоматическую периодическую перезагрузку документа обычно устанавливают в случиях часто обновляемых данных (котировки акций на фондовом рынке, например).
Для управления частотой индексации документа поисковыми серверами используется параметр document-state.
Где,
static — документ статичен, т.е. не меняется, и следовательно, индексировать его нужно только один раз.
Где,
dynamic — значение для часто изменяющихся документов, которые нужно реиндексировать.
<meta name= "resource-type" content = "document"> — определяет тип ресурса. Для обычных HTML-документов значение этогго параметра устанавливается равным "document".
<meta name= "updated" content = "29.06.09">— определяет дату обновления страницы.
<meta name= "URL" lang = "ru" content = "http://sevidi.narod.ru">— определяет какой документ следует индексировать (чтобы не обрабатывать зеркала).
Где URL— базовый URL-адрес.
<meta name= "AUTHOR" content = "имя автора">— определяет имя автора данного документа.
В 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=windows-1251">
<title>Использование тега <base></title>
<base href="http://sevidi.narod.ru/images/">
</head>
<body>
<img src="sv1.gif">
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
В этом примере графическое изображение имеет относительную ссылку (просто имя файла). Если базовый URL-адрес не был бы указан, то браузер искал бы файл sv1.gif в той же папке, где расположен HTML-документ со ссылкой на него. Поскольку базовый URL-адрес задан, то браузер будет искать файл в папке imagesна узле http://sevidi.narod.ru.
При указании в теге <base> базового URL-адреса относительные ссылки продолжают работать, даже если вы переместите HTML-документ в другую папку. Это обеспечивает определенные удобства с локальной версией HTML-документа в условиях, когда компьютер подключен к сети.
Тег <link> предназначен для обозначения связей между документами в больших и сложных по своей структуре узлах. Атрибут href содержит ссылку на другой документ, связанный с текущим. Адрес может быть абсолютным или относительным. Атрибут rel указывает отношения между документами:
Используются также и другие значения для атрибута rel: glossary, help, toc, index, contents.
Пример:
<link href="../../sevidi.css" rel="stylesheet" type="text/css">
В одном и том же HTML-документе тег <link> может присутствовать несколько раз.
В контейнерном теге <style> размещаются правила каскадных таблиц стилей, определяющих внешний вид и позиционирование элементов HTML-документа. Более подробно каскадные таблицы стилей будут рассмотрены далее. В одном и том же HTML-документе тег <style>может встречаться несколько раз. При этом они могут размещаться вне тега <head>.
В контейнерном теге <script> размещается код сценария (скрипт), выполняемый веб-браузером. В одном и том же HTML-документе тег <script>может встречаться несколько раз. При этом они могут размещаться вне тега <head>. Внутри тега <script>не могут находиться теги HTML и правила каскадных таблиц стилей.
Код сценария может быть написан на языке JavaScript или VBScript. Последний понимает только веб-браузер Internet Explorer. Языком по умолчанию является JavaScript. Созданию сценариев на JavaScript посвящен целый раздел сайта. Но обо всем по порядку.
Веб-инструмент
Обсудить на форуме