1.3. Структура html-документа

HTML-документ имеет следующую структуру. Тег <HTML> должен открывать HTML-документ. Аналогично, тег </HTML> должен завершать HTML-документ:

<HTML>

Содержимое вашей Web-страницы

</HTML>

Обычно Web-страница делится на две части: тело – то, что выводится в окне браузера, и заголовочная часть – раздел, в котором содержится справочная информация, используемая браузерами и различными службами Internet, такими как поисковые серверы.

Раздел документа HEAD определяет его заголовок и не является обязательным тегом. Задачей заголовка является представление необходимой информации для программы, интерпретирующей документ. Раздел заголовка находится внутри пары <HEAD> и </HEAD>, указывает на начало и конец заголовка документа.

Тег-контейнер <TITLE>, единственный обязательный тег заголовка, содержат название Web-страницы, которое отображается в дальнейшем не в документе, а в заголовке окна браузера. Эта строка часто используется при организации поиска в WWW. Тег <TITLE> нельзя путать с названием файла документа; напротив, он представляет собой текстовую строку, совершенно независимую от имени и местоположения файла.

Пара тегов <BODY>…</BODY> указывает на начало и конец тела HTML-документа:

<HTML>

<HEAD>

<TITLE>

Заголовок вашей Web-страницы

</TITLE>

</HEAD>

<BODY>

Здесь будет размещено тело Web-страницы

</BODY>

</HTML>

С помощью тега <BODY> задаются отступы от края окна браузера, цвет фона страницы, цвет текста на странице и другие параметры, относящиеся к оформлению страницы.

1.4. Форматирование текста

1.4.1. Шрифтовое выделение фрагмента текста

Как и в случае работы с текстовым процессором MS Word, при создании HTML-документа можно использовать начертания: курсив, полужирный, подчеркивание или их сочетания. Для этого используются парные теги:

<I> (от англ. Italic) – курсив.

<B> (от англ. Bold) – полужирный.

<U> (от англ. Underline) – подчеркивание.

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

Пример 1. Применим к слову РОДИНА различное начертание.

1) Курсив:

С чего начинается <I> Родина</I>?

2) Полужирный:

С чего начинается <B> Родина</B>?

3) Подчеркивание:

С чего начинается <U> Родина</U>?

4) Полужирный курсив (использование вложенных тегов):

С чего начинается <I><B> Родина</B></I>?

Пример 2. Применим к каждому слову строки С ЧЕГО НАЧИНАЕТСЯ РОДИНА? различное начертание:

<B>С</B> <I>чего</I> <U>начинается </U><B> Родина</B>?

или с использованием вложенных тегов:

<B>С <I>чего</I> <U>начинается </U><I> Родина</I></B>?

В последнем случае весь текст в браузере будет выглядеть полужирным, при этом слово ЧЕГО дополнительно будет курсивом, НАЧИНАЕТСЯ – подчеркнутым, РОДИНА – снова курсивом.

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

1.4.2. Форматирование абзацев

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

Для того чтобы разделить текст на абзацы, в HTML применяется парный тег <P> (от англ. paragraph).

Например, выведем в браузере текст песни

С чего начинается Родина?

С картинки в твоем букваре.

Используем для этого пару тегов <P>…</P>:

<P>С чего начинается Родина?</P>

<P>С картинки в твоем букваре.</P>

При этом происходит увеличение расстояния между строками.

Если необходимо перейти на следующую строку принудительно, без увеличения междустрочного интервала, необходимо воспользоваться тегом <BR> (от англ. Break Row). Этот тег не является парным. В месте его размещения строка закончится. Например:

<P>С чего начинается <I>Родина?</I><BR>

С картинки в <B>твоем</B> букваре,</P>

<P>С хороших и верных товарищей,</P>

<P>Живущих в соседнем дворе.</P>

В этом примере увеличенное расстояние между строками будет после второй и третьей строк текста.

Для того чтобы расположить текст с определенным выравниванием относительно окна (с левого, правого края или по центру), используется параметр тега <P> align, который принимает одно из четырех значений: left, right, center, justify. Например, если необходимо сделать указанный выше отрывок песни эпиграфом к какому-либо тексту, его необходимо прижать к правому краю окна:

<P align=right> С чего начинается Родина?<BR>

С картинки в твоем букваре, <BR>

С хороших и верных товарищей, <BR>

Живущих в соседнем дворе.</P>

По умолчанию текст выравнивается по левому краю, что соответствует HTML-коду <P align=left>.

Для установки абзацного отступа и междустрочного интервала можно воспользоваться HTML-кодом

<P style=”text-indent:28; line-height:150%”>, где 28 – абзацный отступ в пикселях, 150% - полуторный межстрочный интервал.

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