Основные положения

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

Например, HTML редакторы, такие, как «Netscape Navigator Gold» компании Netscape позволяют
создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

Основные положения

Все тэги HTML начинаются с «<» (левой угловой скобки) и заканчиваются символом «>» (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-броузеру об использовании формата заголовка, а тэг </TITLE> — о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

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

<title> Заголовок документа </title>

Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-броузером при интерпретации документа. HTML-документ может включать вышеописанные элементы только если они помещены внутрь тэгов <PRE> и </PRE>. Более подробно о тэгах <PRE> будет написано ниже.

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

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML> …тело документа… </HTML>


Заголовочная часть документа <HEAD>

Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>
<HEAD>
<TITLE> Список сотрудников </TITLE>
</HEAD>

Внимание! Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.


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

Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.


Комментарии

Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария:

<!-- Это комментарий -->

Комментарии могут встречаться в документе где угодно и в любом количестве.


Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.


Тело документа <BODY>

Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.


Уровни заголовков <Hx>

Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий — 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак «1». Синтакс заголовка уровня 1 следующий:

<H1> Заголовок первого уровня </H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx> Заголовок x-го уровня </Hx>

где x — цифра от 1 до 6, определяющая уровень заголовка.


Тэг абзаца <P>

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>

позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.


Центрирование элементов документа

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

Все элементы между тэгами <CENTER> и </CENTER>
будут находиться в центре окна


Тэг преформатирования <PRE>

Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

  • перевод строки
  • символы табуляции (сдвиг на 8 символов вправо)
  • непропорциональный шрифт, устанавливаемый броузером

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться броузером при помещении их между тэгами <PRE> и </PRE>.

Далее идет несколько более подробный пример, собранный из предыдущих:

<HTML>

<HEAD>

<TITLE> Список сотрудников </TITLE>

</HEAD>

<BODY>

<H2> Список сотрудников нашей фирмы </H2>

<H3> Составлено : 01 января 3000 года </H3>

Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P>

Список может быть использован только в служебных целях. <P>

</BODY>

</HTML>

Вот, что вы увидите на экране броузера:

Список сотрудников нашей фирмы

Составлено : 01 января 3000 года

Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.

Список может быть использован только в служебных целях.

Внимание! Заголовок «Список сотрудников» не отображен броузером как часть документа. Он появится в заголовке окна броузера.


Разрыв строки <BR>

Тэг <BR> извещает броузер о разрыве строки. Наилучший пример использования данного тэга — форматированный адрес или любая другая последовательность строк, где броузер должен отображать их одну под другой. Например:

Я из лесу вышел,<BR>
Был сильный мороз. <BR>
Гляжу, поднимается медленно в гору,
Лошадка, везущая хворосту - воз.<BR>

Дополнительный параметр позволяет расширить вохможности тэга <BR>.

<BR CLEAR=left|right|all>

Данный параметр позволяет выполнить не просто перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна броузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <BR> для смещения текста ниже рисунка:

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left>

<img src=»http://www.softexpress.com/images/schema1.gif» align=baseline>

Мастер/Деталь </p>


Неразрывная строка <NOBR>

Если вы не хотите, чтобы броузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае броузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого броузер позволит горизонтально прокручивать окно. Например:

<NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место. Например:

<NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения где бы то ни было </NOBR>


Цитата <BLOCKQUOTE>

Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:

На открытии данной конференции глава представительства произнес: <P>
<BLOCKQUOTE>
Сегодня один из величайших дней для нашей компании. <BR>
Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз.
</BLOCKQUOTE>

При отображении броузером данный текст будет выглядеть так:

На открытии данной конференции глава представительства произнес:

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


Список базовых тэгов HTML

Стартовый

Завершающий

Описание

<HTML> </HTML> Обозначение HTML-документа
<HEAD> </HEAD> Заголовочная часть документа
<TITLE> </TITLE> Заголовок документа
<BODY> </BODY> Тело документа
<H1> </H1> Заголовок абзаца первого уровня
<H2> </H2> Заголовок абзаца второго уровня
<H3> </H3> Заголовок абзаца третьего уровня
<H4> </H4> Заголовок абзаца четвертого уровня
<H5> </H5> Заголовок абзаца пятого уровня
<H6> </H6> Заголовок абзаца шестого уровня
<P> </P> Абзац
<PRE> </PRE> Форматированный текст
<BR>   Перевод строки без конца абзаца
<BLOCKQUOTE> </BLOCKQUOTE> Цитата

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

Posted in Учебник по HTML, DHTML, CSS.