1.3 Списки
В языке HTML предусмотрены основные типы списков: маркированный, нумерованный и список определений.
Для создания маркированного списка, называемого также ненумерованным или неупорядоченным, предусмотрен тэг <UL> (Unordered List). В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности.
Тэги <UL> и <LI>
Для создания маркированного списка необходимо использовать тэг-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, таким образом отделяя список от основного содержимого документа, поэтому здесь нет необходимости использовать тэги абзаца <P> или принудительного перевода строки <BR>. Каждый элемент списка должен начинаться тэгом <LI> (List Item – элемент списка). Тэг <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки. Пример HTML-документа, использующего маркированный список, отображение которого браузером показано на рис. 1.3.1:
<HTML>
<HEAD>
<TITLE>Пример маркированного списка</ TITLE >
</HEAD>
<BODY>
<UL>
<B>Знаки зодиака:</B>
<LI>Овен
<LI>Телец
<LI>Близнецы
<LI>Рак
<LI>Лев
<LI>Дева
<LI>Весы
<LI>Скорпион
<LI>Стрелец
<LI>Козерог
<LI>Водолей
<LI>Рыбы
</UL>
</BODY>
</HTML>
Рис. 1.3.1. Отображение маркированного списка
Тэг <UL> имеет следующие параметры:
compact (устарел, не поддерживается большинством браузеров);
type (допустимые значения : disc, circle square).
type = disc - маркеры отображаются закрашенными кружками;
type = circle — маркеры отображаются не закрашенными кружками;
type = square — маркеры отображаются закрашенными квадратиками.
Пример записи: <UL type = circle>.
Значением, используемым по умолчанию, является type = disc. Для вложенных маркированных списков на первом уровне по умолчанию используется значение disc, на втором — circle, на третьем и далее — square. Параметр TYPE с теми же значениями может употребляться для указания вида маркеров отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в тэге элемента списка <LI>.
Пример записи: <LI TYPE = circle>
Графические маркеры списка
В качестве маркеров списка можно использовать графические изображения, при этом возможно вообще обойтись без тэгов <LI>. Единственной задачей, которую нужно при этом решить, будет отделение элементов списка друг от друга. Для этого можно использовать тэги абзаца <Р> или принудительного перевода строки <BR>. Пример реализации списка с графическими маркерами, отображение которого представлено на рис. 1.3.2, показан ниже:
<HTML>
<HEAD>
<TITLE>Маркированный список</TITLE>
</HEAD>
<BODY>
<UL>
<В>Знаки зодиака:</B><BR>
<IMG SRC="Green.jpg"> Овен<ВR>
<IMG SRC="Green.jpg"> Телец<ВR>
<IMG SRC="Green.jpg”> Близнецы<ВR>
<IMG SRC="Green.jpg"> Paк<BR>
<IMG SRC="Green.jpg"> Лeв<BR>
<IMG SRC="Green.jpg"> Дeвa<BR>
<IMG SRC="Green.jpg"> Весы<BR>
<IMG SRC="Green.jpg"> Скорпион<BR>
<IMG SRC="Green.jpg"> Стрелец<BR>
<IMG SRC="Green.jpg"> Козерог<BR>
<
IMG
SRC="Green.jpg">Скорпион<ВК>
<IMG SRC="Green.jpg"> Koзepoг<BR>
<IMG SRC="Green.jpg"> Boдoлeй<BR>
<IMG SRC="Green.jpg"> Рыбы
</UL>
</BODY>
</HTML>
Рис. 1.3.2. Маркированный список
с графическими маркерами списка
Здесь в качестве маркера элементов списка
используется графический файл Green.jpg.
Нумерованный список
Для создания нумерованного списка следует использовать тэг-контейнер <OL> </OL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя таким образом список от основного содержимого документа. Как и для маркированного списка, каждый элемент нумерованного списка должен начинаться тэгом <LI>. Пример HTML-документа, использующего нумерованный список, отображение которого показано на рис. 1.3.3:
<HTML>
<HEAD>
<TITLE>Пример нумерованного списка</ TITLE >
</HEAD>
<BODY>
<OL>
<В>Наиболее яркие звезды, видимые с Земли:</В>
<LIСириус
<LI>Канопус
<LI>Арктур
<LI>Альфа Центавра
<LI>Вега
<LI>Капелла
<LI>Ригель
<LI>Процион
<
LI>Ахернар
<LI>Бета Центавра
<LI>Бетельгейзе
<LI>Альдебаран
<BR>. . .
<LI value=58>Мицар
<BR>. . .
<LI value=75>Пoляpнaя
</OL>
</BODY>
</HTML>
Рис. 1.3.3. Нумерованный список
Тэг <UL> имеет следующие параметры:
1) compact (устарел, не поддерживается большинством браузеров;
2) type (задание вида нумерации);
3) start (значение первого пункта при нумерации).
type = А — задает маркеры в виде прописных латинских букв;
type = а — задает маркеры в виде строчных латинских букв;
type = I — задает маркеры в виде больших римских цифр;
type = i — задает маркеры в виде маленьких римских цифр;
type = 1 — задает маркеры в виде арабских цифр.
По умолчанию всегда используется значение type = 1, т. е. нумерация арабскими цифрами. Это касается и вложенных нумерованных списков. Здесь, в отличие от маркированных списков, браузеры по умолчанию не делают различной нумерацию на различных уровнях вложенности списков. Заметим, что после номера элемента списка всегда дополнительно выводится знак "точка". Параметр type с теми же значениями может употребляться для указания вида нумерации отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в тэге элемента списка <LI>.
Пример записи: <LI type = A>.
Параметр start тэга <OL> позволяет начать нумерацию списка не с первого значения. В качестве значения параметра start всегда должно указываться натуральное число, вне зависимости от вида нумерации списка.
Пример: <OL type = A start=5>.
Такая запись определяет нумерацию списка с прописной латинской буквы "Е". Для других видов нумерации запись start=5 задаст нумерацию, соответственно, с числа "5", римской цифры "V" и т. д. Изменение вида нумерации списка и значений номеров допустимо производить и для любого элемента списка. Тэг <LI> для нумерованных списков разрешает использовать параметры type и value. Параметр type может принимать такие же значения, как и для тэга <OL>.
Пример записи: <LI type = A>.
Значение параметра value тэга <LI> позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов. Типичным применением являются списки с пропуском некоторых элементов. Пример такого списка был приведен выше (рис. 1.3.3).
Список определений
Списки определений задаются с помощью тэга-контейнера <DL> (Definition List). Внутри контейнера тэгом <DT> (Definition Term) отмечается определяемый термин, а тэгом <DD> (Definition Description) — абзац с его определением. Для тэгов <DT> и <DD> можно не записывать соответствующие закрывающие тэги. Список определений записывается следующим образом:
<DL>
<DТ>Термин
<DD>0пределение термина
</DL>
В тексте после тэга <DT> нельзя использовать элементы уровня блока, такие как, например, тэги абзаца <P> или заголовков <H1>—<H6>. Как правило, текст определяемого термина должен располагаться в одной строке. Текст, содержащий определение термина, выводится, начиная со следующей строки (или через строку для некоторых браузеров) после определения термина с отступом вправо. В информации, помещенной после тэга <DD>, могут располагаться элементы уровня блока. Отсюда следует, что списки определений могут быть вложенными.
Пример HTML-документа, в котором использован список определений (рис. 1.3.4):
<HTML>
<HEAD>
<TITLE>Пример списка определений</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Москва
<DD>Население 10 400 000 <BR>...
<DT>Санкт-Петербург
<DD>Население 4 600 000 <BR>...
<DT>Ростов-на-Дону
<DD> Население 1 100 000 <BR>...
</DL>
</BODY>
</HTML>
Рис. 1.3.4. Список определений