Графические маркеры списка

В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных HTML-документов. На самом деле такая возможность не предоставляется непосредственно языком HTML, а реализуется несколько искусственно. Это вовсе не означает, что так делать не рекомендуется или предосудительно, а лишь означает, что здесь не будут применяться никакие специальные языковые конструкции HTML.

Чтобы понять идею, необходимо разобраться в механизме реализации списков на HTML-страницах. Оказывается, что тег списка <UL> (как, впрочем, и теги списков других типов, рассматриваемых ниже) выполняет единственную задачу — указывает браузеру, что вся информация, располагаемая после данного тега должна отображаться со сдвигом вправо (отступом) на некоторую величину. Теги <LI>, указывающие на отдельные элементы списка, обеспечивают вывод стандартных маркеров элементов списка.

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

<HTML>

<HEAD>

<TITLE>Маркированный список</TITLE>

</HEAD>

<BODY>

<UL>

Знаки зодиака:

<IMG SRC="Green_ball.gif"> Овен

<IMG SRC="Green_ball.gif"> Телец

<IMG SRC="Green_ball.gif"> Близнeцы

<IMG SRC="Green_ball.gif"> Paк

<IMG SRC="Green_ball.gif"> Лeв

<IMG SRC="Green_ball.gif"> Дева

<IMG SRC="Green_ball.gif"> Весы

<IMG SRC="Green_ball.gif"> Скорпион

<IMG SRC="Green_ball.gif"> Cтpeлeц

<IMG SRC="Green_ball.gif"> Козерог

<IMG SRC="Green_ball.gif"> Водолей

<IMG SRC="Green_ball.gif"> Рыбы

</UL>

</BODY>

</HTML>

В приведенном примере в качестве маркера элементов списка используется графический файл Green_ball.gif. Заметим, что использование графики на HTML-страницах может значительно увеличить объем передаваемой информации. Однако в данном случае это увеличение крайне незначительно. Здесь для всех маркеров используется один и тот же файл, который будет передан только один раз. Размеры файла, содержащего маленькое изображение, также крайне незначительны.