Опубликован: 12.08.2003 | Уровень: для всех | Доступ: платный | ВУЗ: Российский государственный гуманитарный университет
Лекция 3:

Контейнеры тела документа

< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Аннотация: В этой лекции рассказывается об элементах разметки тела HTML-документа, подробно разбирается их типизация, назначение и применение.

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

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

  • иерархических контейнеров и заставок;
  • заголовков (от Н1 до Н6 );
  • блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
  • горизонтальных подчеркиваний и адресов;
  • текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
  • математических описаний, графики и гипертекстовых ссылок.

Тело документа – контейнер BODY

Описание тегов тела документа следует начать с тега BODY. В отличие от тега НEАD, тег BODY имеет атрибуты.

Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML - документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:

<ВОDY ВАСКGROUND="image.gif">

Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес локального файла. Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.

Таблица 3.1. Атрибуты
Атрибут Значение
ВGCOLOR=#FFFFFF Цвет фона
ТЕХТ=#0000FF Цвет текста
VLINK=#FF0000 Цвет пройденных гипертекстовых ссылок
LINK=#008000 Цвет гипертекстовой ссылки

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

Таблица 3.2. Цвета
Название Код Название Код
aqua #00FFFF navy #000080
black #000000 olive #808000
blue #0000FF purple #800080
fuchsia #FF00FF red #FF0000
gray #808080 silver #C0C0C0
green #008000 teal #008080
lime #00FF00 white #FFFFFF
maroon #800000 yellow #FFFF00

Так, значения атрибутов в таблице 3.1 определяют цвет текста как синий, фона — белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тега ВОDY указать

<ВОDY ВGCOLOR=#FFFFFF ТЕХТ=#0000FF 
      VLINK=#FF0000 LINK=#00FF00>,

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

Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге <ВОDY>. Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег <ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселов. При n, равном 0, левое поле отсутствует.

Теги управления разметкой

Заголовки

Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко.

Ниже на рисунке показан результат использования следующих заголовков: (открыть)

<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>


Рис. 3.1.

Тег <P>

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

Атрибут АLIGN

Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.

Далее приведены возможные значения атрибута АLIGN:

АLIGN=justify выравнивание по левому и правому краям. Реализовано не во всех программах интерпретации.

АLIGN=left выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы — на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить.

АLIGN=right выравнивание по правому краю. Текст, выровненный по правому краю и не выровненный по левому — концы строк находятся на одном уровне, а начало на разных, — часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге <Р>.

АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тегом <АLIGN="сеntеr">. Однако этот тег применим не ко всем объектам HTML -страницы, поэтому разработчики Netscape добавили тег <СЕNТЕR>, который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Internet Explorer 3.0 и другими. К тегу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выровненный по левому краю.

Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст "обтекать" графический объект. Для этого следует поместить тег <IMG SRC="/путь/файл.gif"> туда, где должен быть графический объект, и добавить атрибут ALIGN=left, ALIGN=right или АLIGN=center. Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не "обтекал" графику, а прерывался, необходимо применить тег <BR> c атрибутом СLEAR.

Использование тега <ВR>

Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этого и нужен тег ВR. Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:

<BR СLЕАR=lеft> Текст будет продолжен, начиная
с ближайшего пустого левого поля.
<BR СLЕАR=right> Текст будет продолжен, начиная
с ближайшего пустого правого поля.
<BR СLЕАR=аll> Текст будет продолжен, как 
только и левое, и правое поля окажутся пустыми.
Элемент разметки <NOВR>

Тег <NОВR> (Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в <NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там тег <ВR>.

Теги управления отображением символов

Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.

Теги, управляющие формой отображения

Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации — все это делает страницы более интересными. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью тега FONT. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.

Теги <ВIG> и <SMALL> — изменение размеров шрифта

Текст, расположенный между тегами <ВIG></ВIG> или <SMALL> </SMALL>, будет, соответственно, больше или меньше стандартного.

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

С помощью тегов <SUР> и <SUВ> можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги <SUР> и <SUВ> с атрибутом FONT SIZE=-1, уменьшающим размер шрифта.

Атрибут SIZЕ

Атрибут SIZЕ тега <FОNТ> позволяет задавать размер текста в данной области. Если вы не пользуетесь тегом <BASEFONT SIZE=n> для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3. Некоторые браузеры тег <FONТ> не поддерживают, поэтому желательно употреблять его только внутри текстовой области. В других случаях лучше использовать теги <Н1>, <Н2>, <НЗ> и т.д. Главное преимущество тега <FONТ> состоит в том, что после окончания действия он не разбивает строку, как теги <Нn>. Поэтому тег <FONТ> бывает очень полезен для изменения размера шрифта в середине строки.

Атрибут СОLОR

Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.

Теги, управляющие формой отображения, приведены в таблице.

Таблица 3.3. Теги, управляющие формой отображения
Тег Значение
<I>...</I> Курсив (Italic)
<B>...</B> Усиление (Вold)
<TT>...</TT> Телетайп
<U>...</U> Подчеркивание
<S>...</S> Перечеркнутый текст
<BIG>...</BIG> Увеличенный размер шрифта
<SMALL>...</SMALL> Уменьшенный размер шрифта
<SUB>...</SUB> Подстрочные символы
<SUP>...</SUР> Надстрочные символы
Таблица 3.4. Теги, характеризующие тип информации
Тег Значение
<EM>...</EM> Типографское усиление
<CITE>...</CITE> Цитирование
<STRONG>...</STRONG> Усиление
<CODE>...</CODE> Отображает примеры кода (например, "коды программ")
<SАМР>...</SАМР> Последовательность литералов
<КВD>...</КВD> Пример ввода символов с клавиатуры
<VAR>...</VAR> Переменная
<DFN>...</DFN> Определение
<Q>...</Q> Текст, заключенный в двойные кавычки

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

< Лекция 2 || Лекция 3: 123 || Лекция 4 >
Олеся Артюх
Олеся Артюх

(Лекция №2, курс Введение в HTML:

"...Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа ( HEAD ) и тела документа ( BODY ). Рассмотрим простейший пример классического документа.

<HTML> <HEAD> <TITLE>Простейший документ</TITLE> </HEAD> <BODY TEXT=#0000ff BGCOLOR=#f0f0f0> <H1>Пример простого документа</H1> <HR> Формы HTML-документов <UL> <LI>Классическая <LI>Фреймовая </UL> <HR> </BODY> </HTML>

Роман Шумилов
Роман Шумилов

В Тесте #4 в качестве ответа на одно из заданий, причем верного ответа, используется тег, о котором ни в лекции 4, ни в предыдущих вообще не упоминалось. По этой причине, сдать тест #4 на отлично с первой попытки возможно только наугад. Конкретно тег <INPUT> до 4-ой лекции не упоминался ни разу.

Юрий Коробков
Юрий Коробков
Россия, Москва, МЭИ, 1998