Заголовок документа
В строке 2 находится тег <HTML>, определяющий начало HTML -файла, внутри него хранится заголовок ( <HEAD> ) и тело документа ( <BODY> ). В примере тег <HTML> закрывается на строке 73.
Заголовок документа , как еще называют блок <HEAD>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. В примере заголовок открывается на строке 3 и закрывается на строке 15.
<head>
<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru"/>
<meta name="description" content="Это тестовая страница." />
<meta name="keywords" content="HTML, CSS, DTD, теги" />
<meta name="robots" content="index, follow" />
<title>Тестовая страница</title>
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
<link type="text/css" href="reset.css" rel="Stylesheet" />
<link type="text/css" href="main.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
Как показано в примере, некоторый текст можно скрыть от показа в браузере, сделав его комментарием ( строка 4 ). Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрываемую информацию. Комментарии начинаются тегом <!-- и заканчиваются тегом -->. Все, что находится между этими тегами отображаться на веб-странице не будет.
Метатеги
На строках 4-9 находятся метатеги.
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru"/>
<meta name="description" content="Это тестовая страница." />
<meta name="keywords" content="HTML, CSS, DTD, теги" />
<meta name="robots" content="index, follow" />
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <META> всего один, он имеет множество параметров, поэтому для его обращения применяется множественное число.
Разрешается использовать более чем один метатег, все они размещаются в контейнере <HEAD>. Как правило, параметры любого метатега сводятся к парам "имя=значение", которые определяются аргументами content, name или http-equiv. Метатеги имеют следующие параметры:
-
сontent – устанавливает значение параметра, заданного с помощью name или http-equiv ;
-
http-equiv –браузеры преобразовывают значение параметра http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.
Ниже приведены некоторые допустимые аргументы параметра http-equiv.
-
сontent-type – тип кодировки документа;
-
expires – устанавливает дату и время, после которой информация в документе будет считаться устаревшей;
-
pragma – способ кэширования документа;
-
refresh – загрузить другой документ в текущее окно браузера.
-
name – устанавливает идентификатор метатега для пары "имя=значение". Одновременно использовать параметры name и http-equiv не допускается.
Ниже приведены некоторые допустимые аргументы параметра name.
-
author – имя автора документа;
-
description – описание текущего документа;
-
keywords - список ключевых слов, встречающихся на странице.
Соответственно строка в примере:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
определяет тип кодировки документа.
Строка
<meta http-equiv="Content-Language" content="ru"/>
определяет язык кодировки документа.
Строка
<meta name="description" content="Это тестовая страница." />
определяет описание текущего документа.
Строка
<meta name="keywords" content="HTML, CSS, DTD, теги" />
определяет список ключевых слов, встречающихся на странице.
Строка
<meta name="robots" content="index, follow" />
определяет режим индексирования страницы поисковыми роботами.
В HTML5 применяются упрощенные определения некоторых мета-мегов, например:
<meta charset="UTF-8" />
Заголовок страницы
Тег <TITLE> (строка 10) используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик:
Рисунок 2 – Заголовок страницы
Link
Строки 11-13 содержат тег <LINK>.
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
<link type="text/css" href="reset.css" rel="Stylesheet" />
<link type="text/css" href="main.css" rel="Stylesheet" />
Этот тег устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Тег <LINK> размещается всегда внутри контейнера <HEAD> и не создает "видимую" ссылку.
Параметры:
-
href – путь к файлу, на который делается ссылка (URL), в качестве значения принимается полный или относительный путь к файлу;
-
rel – параметр rel определяет отношения между текущим документом и файлом, на который делается ссылка, чтобы браузер знал, как использовать подключаемый документ. Аргументы:
-
stylesheet – определяет, что подключаемый файл хранит таблицу стилей (CSS);
-
-
application/rss+xml – файл в формате XML для описания ленты новостей, анонсов статей.
-
type – сообщает браузеру, какой MIME-тип данных используется для внешнего документа. Как правило, применяется для того, чтобы указать, что подключаемый файл содержит CSS.
Аргументы – имена MIME-типа в любом регистре. Для подключаемых таблиц связанных стилей применяется тип text/css.
-
media – определяет устройство, для которого следует применять стилевое оформление. Это позволяет сделать разный стиль для отображения документа на экране монитора и при его печати. Допускается писать несколько аргументов через запятую. Аргументы:
-
all – все устройства;
-
screen (значение по умолчанию) – экран монитора;
-
print – печатающее устройство вроде принтера;
-
projection – проектор;
-
braille – устройства, основанные на системе Брайля, которые предназначены для слепых людей;
-
speech – речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
-
Соответственно строка
<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
определяет ссылку на значок нашей страницы:
Рисунок 3 – Значок страницы
Строки
<link type="text/css" href="reset.css" rel="Stylesheet" />
<link type="text/css" href="main.css" rel="Stylesheet" />
определяют подключаемые файлы, содержащие CSS.
В HTML5 указанные строки определяются следующим образом:
<link href="css/style.css" rel="stylesheet"/>
<link href="css/fonts.css" rel="stylesheet"/>
Script
Строка 14 содержит тег <SCRIPT>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Тег <SCRIPT> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML -документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
<SCRIPT> может располагаться в заголовке или теле HTML -документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.
Параметры:
-
defer – откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Этот параметр работает только в браузере Internet Explorer, а в остальных браузерах будет проигнорирован.
-
language – устанавливает язык программирования, на котором написан скрипт.
Параметр language не чувствителен к регистру и может принимать одно из четырех значений: