Контейнеры тела документа
Аннотация: В этой лекции рассказывается об элементах разметки тела HTML-документа, подробно разбирается их типизация, назначение и применение.
Теги тела документа
Теги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:
- иерархических контейнеров и заставок;
- заголовков (от Н1 до Н6 );
- блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
- горизонтальных подчеркиваний и адресов;
- текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
- математических описаний, графики и гипертекстовых ссылок.
Тело документа – контейнер BODY
Описание тегов тела документа следует начать с тега BODY . В отличие от тега НEАD , тег BODY имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Так, если источником для фона HTML — документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:
Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной форме URL. В данном случае это адрес локального файла. Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY .
| Атрибут | Значение |
|---|---|
| ВGCOLOR=#FFFFFF | Цвет фона |
| ТЕХТ=#0000FF | Цвет текста |
| VLINK=#FF0000 | Цвет пройденных гипертекстовых ссылок |
| LINK=#008000 | Цвет гипертекстовой ссылки |
В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Также имеется возможность задавать цвета по названию. Далее в таблице приведены названия цветов, определенные в стандарте HTML 4 и соответствующие им RGB-коды. Отметим, что многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.
| Название | Код | Название | Код |
|---|---|---|---|
| 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 указать
то цвет фона будет белым, текст будет синим, ссылки — зелеными, а пройденные ссылки станут красными. Однако пользоваться этими атрибутами следует крайне осторожно, так как у пользователя может оказаться другой интерфейс, который эти параметры не интерпретирует.
Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN=n в теге . Атрибут LEFTMARGIN= задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселах. Например, тег создаст на всей странице левое поле шириной 40 пикселов. При n , равном 0, левое поле отсутствует.
Теги управления разметкой
Заголовки
Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6 . Текст, окруженный тегами , получается большим — это основной заголовок. Если текст окружен тегами , то он выглядит несколько меньше (подзаголовок); текст внутри еще меньше и так далее до . Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко.
Ниже на рисунке показан результат использования следующих заголовков: (открыть)
Тег
Тег применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках.
Атрибут АLIGN
Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.
Далее приведены возможные значения атрибута АLIGN :
АLIGN=justify выравнивание по левому и правому краям. Реализовано не во всех программах интерпретации.
АLIGN=left выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы — на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=left можно опустить.
АLIGN=right выравнивание по правому краю. Текст, выровненный по правому краю и не выровненный по левому — концы строк находятся на одном уровне, а начало на разных, — часто используется с целью создать оригинальный дизайн. Для этого задается атрибут АLIGN=right в обычных тегах, например в теге .
АLIGN=center центрирование текста и графики. Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тегом . Однако этот тег применим не ко всем объектам HTML -страницы, поэтому разработчики Netscape добавили тег , который центрирует любые объекты и поддерживается браузерами Netscape Navigator 3.0, Microsoft Internet Explorer 3.0 и другими. К тегу нужно относиться с осторожностью. Какой-нибудь браузер может его вообще проигнорировать, и на странице окажется текст, выровненный по левому краю.
Обтекание графики текстом. С помощью атрибута ALIGN можно заставить текст «обтекать» графический объект. Для этого следует поместить тег туда, где должен быть графический объект, и добавить атрибут ALIGN=left , ALIGN=right или АLIGN=center . Кроме того, с помощью атрибутов НSPAСЕ и VSPАСЕ (они описаны ниже) задается ширина горизонтальных и вертикальных полей , отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом. Чтобы текст не «обтекал» графику, а прерывался, необходимо применить тег c атрибутом СLEAR .
Использование тега
Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этого и нужен тег ВR . Атрибут СLЕАR в теге используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT , RIGHT или АLL атрибута СLЕАR :
Текст будет продолжен, начиная с ближайшего пустого левого поля. Текст будет продолжен, начиная с ближайшего пустого правого поля. Текст будет продолжен, как только и левое, и правое поля окажутся пустыми.
Элемент разметки
Тег (Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в , не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там тег .
Теги управления отображением символов
Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.
Теги, управляющие формой отображения
Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации — все это делает страницы более интересными. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью тега FONT . Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в браузере пользователя.
Теги и — изменение размеров шрифта
Текст, расположенный между тегами или , будет, соответственно, больше или меньше стандартного.
Верхние и нижние индексы
С помощью тегов и можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги и с атрибутом FONT SIZE=-1 , уменьшающим размер шрифта.
Атрибут SIZЕ
Атрибут SIZЕ тега позволяет задавать размер текста в данной области. Если вы не пользуетесь тегом для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3. Некоторые браузеры тег не поддерживают, поэтому желательно употреблять его только внутри текстовой области. В других случаях лучше использовать теги , , и т.д. Главное преимущество тега состоит в том, что после окончания действия он не разбивает строку, как теги . Поэтому тег бывает очень полезен для изменения размера шрифта в середине строки.
Атрибут СОLОR
Если вы хотите сделать свою страницу более красочной, можете воспользоваться атрибутом СОLОR в теге FONТ , и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.
Теги, управляющие формой отображения, приведены в таблице.
| Тег | Значение |
|---|---|
| . | Курсив (Italic) |
| . | Усиление (Вold) |
| . | Телетайп |
| . | Подчеркивание |
| Перечеркнутый текст | |
| . | Увеличенный размер шрифта |
| . | Уменьшенный размер шрифта |
| . | Подстрочные символы |
| . | Надстрочные символы |
| Тег | Значение |
|---|---|
| . | Типографское усиление |
| . | Цитирование |
| . | Усиление |
. | Отображает примеры кода (например, «коды программ») |
| Последовательность литералов | |
| <КВD>. | Пример ввода символов с клавиатуры |
| . | Переменная |
| . | Определение |
. | Текст, заключенный в двойные кавычки |
Эти теги допускают вложенность, поэтому все они имеют тег начала и конца. При использовании таких тегов следует помнить, что их отображение зависит от настроек программы-интерфейса пользователя, которые могут и не совпадать с настройками программы-разработчика гипертекста.