Разделы, заголовки и горизонтальные линии

 

Разделы. Формат задания раздела:

<DIV>

HTML-код или текст

</DIV>

или

<SPAN>

HTML-код или текст

</SPAN>

Разделы используются для задания параметров текста и его расположения. К разделу можно применять любые атрибуты стиля. Теги <DIV> и <SPAN> отличаются тем, что при использовании тега <DIV> браузер производит перенос раздела на новую строку и перед ним автоматически устанавливается пустая строка. При использовании тега <SPAN> переноса не возникает.

Заголовки. Заголовки позволяют разделить web-страницу на логически законченные блоки и помогают ориентироваться в содержимом документа.

Спецификация HTML позволяет программисту использовать шесть различных стилей, или, как их еще принято называть, логических уровней заголовков.

Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n - целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды:

<Нn аlign="параметр">

Текст заголовка

</Нn>

Атрибут align дает возможность web-мастеру определить расположение заголовка в окне браузера. Параметр этого атрибута может принимать одно из трех возможных значений:

right – позиционирование заголовка по правой границе документа;

left – позиционирование заголовка по левой границе документа;

center – позиционирование заголовка по центру документа.

По умолчанию заголовки выравниваются по левому краю страницы. Высоты заголовков относятся как 2: 1,5: 1,17: 1,33: 0,83: 0,67. Заголовки как блоковые элементы отделяются от текста пустыми строками.

Пример:

<Н1 align=”center”>

ДОБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!

</Н1>

Горизонтальные линии. Чтобы визуально отделить часть объектов документа от других, применяются горизонтальные линии. Горизонтальная линия – это графический элемент, имеющий длину, толщину и цвет.д.ля создания таких линий в HTML используется непарный тег <HR> (сокращение от Horizontal Ruler). В спецификации HTML для отображения вертикальных линий не предусмотрено специальных тегов.

Формат создание стандартной линии (по умолчанию стандартная линия занимает всю ширину окна браузера, а её толщина составляет 2px, верхняя часть линии несколько темнее нижней):

<HR>

Формат сплошной темной линии без тени:

<HR noshade>

Формат горизонтальной линии с указанием свойств:

<HR align=”значение”

width=”значение”

size=”значение”

color=”значение”>

Атрибут align задает выравнивание линии и может принимать значения center, left или right. По умолчанию линии выравниваются по центру страницы.

Атрибут width задает длину линии в пикселях или процентах. Например, тег <HR определяет горизонтальную линию шириной 25 пикселов. Если значение атрибута задается в процентах (ставится символ %), то ширина линии вычисляется относительно ширины окна, например <HR Задание длины линии в относительных единицах предпочтительнее.

Толщина линии задается атрибутом size. Значение этого атрибута задается в пикселах в диапазоне от 1 до 175. Присвоение больших значений игнорируется. По умолчание size=2px.

Цвет линии определяется атрибутом color.

Списки

 

Существуют 3 вида списков: маркированный (неупорядоченный), нумерованный (упорядоченный), список определений.

Маркированный список

 

Формат задания списка:

<UL tуре="параметр">

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

<LI>Содержимое 1 строки списка</LI>

<LI>Содержимое 2 строки списка </LI>

…

<LI> Содержимое n строки списка</LI>

</UL>

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

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

circle - метки отображаются в виде полых окружностей;

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

По умолчанию, то есть в случае, когда в маркированном списке тег <UL> записывается без атрибутов, type="disc".

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

 

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

Формат задания списка:

<OL tуре=”параметр”

start=”значение”>

<LI>Содержимое 1 строки списка</LI>

<LI>Содержимое 2 строки списка </LI>

…

<LI> Содержимое n строки списка</LI>

</OL>

Атрибут type позволяет изменять буллет-стиль, то есть определять вид маркеров, которыми будут обозначаться составляющие список значения. В составе атрибута type можно использовать один из следующих параметров:

"1" – обычные арабские числа 1, 2, 3 и т.д.

"I" – римские цифры в заглавном регистре I, II, III, IV и т.д.

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

"А" – символьная маркировка в заглавном регистре А, В, С и т.д.

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

В НТМL возможно изменить порядок нумерации строк списка и порядок нумерации внутри списка.

Атрибут start позволяет задавать позицию, с которой следует начать маркировку. Например, если атрибут type задан как "I", а атрибут start – как "5", то нумерация начнется с цифры 5. Если же type имеет значение "А", а start – "D", то маркировка начнется с символа D.

Можно изменить нумерацию внутри списка, указав в теге <LI> атрибут value.

<LI value=значение> Содержимое 1 строки списка </LI>

По умолчанию значение атрибута type принимается как "I", нумерация начинается с первого элемента в каждом из типов маркировки.

 

Вложенные списки

 

Возможно создание так называемых вложенных списков, реализуемых посредством размещения одной пары тегов в другой, например, команд создания маркированного списка внутри нумерованного. Простая реализация вложенного списка имеет вид:

1. Вхождение 1

Вхождение 1-а

Вхождение 1-б

2. Вхождение 2

Вхождение 2-а

Вхождение 2-б

Такой список можно представить следующим набором команд:

<OL>

<LI> Вхождение 1

<UL>

<LI>Вхождение l-a</LI>

<LI>Вхождение 1-б</LI>

</UL>

</LI>

<LI> Вхождение 2

<UL>

<LI>Вхождение 2-a</LI>

<LI>Вхождение 2-б</LI>

</UL>

</LI>

</OL>

Тег <LI> может включать те же атрибуты, что и теги самих списков <UL> и <OL>. Если, например, вхождения маркированного списка отображаются принятым по умолчанию маркером disc, но одно из наиболее значимых по контексту вхождений программисту необходимо пометить маркером square, можно записать тег данного элемента следующим образом: <LI type=”square”>Вхождение</LI>. Аналогично, один из пунктов нумерованного арабскими цифрами списка можно пометить символьным маркером, записав соответствующий тег следующим образом: <LI type=”А”>Вхождение</LI>.

 

Списки определений

 

Эти списки представляют собой списки терминов вместе с их определениями, то есть они напоминают толковый словарь.

Формат записи списка:

<DL>

<DT> Тег, задающий определяемый термин </DT>

<DD>Тег, задающий определение термина</DD>

<DD> Тег, задающий определение термина </DD>

<DТ> Тег задающий определяемый термин </DT>

<DD> Тег, задающий определение термина </DD>

<DD> Тег, задающий определение термина </DD>

</DL>

Закрывающие теги для команд <DТ> и <DD> списка определений можно опустить. Данные теги могут использоваться и самостоятельно: <DT> для отображения терминов, выделяемых в тексте шрифтом, a <DD> – для их расшифровки, помеченной отступом. В этом случае наличие соответствующих закрывающих тегов обязательно.

Таблицы