Вернуться в Экономико-математическое моделированиеЛекция№17
Лекция 17 Списки и рамки в HTML
. Списки
Иногда при создании веб-страниц бывает полезно как-то упорядочить
представленную на них информацию. Традиционно для этого применяют списки. В
качестве первого примера давайте рассмотрим веб-страницу гипотетической
фирмы «Лентяй». Допустим, мы сначала хотим перечислить предоставляемые
услуги, а затем указать последовательность действий, необходимых для их
заказа.
Маркированные и нумерованные списки
Перечисление услуг хорошо смотрится в виде маркированного списка. Для его
организации применяется тег
(Unorerer List). Все, что находится между
ним и его закрывающим тегом (
), считается маркированным списком.
Каждый элемент списка должен быть при этом обозначен тегом
. Этот тег
можно употреблять без закрывающего (хотя можно и с ним). То есть, можно
написать:
Вкручивание электрических лампочек
ИЛИ
Вкручивание электрических лампочек
И то и другое будет считаться элементом списка, и практически все броузеры
интерпретируют эти записи корректно. Каждый элемент маркированного списка
будет при просмотре отмечаться закрашенным кружком.
Что касается перечисления порядка действий для заказа, то его целесообразно
организовать в виде нумерованного списка. Для этого служит тег
,(Orderer List) а элементы списка также обозначаются тегом - . И
нумерованные, и маркированные списки в большинстве броузеров выделяются
небольшим отступом.
Итак, давайте посмотрим, как может выглядеть эта страничка. (Элемент
выравнивания DIV – парный, SMALL – уменьшает шрифт)
<НЕАD>
<ТIТLЕ>Фирма "ЛЕНТЯЙ"ТIТLЕ> НЕАD>
ALINK="#006A6A">
Фирма «ЛЕНТЯЙ»
Наша фирма предоставляет следующие услуги
- Вкручивание электрических лампочек
- Подметание пола
- Вынесение мусора из квартиры
- Мытье посуды
- Дефрагментация жестких дисков
Чтобы воспользоваться нашими услугами,следует:
- Зарегистрироваться (здесь)
- Заполнить форму заказа (здесь)
- Получив письмо с паролем, послать пустой ответ
- Заполнить форму-подтверждение заказа
(<А HREF="form2.html">Здесь<:/A>)
- Приготовить деньги для оплаты услуг
См. файл:spiski1.html
. Как видите, мы здесь не употребляли закрывающий тег . Броузер обычно
все равно понимает, где кончается элемент списка, поскольку после любого
элемента стоит либо тег следующего элемента - , либо тег завершения
списка или
.
Другой вопрос, что будет, если код написан некорректно: например, указаны
теги
без тега списка или , или в списке есть элементы без
тега - ?
Вообще говоря, такого допускать не следует, так как некоторые «строгие»
броузеры в этом случае не будут отображать практически ничего. Большинство
популярных броузеров, правда, попытаются угодить даже автору странички,
написавшему такой код. Например, Internet Explorer 5, если встретит теги
- без тега начала списка, интерпретирует их как маркированный список,
хотя и не будет выделять его отступом, а не помеченные тегом - элементы
списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие
случаи.
Благодаря тому, что списки отображаются с отступом, легко можно
организовывать вложенные списки с помощью тех же тегов. Для этого надо
просто начать новый список внутри уже начатого. Схема расположения тегов
списка при этом получится примерно такая:
Разумеется, отступы здесь обозначены только для наглядности — чтобы не
перепутать, какой закрывающий тег к какому открывающему тегу относится.
Далее, при вложении нескольких маркированных списков хочется каждый из них
обозначить своим типом маркера. Некоторые броузеры так и делают по
умолчанию. Например, Internet Explorer элементы первого списка из серии
вложенных обозначает закрашенным кружком, элементы второго — незакрашенным
кружком, а элементы всех следующих — квадратиком