Блиндер буду -:-Основы HTML. Разметка веб страницы.




Разделы сайта

Каталог софта

Как создается сайт

Free hosting

Сервисы сайта

Скачать бесплатно!



Основы HTML. Разметка веб страницы.

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


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

HTML - не является языком программирования, это средство для разметки гипертекстовых документов при помощи символов, называемых тэгами.
Все теги в HTML заключены в символы - ограничители (< и >), между которыми пишется имя тэга, и его параметры.
Большинство тэгов, требуют наличия закрывающего блока(<`/`имя тэга>). Никаких дополнительных параметров, кроме прямого слеша, закрывающие тэги не несут.
Теги, нуждающиеся в закрытии, называются тэгами - контейнерами, а содержимое, между открывающим и закрывающими блоками - содержимым тэга - контейнера.
Браузеры, интерпретируют документ, использующий HTML разметку и в виде web страниц отображают на мониторе.

Структура HTML документа

Структуру HTML документа, можно разделить на следующие разделы:

1. Указание спецификации и типа документа.

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

2. Раздел документа HEAD.

Раздел документа HEAD, определяет заголовок веб страницы. Его задачей является предоставление необходимой информации браузеру.
Все тэги, кроме тэга TITLE, на экране не отображаются. Тэг HEAD является контейнером, в котором размещаются тэг - контейнер TITLE, и тэги META.
В МЕТА тэгах размещается информация браузеру для действий, которые не предусмотрены спецификацией HTML

3. Раздел документа BODY.

В разделе BODY располагается основная содержательная часть документа.
По существу, тег - контейнер BODY, является главным тегом разметки всего документа.
Теги, которые, содержаться внутри этого контейнера, условно делятся на следующие группы:

  1. Тэги уровня блока (block level) - описывают крупные структуры документа.

  2. Теги уровня текста (text level)или последовательные тэги (inline) - определяют оформление внутри структуры документа. В свою очередь, они делятся на:теги логического форматирования и теги физического форматирования.

  3. Теги гипертекста - формы, гиперссылки и рисунки, медиа-содержимое.

Различие уровней тэгов состоит в том, что тэги уровня блока могут содержать в себе не только последовательные тэги но и другие теги уровня блока.
Тэги уровня текста, могут содержать в себе только другие последовательные теги!

Тэги уровня блока.

Определяют компонентную структуру WEB документа. Предназначены для описания крупных структур документа. При разметке, эти тэги пишут с новой строки.

Теги уровня блока.

1. <DIV></DIV> - тег - контейнер, служит для выделения 
фрагмента документа с целью управления параметрами выделенного. 
Управление обычно выполняется с помощью назначения стилей.

2. <H1> и </H1> Заголовок первого уровня.
   <H2> и </H2> Заголовок второго уровня.
   <H3> и </H3> Заголовок третьего уровня.
   <H4> и </H4> Заголовок четвертого уровня.
   <H5> и </H5> Заголовок пятого уровня.
   <H6> и </H6> Заголовок шестого уровня. 

 При использовании этих тэгов осуществляется вставка пустой строки 
до и после заголовка. 
Максимальный размер имеет параметр H1, минимальный - <H6>. 
Требует обязательного закрывающего тэга.

3. <P></P> - таг разделения на абзацы. 
Допускается отсутствие закрывающего тега. 
Браузеры отделяют содержимое контейнера пустой строкой.
 
4. <BLOCKQUOTE></BLOCKQUOTE> - тэг, позволяющий вставить в документ 
длинную цитату. Содержание этого контейнера при отображении отделяется 
от основного текста пустыми строками, и выводится с небольшим отступом 
слева.

5. <PRE></PRE> - отвечает за вывод предварительно отформатированного текста.
Пример использования тегов из данного раздела.

Пример использования тегов из данного раздела.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Пример использования тэгов</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META name="description" content="Как использовать тэги">
<META name="keywords" content="разметка веб страницы, html тэги">
<META http-equiv="Expires" content="Wed, 2 Feb 2007 08:21:57 GMT">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-cache">
<META NAME="Resource-type" content="document">
<meta name="rating" content="General">
<meta name="distribution" content="Global">
<LINK rel="StyleSheet" type="text/css" href="stiles/site.css">
</HEAD>
<BODY>
<h1>
Пример использования тэгов
</h1>
<h2>
Так выглядит параграф
</h2>
<p>
На этом примере можно убедиться в том, что зная несколько  
тегов html можно создать веб документ.
</p>
<h3>
Так выглядит предварительно отформатированный текст
</h3>
<PRE>
Этот текст
       Я отформатировал, как хотел
И сейчас вы видите,
        Что из этого получилось!
</PRE>
<h4>
Цитирование участка документа
</h4>
<BLOCKQUOTE>
Очень большая цитата!!!
</BLOCKQUOTE>
</BODY>
</HTML>

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


Партнеры

Valid HTML 4.01 Transitional