Теги структурного форматирования

Форматирование текстового блока. Формирование текстового блока осуществляет тег < DIV >. Блоки < DIV > удобны тем, что они позволяют выровнять любой фрагмент текста, задать его размеры и расположить в нужном месте. К данным блокам можно применить любые атрибуты стиля и обращаться к ним как к объектам таблиц стилей (см. гл. 5).

< DIV ALIGN=" center" STYLE=" color: green; " > текст< /DIV>

Блок текста будет отображен зеленым цветом и размещен в центре страницы.

Центрирование. Для центрирования любых элементов в HTML-документе используется тег < CENTER>, он представляет собой аналог значенияALIGN=" center" того тега, результат отображения которого будет отцентрирован на экране монитора. Например, результат отображения фрагментов кода таблицы

< CENTER>

< TABLE> < TR> < TD> < /TD> < /TR> < /TABLE>

< /CENTER>

и

< TABLE ALIGN=" center" > < TR> < TD> < /TD> < /TR> < /TABLE>

будет абсолютно одинаков.

Отступ. Для вставки отступа, которыйпо размерам больше одного пробела, используется символ & nbsp. Создавая текст в документе, не обязательно вставлять этот символ между словами, браузер и так поймет, что нужно сделать отступ, а для отступа большего размера используют вставку этого символа столько раз, сколько потребуется для установки нужного размера отступа.

Пустая строка. Для вставки пустой строки на страничке используется тег < BR>. Данный тег относится к одиночным тегам, т. е. не имеет закрывающего тега.

Строка без переносов. Для отображения строки без переносов используется тег < NOBR> строка< /NOBR>.

Горизонтальный разделитель. Для горизонтального разделения HTML-документа на части используют тег < HR>. Если тег используется без атрибутов, то браузером отображается стандартная линия на всю ширину окна, а ее толщина составляет 2 пиксела. Верхняя часть такой линии несколько темнее, чем нижняя ее часть. Для создания горизонтальной линии, отличающейся от стандартной, применяются теги: ALIGN – выравнивание, WIDTH – длина, SIZE – ширина, COLOR – цвет.

< HR WIDTH=" 80%" SIZE=" 5" COLOR=" red" >

В окне браузера отображается линия красного цвета толщиной 5 пикселов и длиной 80 % от ширины окна экрана.

Тег < HR > не имеет закрывающегося тега.

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

<! -- Комментарий -->

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

Списки

Текст на страничке может быть отформатирован в виде списков: маркированных (< UL> < /UL>), нумерованных (< OL> < /OL>) и списков определений (< DL> < /DL>). Списку может предшествовать заголовок (< LH> < /LH>), который является не обязательным элементом.

Маркированный список. Для маркированного списка применяют тег < UL> < /UL>, а для вхождения пунктов в список тег < LI> пункт списка < /LI>. При оформлении маркированного списка используется вид маркера, который можно задать с помощью атрибута TYPE. Данный атрибут может принимать следующие значения: disc, circle, square.

Disc – метки отображаются в виде заполненных черным цветом окружностей.

Circle – метки отображаются в виде полых окружностей.

Square – метки отобразятся в виде заполненных черным цветом квадратов.

По умолчанию (т. е., когда опускаем параметр TYPE), используется значение disc.

Например,

< UL>

< LH> Заголовок списка< /LH>

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

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

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

< LI> пункт списка 4 < /LI>

< /UL>

отобразит в браузере маркированный список (рис. 1.6).

Вместо стандартных HTML-маркеров можно использовать собственные графические изображения. Для этого внутри тега контейнера < UL > вместо указателя элемента < LI > размещается конструкция описания графических объектов < IMG >, где атрибут SRC задает имя файла:

< UL>

< IMG SRC=" marker.gif" > пункт списка 1

< IMG SRC=" marker.gif" > пункт списка 2

< IMG SRC=" marker.gif" > пункт списка 3

……………………………………………

< IMG SRC=" marker.gif" > пункт списка n

< /UL>

В качестве маркера будет представлено изображение, находящееся в файле marker.gif.

Нумерованный список. Для нумерованного списка используется тег < OL> < /OL >, а для вхождения пунктов в список также используется тег < LI> пункт списка < /LI>.В этом теге значение атрибута TYPE может принимать следующие значения:

1 – обычные арабские числа 1, 2, 3;

I – римские цифры в заглавном регистре;

i – римские цифры в строчном регистре i, ii, iii и т. д.;

A – символьная маркировка в заданном регистре A, B, C;

a – символьная маркировка в строчном регистре a, b, c.

Атрибут START – позволяет задавать позицию, с которой следует начать маркировку. Например, START=" 5" – нумерация начинается с 5, START=" D" – нумерация начинается с D.

< OL TYPE=" 1" START=" 4" >

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

…………………………………

< LI> пункт списка n < /LI>

< /OL>

В данном примере нумерация списков будет осуществляться арабскими цифрами и начнется с цифры 4.

Список определений. Список определений < DL> < /DL> представляет собой более сложную структуру, представленную двумя типами элементов < DT> < /DT> (задает термин) и < DD> < /DD> (задает определение термина и отображается новым абзацем).

< DL>

< DT> Треугольник < /DT>

< DD> Многоугольник с тремя сторонами< /DD>

< DT> Равнобедренный треугольник < /DT>

< DD> Треугольник, в котором две стороны равны< /DD> < /DL>

Результат отображения данного примера показан на рис. 1.7.

* * *

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