Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов - тэгов(tags) и их атрибутов. Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов - есть контейнер. Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль. Для создания документа HTML необходимо создать текстовый файл с содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением .htm или .html.

Существует множество простых и сложных программ для написания страниц HTML. В своей основе все они делятся на две категории: программы автоматизирующие вставку тэгов, т.е. редактирующие исходный код и программы, работающие по методу WYSIWYG (What you see is what you get) - что видишь, то и получишь, когда WEB-мастер редактирует визуализированный конечный продукт, не видя исходного кода. Помимо специальных HTML редакторов, не требующих особого знания синтаксиса языка, написание документа, возможно практически всеми стандартными текстовыми редакторами и процессорами, написанными для любых платформ.

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

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

Еще раз остановимся на том, из каких основных этапов состоит процесс создания документа HTML ручками, не прибегая к специализированным приложениям:

* Набор содержимого в любом из текстовых редакторов (например Notepad) и сохранение обычного текстового файла.
* Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением .htm или .html (делается это все в том же Notepad).
* Организация переходов по гиперссылкам документа при помощи элемента < А > - основного связующего элемента языка HTML.
* Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, апплетов Java, скриптов и т.д. и т.п. опять же при помощи тэгов языка HTML.

Для того, чтобы в последствии изменить любой из созданных файлов, достаточно открыть его при помощи того же Notepad откорректировать и сохранить изменения. Браузер Internet Explorer позволяет делать прямо в нем самом, для этого необходимо в меню Вид выбрать просмотр В виде HTML, или кликнуть правой кнопкой мыши и выбрать тот же пункт меню. Для того, чтобы увидеть изменения в документе достаточно в меню Вид выбрать обновить, либо кликнуть в панели управления браузера на значке Refresh

Ниже описаны некоторые версии HTML

* <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 // EN"
"http://www.w3.org/TR/REC-html40/strict.dtd"> Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие кадры.
* <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN"
"http://www.w3.org/TR/REC-html40/loose.dtd"> Документы, использующие такое объявление типа документа, включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.
* <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset // EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd"> Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также кадры.
Ниже для примера приведена выдержка из DTD, описывающая правила задания абзацев текста в документе:
<! ELEMENT P - 0 ( %text ) * >
<! ATTLIST P
align (left|center|right) #IMPLIED>
Отсюда следует, что абзацы текста необходимо заключать в тэги <P> и </P>, причем закрывающий тэг принимает значение "0", следовательно, может быть опущен как необязательный, т.е. наличие в исходном коде начального тэга <P> подразумевает автоматическое завершение предыдущего абзаца. Содержимым абзаца может быть текст любого объема. Атрибутом абзаца является его выравнивание по правому, левому краям или по центру.

Синтаксис: <HTML> текст и прочие дескрипторы </HTML>
А уже непосредственно документ, обозначенный тэгами <HTML> и </HTML> дополнительно делится на голову - <HEAD></HEAD> и тело - <BODY></BODY>

Общая схема исходного кода документа HTML
<! DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.2 // EN ">
<HTML>
<HEAD>
служебные дескрипторы
</HEAD>
<BODY>
текст и прочие дескрипторы
</BODY>
</HTML>

Здесь протокол соответствует схеме извлечения данных Internet, например, HTTP, a имя сервера соответствует имени или IP-адресу сервера, например, www.microsoft.com, путь определяет расположение ресурса в иерархии каталогов предыдущего сервера. Путь является необязательным компонентом указателя URL. Если протокол и имя сервера будут опущены, то указатель по умолчанию будет относиться к текущему серверу. Это очень полезный элемент он избавляет разработчика от необходимости вносить множественные коррективы в ссылках исходного кода документа, например, при размещении копии документа на другом сервере. Достаточно лишь вставить в заголовок копии элемент <BASE> с именем прежнего сервера и тогда целый узел будет отзеркален лишь копией одного файла, а ссылки будут адресоваться по прежнему адресу.

* href
Указатель URL связанного документа.
* rel
Атрибут указывает как связаны документы с заданным атрибутом href . Ему могут быть присвоены значения Present, History, Made, Annotation и Precede .
Например: <LINK rel=Annotation href="annotations.html">
означает, что все аннотации для текущего документа расположены в файле annotations.html.
* rev
Атрибут во многом похож на rel ему могут быть присвоены те же значения.
Например: <LINK rev=Annotation href="master.html">
означает, что текущий документ содержит аннотации к файлу master.html.
* title
Атрибут относится к href и задает название документа, на который ссылается href .Естественно, что значение атрибута должно соответствовать значению дескриптора <TITLE>.
* name
Позволяет назначить ссылке на фрагмент текущего документа более описательное имя.
* methods
Позволяет указать метод извлечения документа, например, FTP, Gopher и т. д.
* lang
Позволяет указать информацию о языке документа, например: ru, en, fr.
* target
Позволяет указать информацию о целевом фрейме.
* charset
Позволяет указать кодировки символов документа.

В настоящее время элемент <LINK> используется только для ссылок на внешние таблицы стилей.
Например: <LINK rel=stylesheet href="style.css" type="text/css">
,где style.css файл, который содержит набор дескрипторов <style> и любые другие определения таблицы стилей.

Другими словами атрибут name используется с целью предоставления сведений о документе, которые могут пригодиться при его поиске, а элемент http-equiv поручает выполнение каких либо действий серверу .
Например: <META HTTP-EQUIV="Window-target" CONTENT="_top">

Использование элемента http-equiv со значением "refresh" позволяет организовать принудительное обновление страницы с некоторым промежутком времени или загрузку нескольких страниц с определенным интервалом, что незаменимо при создании страниц, где публикуются непрерывно меняющиеся данные (скажем курсы валют или акций). Значение элемента content в этом случае означает промежуток между обновлениями в секундах, так если оно равно нулевому значению - страница будет обновляться непрерывно.

* <META HTTP-EQUIV="Refresh" content="5;URL=http://www.arcus.lv/dimas/index.html">
Перезагрузка документа.
* <META HTTP-EQUIV="Expires" content="Дата">
Дата, обозначающая срок годности документа, при его значении равном "0" документ будет подгружаться не из кэша а с сервера.
* <META HTTP-EQUIV="Reply-to" content="Имя@Адрес">
Адрес электронной почты .
* <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">
Описание типа и характеристик документа.
* <META HTTP-EQUIV="Content-language" content="en">
Описание языка документа.
* <META HTTP-EQUIV="Cache-Control" content="no-cache">

* Может принимать значения: no-store - не сохраняется.
* no-cache - не сохраняется в кэш.
* Public - доступен для любого кэширования.
* Private - кэшируется в частных кэшах.

# <META HTTP-EQUIV="Window-target" content="_top">
Определяет способ появления новых окон браузера.
# <META HTTP-EQUIV="pragma" content="no-cache">
Контроль за кэшированием документа.
# <META HTTP-EQUIV="Set-Cookie" content="NAME=имя;EXPIRES=дата; DOMAIN=имя домена;PATH=путь;SECURE">

* имя - любая строка без запятых, пробелов и переходов на след.стр. (обязательный парaметр)
* дата - дата истечения срока хранения в формате: Sun, 25-Feb-01 12:00:01 GMT , если не задан, то cookie не сохраняется (необязательный парaметр)
* имя домена - домен для которого действительно значения cookie , если не задан, то тот сервер, где лежит сайт (необязательный парaметр)
* путь - путь к документам домена, для которого действительно значения cookie, если не задан, тогда тот каталог, где лежит сайт (необязательный парaметр)
* SECURE -указывается только тогда, когда применяется защищенный режим SSL, если не задан, тогда информация передается в обычном режиме (необязательный парaметр)

Установка Cookie для браузера в том случае, когда надо сохранить информацию в компьютере посетителя и при необходимости к ней обратиться.
Работает так:
Браузер, встретив такую конструкцию, записывает файл .txt с данными ввиде имя/значение и хранит в кэше, в следующий раз он сверяет все свои cookie на предмет полного совпадения, и если находит, то отсылает серверу как HTTP заголовок. Конечно, в настройках cookie должны быть разрешены, каждый cookie не может превышать 4 kB (если больше, то отсекается кусок вначале записи) всего их может храниться до 300, причем с одного сервера не больше 20 (если больше, то последние пишутся поверх первых)
* <META name="Author" content="Имя автора">
Имя автора документа.
* <META name="Keywords" lang="ru" content="Слово1,слово2,слово3 ...">
Набор ключевых слов для поиска.
* <META name="Title" content="Название">
Название станицы.
* <META name="Robots" content="index,nofollow">
Указание индексации поисковыми роботами данного документа
o Может принимать значения: ALL - индексировать всё.
o INDEX - индексировать эту страницу.
o FOLLOW - индексировать ссылки на этой странице.
o NONE - не индексировать, игнорировать полностью.
o NOINDEX - не индексировать, игнорировать эту страницу.
o NOFOLLOW - не индексировать ссылки на этой странице.
* <META name="Description" content="Содержание">
Краткое однострочное описание содержания документа.
* <META name="Document-state" content="Dynamic">
Определяет единовременную либо постоянную индексацию документа поисковыми системами.
o Может принимать значения: Static - индексировать единожды.
o Dynamic - индексировать многократно.
* <META name="Generator" content="Название">
Название приложения, в котором был создан документ.
* <META name="Copyright" content="Условия">

Применение дескрипторов <STYLE> и </STYLE> само по себе является отдельным способом форматирования документа, когда текст форматируется целиком автоматически. Между дескрипторами <STYLE> и </STYLE> указывается описание стилей документа HTML, определяющих свойства элементов, классов, идентификаторов и общих стилей. Внутри дескриптора <STYLE> должны находиться атрибуты:

* TYPE
Атрибут описывает тип таблиц стилей.
Например: <STYLE TYPE="text/javascript">
* media
Позволяет указать информацию о том под какое из устройств вывода стилизован документ, например:
o screen
Указывает на экраны компьютеров, не разделенные на страницы.
o tty
Указывает на носители с фиксированной сеткой для символов, таких как телетайпы, терминалы или переносные устройства с ограниченными возможностями отображения.
o tv
Указывает на устройства типа телевизора (низкое разрешение, цвета, ограниченные возможности прокрутки).
o projection
Указывает на всевозможные проекторы.
o handheld
Указывает на карманные устройства (небольшой экран, монохромный, растровая графика, ограниченный диапазон).
o print
Указывает на страничные, непрозрачные материалы и документы, просматриваемые на экране в режиме предварительного просмотра печати.
o braille
Указывает на тактильные устройства с алфавитом Бройля (для незрячих).
o aural
Указывает на синтезаторы речи.
o all
Указывает на все устройства используется в случае, если разработчик предоставляет различные варианты с возможностью выбора.

* BACKGROUND
Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Файл с изображением должен быть сохранен в формате GIFилиJPEG .
Синтаксис: <BODY BACKGROUND="(URL)(путь) имя файла">
В данном случае файл с изображением фона лучше размещать в том же каталоге, что и сам файл, тогда (URL) и (путь) указывать не нужно.
* BGCOLOR
Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов RGB , или при помощи строчного литерала, соответствующего названию цвета.
Синтаксис: <BODY BGCOLOR="#ff0000"> или <BODY BGCOLOR="RED">
* TEXT
Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссылкой. По умолчанию такой текст будет черным.
Синтаксис: <BODY TEXT=" цвет ">
* LINK
Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим.
Синтаксис: <BODY LINK="цвет" >
* ALINK
Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам.
Синтаксис: <BODY ALINK="цвет" >
* VLINK
Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута LINK по понятным причинам.
Синтаксис: <BODY VLINK="цвет" >
* BGPROPERTIES
Этот атрибут задает свойства фонового изображения. В данный момент браузерами поддерживается единственное его значение fixed, запрещающее скроллинг изображения.
Синтаксис: <BODY BGPROPERTIES="fixed" >
* TOPMARGIN
Этот атрибут задает верхнюю границу страницы в пикселях.
Синтаксис: <BODY TOPMARGIN=число >
* BOTTOMMARGIN
Этот атрибут задает нижнюю границу страницы в пикселах.
Синтаксис: <BODY BOTTOMMARGIN=число >
* LEFTMARGIN
Этот атрибут задает границу страницы в пикселях слева.
Синтаксис: <BODY LEFTMARGIN=число >
* RIGHTMARGIN
Этот атрибут задает границу страницы в пикселях справа.
Синтаксис: <BODY RIGHTMARGIN=число >