Структура команд языка HTML

Команды или теги (tag) языка HTML, как правило, имеют следующую структуру:

<название команды>   - начало команды
                       поле действия команды
</название команды>  - конец команды

Стандарт языка HTML требует обязательного присутствия тега "конец команды", кроме особо оговоренных случаев.

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

АТРИБУТ="значение атрибута"

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

Если команда имеет несколько атрибутов, то они разделяются пробелами:

<название команды 
    АТРИБУТ1="значение атрибута1" 
    АТРИБУТ2="значение атрибута2">

Структура HTML-документа имеет следующий вид:

<HTML>          - начало документа 
   <HEAD>       - головная часть документа (может отсутствовать)

   </HEAD>      - конец головной части документа

   <BODY>
                - тело документа
   </BODY>
</HTML>         - конец документа

HTML-документы записываются в обычном текстовом формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе.

Замечание: Язык HTML не чувствителен к регистру. Команды языка могут набираться как прописными так и строчными буквами, т.е. команда <BODY> эквивалентна команде <body> или <Body>.

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

Комментарии задаются следующим образом:

<!--   - начало комментария
                    поле действия комментария
-->    - конец комментария

Все то, что стоит внутри комментариев не будет выведено на экран.

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

Любой HTML-документ может быть разбит на отдельные структурные элементы:

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

<HTML>
<HEAD>
<TITLE>Пример HTML-текста</TITLE>
</HEAD>
<BODY>
<H1 align=center>Глава 1</H1>
<H2>Параграф 1.</H2>
<P>Добро пожаловать в HTML!
Здесь мы расскажем, как надо и как не надо делать гипертексты.
<H2>Параграф 2.</H2>
</BODY>
</HTML>

Этот текст выглядит так:

Глава 1

Параграф 1.

Добро пожаловать в HTML! Здесь мы расскажем, как надо и как не надо делать гипертексты.

Параграф 2.

Заголовок окна браузера

В каждом HTML-документе должен быть задан заголовок окна браузера, он должен описывать цель документа и содержать не больше 5-6 слов. Кроме того, он используется и для идентификации документа (например, при поиске).

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

<TITLE>Заголовок</TITLE>

расположенные строго внутри раздела <HEAD> и </HEAD>.

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

Язык HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком самого большого размера). По сравнению с нормальным текстом, заголовки выделяются жирным шрифтом.

Синтаксис заголовков:

<Hn align=> Текст заголовка </Hn>

где n - число от 1 до 6, определяющее уровень заголовка, а align= - атрибут, задающий расположение заголовка на экране:
align=left - разместить слева (принято по умолчанию)
align=center - разместить по центру
align=right - разместить справа.

Абзацы

Команда задания абзаца < P> также имеет атрибут align=, который, кроме указанных выше значений может быть задан как

<P align=justify>

что устанавливает выравнивание правого края текста на экране.

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

   <H2>Параграф 1.</H2>
   <P>Добро пожаловать в HTML!
   Здесь мы расскажем, как надо и как не надо делать гипертексты.

В исходном файле два предложения находятся на двух разных строках. Браузер игнорирует это перерывание строки и начинает новый абзац только, после команды <P>.

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

Прерывание строки

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

Например:

Институт<BR>в котором мы учимся

даст на экране:

Институт
в котором мы учимся

Сдвиг текста

Для вывода на экран текста с небольшим сдвигом от левого края, например стихов, применяются команды <BLOCKQUOTE> и </BLOCKQUOTE>

Размер шрифта

Команды <BIG> и <SMALL> соответственно увеличивают или уменьшают на одну единицу относительный размер шрифта.

Стиль шрифта

Задание стилей для всех семейств шрифтов, используемых на компьютере, определятся явным заданием вида шрифта, которым будет выводится текст:

Шрифткоманда
Равноширинный шрифт (teletype) <TT>
Полужирный текст (bold) <B>
Курсив (italic) <I>
зачеркнутый текст (strike) <S> или
<STRIKE>
подчеркнутый текст (underline) <U>

Пример:

<P>Этот <B>текст</B> полужирный.
Этот <I>текст</I> курсивный.

Что даст:

Этот текст полужирный. Этот текст курсивный.

Допускается совместное использование команд задания стиля, например,

<P>Этот <I><B>текст</B></I> полужирный курсив.

Что даст:

Этот текст полужирный курсив.

Однако не допускается перекрещивание стилей, например,

<P><B>Этот <I>текст</B> полужирный </I> курсив.

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

Символьные примитивы

Как уже было сказано, браузер игнорирует перерывание строки в HTML-файле, где на самом деле закончится одна строка на экране и начнется другая — зависит от размера шрифта на экране у клиента. Кроме того, браузер игнорирует и любое количество пробелов между словами — все пробелы заменяются одним. Поэтому, если требуется поставить подряд несколько пробелов, применяется специальный символьный примитив "неразрывный пробел", который начинается амперсандом (&) и заканчивается точкой с запятой: &nbsp; (сокращение от Non Break SPace).

Символьные примитивы чувствительны к регистру: НЕЛЬЗЯ использовать &Nbsp; вместо &nbsp;

Например, строка

Факультет&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;на котором     мы учимся

будет выглядеть на экране так:

Факультет     на котором мы учимся

Поскольку браузер обрывает строку на пробеле, то возможна ситуация, когда, например, инициалы останутся на одной строке, а фамилия "переедет" на другую. Чтобы этого не происходило, между инициалами и фамилией обязательно следует ставить "неразрывный пробел".

Символы <, >, & являются зарезервированными, так как применяются для записи команд. Если эти символы необходимо использовать в тексте, их также заменяют соответствующими символьными примитивами:

&lt; - знак "меньше": <
&gt; - знак "больше": >
&amp; - амперсанд: &

Кроме выведения на экран зарезервированных символов символьные примитивы служат для кодировки букв национальных алфавитов.

Верхние и нижние индексы

В тексте можно задать верхние и нижние индексы с помощью команд SUP and SUB.

Эти команды уменьшают размер текста, располагаемого вверху или внизу от строки. Например:

верхний индекс B<sup>a</sup>
и нижний индекс B<sub>a</sub>

имеет следующий вид:

верхний индекс Ba и нижний индекс Ba

Цвет в HTML документе

Установка цветов в HTML документе производится с использованием атрибутов установки цвета в командах: BODY, FONT, HR, MARQUEE, TABLE.

Например, для установки цвета фона используется атрибут BGCOLOR= в команде BODY.

В следующем примере задан белый фон документа.

<BODY BGCOLOR=WHITE>
<P>Эта страница имеет белый фон.
</BODY>

Выбор цвета можно производить двумя способами:

Язык HTML поддерживает следующие имена цветов:

AQUA, BLACK, BLUE, FUCHSIA
GRAY, GREEN, LIME, MAROON
NAVY, OLIVE, PURPLE, RED
SILVER, TEAL, WHITE, YELLOW.

Эти цвета выглядят следующим образом:

AQUA BLACK BLUE FUCHSIA
GRAY GREEN LIME MAROON
NAVY OLIVE PURPLE RED
SILVER TEAL WHITE YELLOW

В примере приведены таблица соответствия 16 имен цветов и их шестнадцатеричных номеров и расширенная таблица цветов.

Номер цвета Red-Green-Blue задается тремя двухзначными шестнадцатиричными числами. Каждое число из интервала [00 - FF] ([0 - 255]) определяет интенсивность соответствующего цвета.

Например номер цвета #FF0000 соответствует красному цвету (RED), так как имеет максимальную интенсивность для красного (Red), а зеленый (Green) и голубой (Blue) имеют значения равные нулю. Соответственно, номер #00FF00 соответствует зеленому цвету (GREEN) и номер #0000FF - голубому (синему) (BLUE). Знак (#) обозначает номер.

Если вы желаете выделить фоном часть вашей страницы, то для этого лучше всего использовать "пустую" таблицу (таблицу, состоящую из одной клетки)

Хотя задание Red-Green-Blue теоретически позволяет выводить "миллион" цветов, на самом деле все определяется видеокартой и монитором, которые использует пользователь-клиент.

Горизонтальная линия

Используя команду <HR> Вы можете разделить текст горизонтальной чертой:

          Этот текст сверху от линии.


          Этот текст снизу от линии.

Ее длина может быть фиксированной или зависеть от размера окна браузера, например:

<HR ALIGN=center COLOR=green SIZE=5 WIDTH="60%">

это будет линия, расположенная по центру, зеленого цвета, шириной 5 пикселей и длиной 60% от ширины экрана.

HTML-редактор

Все HTML-документы имеют расширение *.htm или *.html и записываются как обычный текст, поэтому могут быть созданы и отредактированы в любом текстовом редакторе, например, в Блокноте. Но гораздо удобнее использовать специализированные HTML-редакторы.
Одним из них является UltraEdit. Его ярлык выглядит так:

В этом редакторе все команды языка HTML отображаются синим цветом, а атрибуты команд — красным. Благодаря этому, если в названии команды (или атрибута) будет допущена ошибка, название отобразится черным цветом, как обычный текст.

Последовательность работы с HTML-файлом

  1. Запустите редактор UltraEdit.

  2. В этом редакторе или откройте существующий файл или создайте новый, щелкнув по самой левой иконке (New File). Если вы создаете новый файл, то сразу же дайте ему имя с расширением *.html.

  3. После внесения любых изменений обязательно сохраните файл.

  4. В Проводнике или FAR запустите HTML-файл (щелкнув мышкой по имени файла или нажав Enter). При этом автоматически откроется окно с браузером Internet Explorer в котором будет отображен данный HTML-файл.

  5. Если что-то не так, вернитесь в UltraEdit, внесите исправления, сохраните файл, снова перейдите в окно Internet Explorer и нажмите кнопку "Обновить" — только тогда вы увидите внесенные изменения на экране.