Графические маркеры списка
В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных HTML-документов. На самом деле такая возможность не предоставляется непосредственно языком HTML, а реализуется несколько искусственно. Это вовсе не означает, что так делать не рекомендуется или предосудительно, а лишь означает, что здесь не будут применяться никакие специальные языковые конструкции HTML.
Чтобы понять идею, необходимо разобраться в механизме реализации списков на HTML-страницах. Оказывается, что тэг списка <UL> (как, впрочем, и тэги списков других типов, рассматриваемых ниже) выполняет единственную задачу — указывает браузеру, что вся информация, располагаемая после данного тэга должна отображаться со сдвигом вправо (отступом) на некоторую величину. Тэги <LI>, указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка.
Если же требуется построить список с графическими маркерами, то можно вообще обойтись без тэгов <LI>. Достаточно будет перед каждым элементом списка вставить желаемое графическое изображение. Единственной задачей, которую нужно при этом решить, будет отделение элементов списка друг от друга. Для этого можно использовать тэги абзаца <P> или принудительного перевода строки <BR>. Пример реализации такого списка показан ниже:
<HTML>
<HEAD>
<TITLE>Маркированный список</TITLE>
</HEAD>
<BODY>
<UL>
<B>Знаки зодиака:</B><BR>
<IMG SRC="Green_ball.gif">Овен<BR>
<IMG SRC="Green_ball.gif">Телец<BR>
<IMG SRC="Green_ball.gif">Близнецы<BR>
<IMG SRC="Green_ball.gif">Рак<BR>
<IMG SRC="Green_ball.gif">Лев<BR>
<IMG SRC="Green_ball.gif">Дева<BR>
<IMG SRC="Green_ball.gif">Весы<BR>
<IMG SRC="Green_ball.gif">Скорпион<BR>
<IMG SRC="Green_ball.gif">Стрелец<BR>
<IMG SRC="Green_ball.gif">Козерог<BR>
<IMG SRC="Green_ball.gif">Водолей<BR>
<IMG SRC="Green_ball.gif">Рыбы
</UL>
</BODY>
</HTML>
Файл Green_ballнаходится в папке с лабораторным практикумом. Скопируйте (НЕ ПЕРЕМЕЩАЙТЕ) его в папку с вашими страницами. Созданную страницу сохраните с именемlab8_2.html.
В приведенном примере в качестве маркера элементов списка используется графически файл Green_ball.gif. Заметим, что использование графики на HTML-страницах может значительно увеличить объем передаваемой информации. Однако в данном случае это увеличение крайне незначительно. Здесь для всех маркеров используется один и тот же файл, который будет передан только один раз. Размеры файла, содержащего маленькое изображение, тоже крайне незначительны.
Нумерованный список
Другим типом списков, реализованных в языке HTML, является нумерованный список. Иначе списки такого типа называют упорядоченными. Последнее название часто используется как формальный перевод названия соответствующего тэга <OL>, с помощью которого и организуются списки такого типа в HTML-документах (OL — Ordered List, упорядоченный список).
Списки данного типа обычно представляют собой упорядоченную последовательность отдельных элементов. Отличием от маркированных списков является то, что в нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Вид нумерации зависит от браузера и может задаваться параметрами тэгов списка. В остальном реализации нумерованных списков во многом похожа на реализацию маркированных списков.
Тэги <OL>и <LI>
Для создания нумерованного списка следует использовать тэг-контейнер <OL> </OL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя таким образом список от основного содержимого документа.
Как и для маркированного списка, каждый элемент нумерованного списка и начинаться тэгом <LI>.
Приведем пример HTML-документа, использующего нумерованный список.
<HTML>
<HEAD>
<TITLE>Пример нумерованного списка</TITLE>
</HEAD>
<BODY>
<OL>
<B>Наиболее яркие звезды, видимые с Земли:</B>
<LI>Сириус
<LI>Канопус
<LI>Аретур
<LI>Альфа Центавра
<LI>Вега
<LI>Капелла
<LI>Ригель
<LI>Процион
<LI>Ахернар
<LI>Бета Центавра
<LI>Бетельгейзе
<LI>Альдебаран
<BR>…
<LI value=58>Мицар
<BR>…
<LI value=75>Полярная
</OL>
</BODY>
</HTML>
Сохраните эту страницу с именем lab8_3.html.
В тэге <OL> могут быть указаны следующие параметры: COMPACT, TYPE и START.
Параметр COMPACT имеет тот же смысл, что и у маркированных списков. Параметр TYPE используется для задания вида нумерации списка. Может принимать следующие значения:
TYPE=А — задает маркеры в виде прописных латинских букв;
TYPE=а — задает маркеры в виде строчных латинских букв;
TYPE=I— задает маркеры в виде больших римских цифр;
TYPE=i— задает маркеры в виде маленьких римских цифр;
TYPE=1 — задает маркеры в виде арабских цифр.
По умолчанию всегда используется значение TYPE=1, т. е. нумерация при помощи арабских цифр. Это касается и вложенных нумерованных списков. Здесь, в отличие от маркированных списков, браузеры по умолчанию не делают различной нумерацию на различных уровнях вложенности списков. Заметим, что после номера элемента списка всегда дополнительно выводится знак "точка".
Параметр TYPE с теми же значениями может употребляться для указания вида нумерации отдельных элементов списка. Для этого параметр TYPE с соответствующим значением разрешено указывать в тэге элемента списка <LI>.
Пример записи: <LI TYPE=А>.
Параметр START тэга <OL> позволяет начать нумерацию списка не с единицы. В качестве значения параметра START всегда должно указываться натуральное число, вне зависимости от вида нумерации списка. Приведем пример:
<OLTYPE=ASTART=5>.
Такая запись определяет нумерацию списка с прописной латинской буквы "E". Для других видов нумерации запись start=5 задаст нумерацию, соответственно, с числа "5", римской цифры "V" и т. д.
Изменение вида нумерации списка и значений номеров допустимо производить для любого элемента списка. Тэг <LI> для нумерованных списков разрешает использовать параметры TYPE и VALUE. Параметр TYPE может принимать такие же значения, как и для тэга <OL>.
Пример записи: <LI TYPE=A>