Все об HTML
Прислано Pretich January 06 2016 07:26:14

Структура HTML-документа. Начинаем работу

 

С чего начинается HTML

 

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":

 

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так:

 

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

 

Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2 (это проверенная, но очень старая версия). Как видно из примера, самый короткий html-документ состоит буквально из одной строки.

 

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

 

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

 

С чего начинается работа

 

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

 

Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Текст документа
</BODY>
</HTML>

 

Если приведенный выше пример пояснить схематически, получится следующее:

 

Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

 

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

 

Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>

 

<!-- -->

 

(HTML 1.0) – Comment ()

 

Используется для создания комментариев в любой части документа. Все, что находится внутри <!-- -->, будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран).

Пример:

 

<HTML>

...

<!-- Начинаем чуткую работу с телом документа -->

<BODY>

<!-- Всталяем табличку с прайс-листом -->

...

</BODY>

<!-- Все. Готово -->

</HTML>

 

Примечания:

 

Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег <!-- --> внутри TITLE не действует.

Не ленитесь комментировать все, что написали. Это волшебное правило сэкономит вам немало времени при попытке разобраться в собственном творении пару месяцев спустя.

 

Листаем далее...

 

:)

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

 

 

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

 

Элементы, относящиеся к заголовку документа

 

HEAD

Определяет начало и конец заголовка документа

 

Пример:

 

<HTML>
<!-- Начинаем заголовок... -->
<HEAD>
<title>Справочник по HTML</title>
</HEAD>
<!-- ...кончили. Дальше пошло тело документа -->
<BODY>
Текст документа
</BODY>
</HTML>


 

TITLE

Определяет имя всего документа, которое отображается в заголовке окна браузера

 

Пример:

 

...
<HEAD>
<TITLE>Руководство по эксплуатации</TITLE>
</HEAD>
...

 

Примечания:

 

Комментарии, расположенные внутри элемента TITLE (как, впрочем, и любые другие теги) трактуются как текст и будут видны в заголовке окна. Иначе говоря, тег <!-- --> внутри TITLE не действует.

 


 

BASE

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

 

Атрибуты

 

HREF - определяет базовый адрес (URL) текущего документа.

 

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

 

Пример:

 

<HEAD>
<!-- Пусть браузер думает, что находится по адресу : -->
<BASE href="http://www.igf.ru/other/index.html">
<TITLE>Руководство по эксплуатации</TITLE>
</HEAD>
...
<!-- А теперь создадим относительную ссылку на документ -->
<!-- http://www.igf.ru/list.html -->
<A href="../list.html">Список</A>
...

 


 

STYLE

Используется для вставки в документ таблицы стилей CSS

 

Атрибуты

 

TYPE - обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".

 

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

 

Пример:

 

<HEAD>
<TITLE>Пример использования таблицы стилей</TITLE>
<!-- Втыкаем табличку стилей -->
<STYLE TYPE="text/css" TITLE="Cool table">
<!--
A {text-decoration : none;}
P {color : blue; font-size : 12pt; font-family : Arial;}
H1 {color : red; font-size : 18pt;}
--></font>
</STYLE>
<!-- ... кончили втыкать -->
</HEAD>

 


 

LINK

Описывает взаимосвязь документа с другими объектами

 

Атрибуты

 

HREF - определяет URL объекта.

 

REL - определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:

 

stylesheet - указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и применит его к текущему документу (см. также элемент STYLE)

home - указывает на заглавную страницу вашего сайта

toc, contents - указывают на файл, содержащий оглавление данного документа.

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

glossary - указывает на файл, содержащий перечень терминов, относящихся к текущему документу.

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

up, parent - указывает на "родительскую" страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).

child - указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).

next - указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).

previous - указывает на предыдущую страницу в последовательности документов. last, end - указывает на последнюю страницу в последовательности документов. first - указывает на первую страницу в последовательности документов. help - указывает на страницу с подсказкой (напр. по навигации по вашему сайту).

 

TYPE - определяет MIME-тип для объекта, указанного в атрибуте HREF.

 

Пример 1

 

<HEAD>
<TITLE>Элемент DIV</TITLE>
<LINK REL="HOME" TITLE="HTML-справочник" href="index.html">
<LINK REL="UP" TITLE="Текстовые блоки" href="textblocks.html">
<LINK REL="PREVIOUS" TITLE="Элемент P" href="p.html">
<LINK REL="NEXT" TITLE="Элемент ADDRESS" href="address.html">
</HEAD>

 

Пример 2

 

<HEAD>
<TITLE>Полдневье</TITLE>
<LINK REL="stylesheet" TYPE="text/css" href="deco1.css">
</HEAD>

 

Примечание

 

Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта - эта информация интересна только индексирующим роботам поисковых систем.

 


 

META

Используется для вставки метаданных. Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.

 

Атрибуты

 

NAME - определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.

HTTP-EQUIV - определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.

CONTENT - присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV).

 

Пример:

 

<HEAD>
...
<META HTTP-EQUIV="Expires" CONTENT="Sat, 26 Jun 1999 17:38:15 GMT">
<META NAME="GENERATOR" CONTENT="Greenback">
<META NAME="Publisher-Email" CONTENT="green@igf.ru">
<META NAME="Publisher-URL" CONTENT="Idea GraFix &amp;#150; http://www.igf.ru/">
<META NAME="Keywords" CONTENT="OpenGL,3D,graphics,3Dfx,Permedia,Diamond,графика">
<META NAME="Description" CONTENT="Российский сайт, полностью посвященный 3D-графике, ее разработке и использованию.">
...
</HEAD>


 

 

Читаем далее...

 

:)