Ирина Эланс

Автор который поможет с любыми образовательными и учебными заданиями

Основные структуры HTML-документа

Оглавление

Понятие тэга и элемента

HTML – язык гипертекстовой разметки документов. HTML- документ является простым текстовым файлом, который содержит текст и текстовые HTML-теги. Тэг (дескриптор) - специальный код, вставляемый в текст для форматирования элементов HTML-документа. Это основной элемент кодирования, принятый в стандарте HTML. Тэг заключаются в угловые скобки <>. Например, тэгом абзаца является <P>, а тэгом горизонтальной линии - <HR>.

Существует два типа тэгов: контейнеры и одиночные тэги.

Контейнер. Это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) тэгов. Начальный тэг имеет вид <TAG>, где TAG - это имя реального HTML - тэга. Конечный тэг имеет вид </TAG>. Контейнеры предназначены для хранения некоторой информации, например текста или других HTML - тэгов. Поэтому между начальным и конечным тэгами заключено содержимое контейнера. Например, элемент, представляющий собой отформатированный текст, заключается между тэгами <PRE> и </PRE>.

Пустой дескриптор (одиночные теги). Отличается от контейнера тем, что не содержит никакой информации. У него есть только начальный тэг. Пустой дескриптор обычно выполняет самостоятельную задачу, не связанную с конкретным текстом. Например, тэг <HR> создаёт горизонтальную линию.

Язык HTML не чувствителен к регистру. Тэги могут набираться как прописными, так и строчными буквами, т.е. команда <title> эквивалентна команде <TITLE> или <TiTlE>. Не все тэги поддерживаются всеми браузерами. Если браузер не поддерживает тэг, он его просто игнорирует.

Границы документа

Самым главным из тэгов HTML является одноименный тэг <HTML>. Он должен всегда открывать документ, также как тэг </HTML> должен обязательно стоять в последней его строке. Эти тэги означают, что находящиеся между ними строки представляют собой единый HTML документ. Это важно, так как сам по себе документ является обычным текстовым файлом ASCII. Без этих тэгов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.

Основные разделы HTML-документа

Любой HTML-документ состоит из трех основных секций:

строки, содержащей декларацию типа документа (идентификатор применяемого стандарта HTML);
заголовка документа (заключенного в теги <HEAD>…</HEAD>);
тела документа (заключенного в теги <BODY>…</BODY> или <FRAMESET>…</FRAMESET>);

Пример простого HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HTML>

<HEAD>

<TITLE>Мой первый HTML-документ</TITLE>

</HEAD>

<BODY>

<P>Это HTML-документ.</P>

</BODY>

</HTML>

Идентификатор применяемого стандарта

Рекомендуется начинать любой HTML-документ со строки, содержащей декларацию типа документа (DTD, document type declaration). Стандарт прописывается первой строкой до тега <html>. Указание типа документа чувствительно к регистру. Язык HTML 4.0 поддерживает три типа таких стандартов:

Документ строго соответствует стандарту HTML 4.0, т. е. не содержит ни морально устаревших элементов, ни фреймов. Декларация имеет вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Документ является переходным к стандарту HTML 4.0, т. е. может содержать морально устаревшие элементы. Декларация имеет вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Документ содержит фреймы. Декларация имеет вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

Первый тег <!DOCTYPE> со всеми его параметрами и является тем самым идентификатором, который сообщает браузеру, какая именно версия HTML была использована для создания данной Web-страницы. Эта достаточно громоздкая и непонятная конструкция на самом деле является пришельцем из языка более высокого уровня XML. Подразумевается, что в будущем браузеры смогут работать одновременно как с обычными Web-страницами, написанными на языке ХМL так и с HTML-документами. Поэтому с расчетом на это самое светлое будущее и используется данный тег-идентификатор. Точная дата наступления этого светлого будущего, как обычно, неизвестна, поэтому очень часто данным идентификатором пренебрегают без каких-либо последствий. Но предусмотрительность, как известно, лучше, чем .непредусмотрительность, поэтому идентификатор лучше все-таки использовать.

Заголовок документа

Заголовок документа не является обязательным элементом, однако хорошо составленный заголовок может быть весьма полезен. Задачей заголовка документа является предоставление информации для программы, интерпретирующей документ. Элементы, находящиеся внутри раздела HEAD (кроме названия документа, записываемого в разделе TITLE), не видны на экране. Заголовок документа, заключенный в элемент HEAD, содержит:

тег, отображающий наименование данной Web-страницы,
тег, стилевого оформления Web-страницы,
тег выполняемого сценария
метаописатели документа

Синтаксис тега заголовка: <HEAD>…</HEAD> (оба тега не обязательны)

Атрибуты: lang, dir

profile = URI (URI словаря метаданных)

1. Титул документа: элемент TITLE

Раздел TITLE является единственным обязательным элементом заголовка документа и служит для того, чтобы дать документу название. Оно обычно показывается в заголовке окна браузера. Содержимое раздела TITLE нельзя путать с названием файла документа. Оно представляет собой текстовую строку, совершенно не зависящую от имени и местоположения файла. Имя же файла жестко определяется операционной системой того компьютера, на котором храниться.

Синтаксис тега : <TITLE> и </TITLE>

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

В принципе название может иметь любую длину и содержать любые символы, кроме некоторых зарезервированных. На практике лучше ограничиться одной строкой, имея в виду, что название появляется в заголовке окна браузера. Также следует помнить о том, что останется от названия документа при сворачивании окна браузера. Поэтому надо стараться поместить наиболее важные слова в начало названия.

2. Метаописатели документа: элемент META

Для правильного отображения страницы мы должны задать в какой кодировке написан наш документ. Для этого добавляет строку

Здесь мы указываем стандартную кодировку windows-1251. Конечно, указать это мало, необходимо, чтобы сам документ был набран в этой кодировке. Также стандартной является кодировка utf-8 (Юникод, поддерживает расширенный набор символов).

Синтаксис тега: <META> (содержимого и конечного тега нет)

Атрибуты: name, lang

Элемент META содержит метаописатели таких свойств документа, как имя автора документа, его описание, ключевые слова и т. д.

Каждый элемент META содержит пару атрибутов: название свойства (name) и значение свойства (content), например, следующий мета тег задает имя автора документа:

Дополнительно он может содержать атрибут lang, указывающий язык, на котором написано значение свойства:

Многие поисковые системы используют свойства description (описание документа) и keywords (ключевые слова) для извлечения дополнительной информации о документе. При этом описание должно быть кратким (не длиннее 200 символов), а список ключевых слов разделяться запятыми:

Некоторые поисковые системы поддерживают также свойство robots, содержащее указания для роботов, собирающих информацию о документах в Сети. Например, следующий метаописатель указывает поисковым роботам, что данный документ индексировать не нужно, но гиперссылки, которые в нем содержаться, следует просмотреть.

3. Базовый URL документа: элемент BASE

Синтаксис тега: <BASE> (содержимого и конечного тега нет)

Элемент BASE задает в обязательном атрибуте href базовый URL для данного документа, который используется обозревателем для приведения относительных URL к полным.

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

когда документ хранится в нескольких узлах Сети, и мы хотим указать "эталонное" хранилище;
когда URL документа неизвестен (например, при его получении по электронной почте).

Рассмотрим пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<HTML>

<HEAD>

<TITLE>Наша продукция</TITLE>

</HEAD>

<BODY>

<P>Лучшие в мире <A href="../images/hornhoof.gif">рога и копыта</A>!

</BODY>

</HTML>

С учетом базового URL ссылка "../images/hornhoof.gif" в этом примере соответствует полному URL "http://www.bestseller.com/images/hornhoof.gif".

4. Внутренние таблицы стилей: элемент STYLE

Синтаксис: <STYLE>…</STYLE>

Атрибуты: lang, dir

type = тип файла (тип таблицы стилей)

media = устройства (устройства для отображения документа)

title = текст (титул таблицы стилей)

Элемент STYLE позволяет включать в документ внутренние таблицы стилей. Заголовок документа может содержать любое количество этих элементов. Старые обозреватели не поддерживают элементы STYLE, поэтому рекомендуется заключать содержимое элемента STYLE в комментарий, как показано ниже.

Обязательный атрибут type указывает на тип таблицы стилей, т. е. на язык, на котором описываются стили. Для каскадных таблиц стилей этот атрибут всегда должен иметь значение "text/css".

Пример:

<HEAD>

<!--

H1 {border-width: 1; border: solid; text-align: center}

-->

</STYLE>

</HEAD>

<BODY>

<H1>Этот заголовок имеет указанный выше стиль</H1>

</BODY>

HTML позволяет авторам создавать документы, учитывающие особенности устройств, на которых документ будет отображаться. Для того, чтобы использовать разные таблицы стилей для различных устройств, в элемент STYLE включается атрибут media:

<!--

H1 {color: blue}

-->

</STYLE>

<!--

H1 {text-align: center}

-->

</STYLE>

Тело документа

Тело документа (элемент body) содержит визуальную информацию, т.е. ту, что будет непосредственно отображаться в окне браузера.

Синтаксис: <BODY>…</BODY> (оба тега не обязательны)

Тело документа содержит HTML-элементы, предназначенные для отображения обозревателем. Тело заключается в теги <BODY>…</BODY>

Таким образом, структура любой Web- страница выглядит следующим образом:

<!DOCTYPE HTML PUBLIC "-//W3C'//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

Заголовок документа

</head>

<body>

Тело документа

</body>

</html>

Тег <body> может содержать дополнительные параметры.

1) Параметр bgcolor позволяет задавать цвет фона, на котором будет отображаться содержимое Web-страницы. Например, если мы хотим использовать зеленый фон, то мы должны использовать следующую конструкцию: <body bgcolor="green">

2) Параметр background позволяет использовать в качестве фона какое-либо графическое изображение. Значением параметра является адрес этого изображения, т. е. его URL.

3) Параметр text задает цвет шрифта, которым будет отображаться текстовое содержимое Web-страницы.

4) Параметр link позволяет устанавливать цвет, которым будут отображаться в окне просмотра браузера текстовые гиперссылки, внедренные в содержимое Web-страницы.

5) Параметр viink задает цвет гиперссылок, которые пользователь уже проходил в текущем сеансе работы.

6) Параметр aiink указывает, какой цвет будет использоваться для отображения гиперссылок, выделенных пользователем.

7) Параметр lang указывает, на каком языке написано текстовое содержимое Web-страницы. В качестве значения используются кодовые двухбук-венные обозначения языков, приведенные в документе RFC 1766. На самом деле, нам не надо знать все эти обозначения. В подавляющем большинстве случаев мы будем использовать русский или английский язык. Их коды: "гu" и "en" соответственно.

Включение комментариев

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

Элемент Address

Элемент ADDRESS является одним из важнейших элементов HTML. Он служит для идентификации автора документа и (по желанию) для указания адреса автора. Сюда же обычно помещаются сведения об авторских правах. Этот элемент располагается либо в начале, либо в самом конце документа.

Элемент ADDRESS состоит из текста, помещенного между тэгами <ADDRESS> и </ADDRESS>. Текст, заключенный между этими тэгами обычно показывается в окне браузера курсивом.

Список использованной литературы

А.А. Дуванов. Строим сайт с «нуля»
http://webach.com/barebones- Кратное руководство по HTML
А. Зиза «Поисковая оптимизация сайта. От простого к сложному»
http://www.sute-creator.ru
С.Великов. Справочник по HTML 4.0

Основные структуры HTML-документа 📙 Курсовая → 🆔 161916