Структура HTML документа
Существуют общие правила записи HTML документа используемые при общие правила записи HTML документа используемые при создании сайта. Для создания веб-страниц используется язык гипертекстовой разметки HTML . Рассмотрим по порядку.
Элемент . Основной языка HTML документа является элемент. Он несет определенную информацию, может описывать документ в целом или способ форматирования текста. Все что вы захотите создать на странице сайта, будет сделано с помощью элементов. Название элемента помещается в угловые скобки, например <P> . Полученное выражение называется тегом. В данном случае это открывающий тег, который записывается так: </P> . В основном парные теги используются при форматировании текста, они задают начало и конец блока форматирования. Иногда закрывающий тег вообще не требуется, а иногда его можно вообще пропустить, однако для корректной обработки документа рекомендуется всегда использовать закрывающий тег.
Кратко функции данных тегов можно описать так: открывающий тег включает форматирование, а закрывающий выключает. Основным отличием в записи тегов, кроме постановки символа / в закрывающем теге, является отсутствие атрибутов у последнего.
Примером необходимости использования закрывающего тега является работа с элементом P, который обозначает абзац: <p>Текст абзаца</p> . Элементы применяются для того, что бы сообщить браузеру, какой блок вы хотите видеть в определенном месте страницы, и какую информацию этот блок должен содержать. Кроме того, браузеру нужно сообщить как отображать эту информацию. Для этого используют атрибуты элементов.
Атрибут. С помощью атрибутов можно указывать различные способы отображения информации, добавляемой с помощью одинаковых элементов, а в некоторых случаях применение элемента без атрибутов не дает результата. Например, в одном абзаце нужно выровнять текст по левому краю, а в другом – по правому. Что бы задать выравнивание абзаца, используем атрибут align элемента P:
<p align=”left”>Выравнивание по левому краю</p>
<p align=”right”>Выравнивание по правому краю</p>
Значение атрибутов задаются после знака равенства в кавычках и могут быть разными. Некоторым атрибутам присущий набор фиксированных значений, для других количество значений не ограничено. Элементы и их атрибуты являются основой языка HTML.
Структура HTML-документа. Для создания структуры документа и хранения служебной информации в нем предусмотрено множество элементов. Пример:
<!DOCTYPE html> <!– Объявление формата документа –>
<html> <!–является корневым элементом.–>
<head> <!– Техническая информация о документе –>
<meta charset=”UTF-8″> <!– Кодировка символов документа –>
<title>…</title> <!– Заголовок документа –>
<link rel=”stylesheet” type=”text/css” href=”style.css”> <!– Подключение таблиц стилей –>
<script src=”script.js”></script> <!– Подключение сценария –>
</head>
<body> <!– Основная часть документа –>
</body>
</html>
Пример – дерево документа, объектная модель документа DOM (document object model).
Объявление типа документа. В начале HTML-документа следует помещать строку объявления: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Эта строка дает браузеру общую информацию об HTML-документе. Рассмотрим по частям и выясним, какую информацию о документе несут данные.
Элемент <html> . Корневой элемент документа, содержащий внутри все элементы. Что находится за пределами элемента <html>Документ</html> не обрабатывается браузером.
Элемент <head> . Содержит другие элементы, несущие служебную информацию о странице. Элементы находятся внутри элемента <head>другие элементы</head> , сообщают браузеру для обработки страницы, а поисковым система – в индексации документа.
Элемент <title> . Задает название страницы, которое отображается в строке заголовка окна браузера. Основная функция рассказать посетителю о чем страница. Поисковые системы используют текст, содержащий в элементе <title> для поиска, и выводят в качестве результата поиска.
Элемент <meta> . Используется для хранения дополнительной информации о странице. Элемент <head> может содержать несколько элементов <meta>, потому что они несут различную информацию. С помощью элемента <meta> можно запретить или разрешить индексацию веб-страниц. Примеры :
<meta name=”description” content=”Описание содержимого страницы”>
<meta name=”robots” content=”index, follow”> <!– Индексация и переход по ссылкам разрешены –>
<meta name=”robots” content=”index, nofollow”> <!– Индексация разрешена, переход по ссылкам запрещен –>
<meta name=”robots” content=”noindex, nofollow”> <!– Индексация и переход по ссылкам запрещены –>
Элемент <style> . Внутри элемента задаются стили, которые используются на странице. Элементов на странице может быть несколько. Для задания стилей в HTML применяется язык CSS.
Элемент <link> . Определяет отношения между текущей страницей и другими документами. Элементов на странице может быть несколько.
Атрибуты:
type – задает параметры объекта, с которым определяется связь.
href– основной атрибут элемента указывающий путь к объекту где он расположен.
Элемент <script> . Позволяет присоединять к документу сценарии. Текст сценария может располагаться либо внутри элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента script .
Элемент <body> . Внутри элемента <body> располагается документ, все элементы и содержимое отвечающие за форматирование документа.