Теги тела документа
Теги тела документа предназначены для управления отображением информации
в программе интерфейса пользователя. Они описывают гипертекстовую
структуру базы данных при помощи встроенных в текст контекстных
гипертекстовых ссылок. Тело документа
состоит из:
- иерархических контейнеров и заставок;
- заголовков
(от Н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>
| Текст,
заключенный в двойные кавычки |
Эти теги допускают вложенность, поэтому все они имеют тег начала и
конца. При использовании таких тегов следует помнить, что их отображение
зависит от настроек программы-интерфейса пользователя, которые могут и
не совпадать с настройками программы-разработчика гипертекста.
|