2015-05-10
477
В качестве маркеров списка можно использовать графические изображения, что широко применяется для создания привлекательных, красиво оформленных 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-страницах может значительно увеличить объем передаваемой информации. Однако в данном случае это увеличение крайне незначительно. Здесь для всех маркеров используется один и тот же файл, который будет передан только один раз. Размеры файла, содержащего маленькое изображение, тоже крайне незначительны.
