4. Размещение текста на странице

Основными элементами, содержащими текст, являются абзацы (параграфы), заголовки, списки и таблицы.

Абзацы выделяются парным тегом <P> </P>. Заключительный тег можно не ставить, если в конце стоит другой начальный. Например,

<P>Текст первого абзаца.

<P>Текст второго абзаца.</P>

Броузеры, отображая абзацы, обычно отделяют их друг от друга дополнительным интервалом.

Заголовки отмечаются парными тегами <H1> </H1>. Существует шесть уровней заголовков, которые обозначаются H1…H6. Заголовок уровня 1 самый крупный, а каждый последующий все меньше и меньше. Для абзацев и заголовков можно использовать атрибут align, обеспечивающий выравнивание (left, center, right или justify).

Назначение заголовков – подчеркнуть структуру документа. Усилить это можно вставкой горизонтальных линий. Горизонтальная линия (horizontal rule) задается тегом <HR> с атрибутами align=(left, center, right или justify), size=толщина в пикселях, width=длина в пикселях или процентах, color=цвет.

Например, <HR align=”center” width=400 size=4 color=”red”>

Использование заголовков и абзацев во многом схоже. Для принудительного перехода на новую строку можно использовать теги <BR> (принудительный переход на новую строку) и <WBR> (мягкий перенос, т.е. переход на новую строку, если не удается разместить в одной). Для сохранения авторского размещения по строкам (пробелы, табуляция, новая строка) используется тег <PRE> </PRE>. Кроме того, имеется группа тегов, позволяющая локально изменять форматирование фрагментов текста.

Теги форматирования текста можно условно разделить на две группы: теги логического и физического форматирования.

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

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

Таблица 6.4 Теги логического форматирования

EM	выделение
STRONG	еще более сильное выделение
DFN	обозначает, что этот термин имеет определение.
VAR	часть текста (обычно слово) является переменной
CITE	название цитируемой книги или статьи
BLOCKQUOTE	цитирование
CODE	код программы или его эквивалент (например, HTML)
SAMP	служебные сообщения компьютера (вывод из программы, скрипты, команды и т.п.)
KBD	текст, который должен печататься на клавиатуре пользователя (обычно используется для инструкций.)
DIV	деление текста на разделы

Таблица 4.5 Теги физического форматирования

TT	"телетайпный" текст, т.е. текст одного размера
I	курсив
B	жирный
U	подчеркивание
STRIKE	зачеркнутый текст
BIG	большой шрифт
SMALL	малый шрифт
SUB	подстрочный текст
SUP	надстрочный текст.
FONT	установка размера и цвета шрифта
BASEFONT	базовый размер шрифта

Все теги, кроме BASEFONT парные. <BASEFONT SIZE=n>, где n=1-7, задает в точке его использования размер шрифта, относительно которого дальше можно изменять размеры. Тег FONT может содержать три атрибута SIZE (размер), COLOR (цвет) и FACE (вид). Размер может задаваться как абсолютный (число без знака, 1-7), так и относительно базового (число со знаком). Элементы FONT и BASEFONT представляются привлекательными для задания размеров шрифта. Однако не стоит без особой необходимости задавать размер шрифта, лучше использовать выделение фраз, другие структурные элементы. Это позволит пользователям, если им не нравятся размеры шрифта, определять шрифты по своему усмотрению. В целом следует избегать чрезмерного использования физической разметки.

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

<BODY BGCOLOR=AQUA TEXT="#848484" LINK=RED VLINK=PURPLE ALINK=GREEN>

<H1 ALIGN=center>Примеры размещения <BR>и форматирования текста</H1>

<P> Так выглядит текст по умолчанию

<P><BLOCKQUOTE>Осенняя пора, очей очарованье...</BLOCKQUOTE> <CITE>А.С.Пушкин</CITE>

<P><EM>Выделенный текст <STRONG>Еще более сильное выделение</STRONG></EM>

<P><BASEFONT SIZE=4>Задан базовый размер шрифта =4 <BR>

<FONT SIZE=+1>Размер шрифта увеличен на 1</FONT>

</BODY>

ь атрибутом maxlength. Атрибут value можно использовать для задания строки, которая будет показана в поле при начальной загрузке документа. Например,

<input type=text size=40 name=user value="your name">

Значение type=password аналогично type=text, однако вместо вводимых с клавиатуры символов показывает на экране символ-маску (например, *), что позволяет скрыть текст от посторонних глаз при Рис. 6.3. Вид документа в окне броузера

Список отличается от обычного текста тем, что при выводе в окне броузера выполняется автоматическая нумерация или маркировка его элементов. При внесении изменений нумерация автоматически корректируется. Существует несколько разновидностей списков: нумерованные, ненумерованные и с определениями.

Ненумерованный список:

<UL TYPE=… COMPACT>

<LH>Заголовок

<LI>пункт 1 списка

<LI>пункт 2 списка

<LI>пункт 3 списка

</UL>

Атрибут TYPE определяет вид маркера (disc, square, circle), COMPACT делает список более компактным.

Нумерованный список:

<OL TYPE= … START=… COMPACT>

<LH>Заголовок

<LI>пункт 1

<LI>пункт 2

<LI>пункт 3

</OL>

Атрибут TYPE определяет стиль нумерации (1 – арабские цифры, а – строчные буквы, А – прописные буквы, I – большие римские цифры, i – малые римские цифры), значение атрибута START определяет начальное значение последовательности.

Список с определениями:

<DL COMPACT>

<DT>текст пункта 1

<DD>определение 1(выводится со смещением)

<DT>текст пункта 2

<DD>определение 2(выводится со смещением)

</DL>

В языке HTML имеется еще два элемента, по структуре похожих на списки <DIR><LH>…<LI>…</DIR> и <MENU><LH>…<LI>…</MENU>. Но используются они крайне редко.

Списки могут быть вложенными. На рис. 6.4 приведены примеры различных списков.

Рис. 6.4. Вид списков в окне броузера

Таблицы удобны для представления больших объемов данных, а многие Web-дизай­неры используют их также для точного размещения элементов Web-страниц в окне броузера.

Таблица в языке HTML задается при помощи парного тега <TABLE>. Она может содержать заголовок таблицы, определяемый парным тегом <CAPTION>, и строки таблицы, задаваемые при помощи парных тегов <TR>. Закрывающие теги </TR> можно опускать.

Каждая строка таблицы содержит ячейки таблицы, которые могут относиться к двум разным типам. Ячейки в заголовках столбцов и строк задают парным тегом <ТН>, а обычные ячейки — парным тегом <TD>. Закрывающие теги </ТН> и </TD> можно опускать. Например, «пустая» таблица с двумя строками и двумя столбцами может быть задана следующим образом:

<TABLE>

<САРТION>Пустая таблица</САРТION>

<TR><TH><TH>

<TR><TD><TD>

</TABLE>

Каждая ячейка может содержать произвольный текст, а также любой другой контейнер, допустимый в “теле” документа. В частности, ячейка таблицы может содержать вложенную таблицу или изображение.

При отображении таблицы в окне броузера происходит ее автоматическое форматирование с подбором размеров ячеек в соответствии с объемом размещае­мой информации и заданными атрибутами. Атрибуты элементов позволяют задавать оформление таблицы. В таблице 6.6 приведена краткая сводка допустимых атрибутов.

Таблица 6.6 Назначение атрибутов, определяющих вид таблицы

Атрибут	Элемент	Назначение
ALIGN	Таблица, заголовок, строка, ячейка	Выравнивание таблицы по горизонтали; выравнивание данных по горизонтали; размещение заголовка над или под таблицей
VALIGN	Строка, ячейка	Выравнивание по вертикали
WIDTH	Таблица, ячейка	Ширина
HEIGHT	Ячейка	Высота
COLSPAN	Ячейка	Протяженность в несколько столбцов
ROWSPAN	Ячейка	Протяженность в несколько строк
BGCOLOR	Таблица, ячейка	Цвет фона
CELLSPACING	Таблица	Зазор между ячейками
CELLPADDlNG	Таблица	Зазор между содержимым ячейки и ее границей
BORDER	Таблица, ячейка	Отображение границ ячеек и внешней рамки таблицы

Атрибуты тега TABLE не обязательны. По умолчанию, таблица выводится без рамки. Как правило, размер ячеек таблицы устанавливается автоматически, чтобы наилучшим образом разместить содержимое, однако можно установить ширину таблицы с помощью атрибута WIDTH. Атрибуты BORDER, CELLSPACING и CELLPADDING предоставляют дополнительные возможности для контроля за внешним видом таблицы. Заголовок размещается над или под таблицей в зависимости от значения атрибута ALIGN.

На рис. 6.5 приведен вид таблицы, содержащей допустимые значения атрибутов тега TABLE, в окне броузера. Ниже приведен фрагмент кода для создания этой таблицы.

Рис. 6.5. Вид таблицы в окне броузера

<TABLE BORDER=2 ALIGN="center" CELLSPACING=2 CELLPADDING=5 WIDTH="90%">

<CAPTION align="top">Таблица 6 Значения атрибутов тега TABLE </CAPTION>

<TR><TH>Атрибут <TH>Значение <TH>Примечание

<TR><TD>ALIGN<TD>left, center, rigth<TD>положение таблицы на экране

<TR><TD>WIDTH<TD>число, число%<TD>ширина таблицы в пикселях или %

<TR><TD>BORDER<TD>число<TD>ширина внешней окантовки

<TR><TD>BGCOLOR<TD>#RRGGBB<TD>цвет фона

<TR><TD>BORDERCOLOR<TD>#RRGGBB<TD>цвет окантовки

<TR><TD>CELLSPACING<TD>число<TD>расстояние между окантовкой таблицы и ячейками

<TR><TD>CELLPADDING<TD>число<TD>расстояние между окантовкой ячейки и содержимым

</TABLE>

Таблицы, как правило, показываются на экране "приподнятыми" над поверхностью страницы, а ячейки - "вдавленными" в тело таблицы. Ячейки выделяются окантовкой только если в них есть содержимое. Если содержимое ячейки состоит только из пробелов, ячейка считается пустой, за исключением случаев, когда в ней есть хотя бы один объект &nbsp.

Ячейка таблицы может содержать другие контейнеры, включая формы и другие таблицы.

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