Как создать списки на веб-странице
Результат показан на рис. 2.9. Как видите, мы здесь не употребляли закрывающий тег </LI>. Браузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента <U>, либо тег завершения списка </UL> или </OL>.
Другой вопрос, что будет, если код написан некорректно: например, указаны теги <LI> без тега списка <OL> или <UL>, или в списке есть элементы без тега <LI>?
Вообще говоря, такого допускать не следует, так как некоторые “строгие” браузеры в этом случае не будут отображать практически ничего. Большинство популярных браузеров, правда, попытаются угодить даже автору странички, написавшему такой код. Например, Internet Explorer 5, если встретит теги <LI> без тега начала списка, интерпретирует их как маркирован ный список, хотя и не будет выделять его отступом, а не помеченные тегом <LI> элементы списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие случаи.
Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема расположения тегов списка при этом получится примерно такая:
<UL> <UL> <UL> </UL> </UL></UL>Разумеется, отступы здесь обозначены только для наглядности – чтобы не перепутать, какой закрывающий тег к какому открывающему тегу относится. Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим типом маркера. Некоторые браузеры так и делают по умолчанию. Например, Internet Explorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы второго – незакрашенным кружком, а элементы всех следующих – квадратиком. Однако, во-первых, так поступают не все браузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге <UL> следует установить атрибут TYPE=. У него могут быть три значения: "disc", "square" и "circle", что означает, соответственно, закрашенный кружок, квадратик и незакрашенный кружок.
В теге нумерованного списка <OL> можно установить атрибут TYPE= для определения типа нумерации. Если не указано ничего или установлено значение TYPE="1", то нумерация происходит обычными цифрами. Если установить TYPE="I" или "i", то получится нумерацию римскими цифрами (соответственно, с использованием прописных или строчных букв).
И, наконец, для буквенных обозначений элементов списка устанавливают атрибут TYPE="A" или "а". Кроме того, иногда может потребоваться начать нумерацию не с единицы, а с какого-нибудь иного числа. Для этого существует атрибут START=. Например, запись <OL START="43"> вызовет нумерацию элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44, 45 и т. д.
Может возникнуть естественный вопрос: а как использовать другие типы маркеров списков – разнообразные галочки, цветные кружки и прочие, которые мы так часто видим в WWW,? Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, в разделе Si.3. А пока приведем пример веб-странички фирмы “Лентяй” с использованием вложенных списков:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <head> <title>Фирма "ЛЕНТЯЙ"</title></head> <body BGCOLOR="#D2FFFF" TEXT="#003737" LINK="#006A6A" VLINK="#006A6A" ALINK="#006A6A"> <DIV ALING="center"> <H1>Фирма «ЛЕНТЯЙ»</H1> </DIV> <FONT SIZE="+1">Наша фирма предоставляет следующие услуги: </FONT> <UL TYPE="disc"> <LI>Бытовые услуги <UL TYPE="square"> <LI>Вкручивание электрических лампочек <LI>Услуги по наведению чистоты <UL TYPE="circle"> <LI>Подметание пола <LI>Вынесение мусора из квартиры <LI>Мытье посуды </UL> </UL> <LI>Приготовление пищи <LI>Компьютерные услуги <UL TYPE="square"> <LI>Дефрагментация жестких дисков <LI>Переустановка Windows </UL> </UL> <FONT SIZE="+1">Для того, чтобы воспользоваться нашими услугами, следует:</FONT> <OL> <LI>Зарегистрироваться ( <A HREF="reg.html">здесь</A>) <LI>Заполнить форму заказа ( <A HREF="forml.htm1">здесь</A>) <LI>Подтвердить заказ: <OL TYPE="I"> <LI>Получив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply" <LI>Заполнить форму-подтверждение заказа ( <A HREF="form2.html">здесь</A>) </OL> <LI>Приготовить деньги для оплаты услуг </OL></body> </html>Результат показан на рис. 2.10. Между прочим, при желании можно изменить вид маркера даже у отдельного элемента списка. Для этого следует установить атрибут TYPE= у тега <LI>. Однако это не будет смотреться очень хорошо, за исключением специальных случаев.
Мы пока намеренно не приводим примеры того, что могло бы быть в файлах reg.html, form!.html и form2.html, на которые есть ссылки в этом примере.