Лекция 17 Списки и рамки в HTML
. Списки
Иногда при создании веб-страниц бывает полезно как-то упорядочить представленную на них информацию. Традиционно для этого применяют списки. В качестве первого примера давайте рассмотрим веб-страницу гипотетической фирмы «Лентяй». Допустим, мы сначала хотим перечислить предоставляемые услуги, а затем указать последовательность действий, необходимых для их заказа.
Маркированные и нумерованные списки
Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег <UL> (UnorererList). Все, что находится между ним и его закрывающим тегом (</UL>), считается маркированным списком. Каждый элемент списка должен быть при этом обозначен тегом <LI>. Этот тег можно употреблять без закрывающего (хотя можно и с ним). То есть, можно написать:
<LI>Вкручивание электрических лампочек
ИЛИ
<LI>Вкручивание электрических лампочек</LI>
И то и другое будет считаться элементом списка, и практически все броузеры интерпретируют эти записи корректно. Каждый элемент маркированного списка будет при просмотре отмечаться закрашенным кружком.
Что касается перечисления порядка действий для заказа, то его целесообразно организовать в виде нумерованного списка. Для этого служит тег <OL>,(OrdererList) а элементы списка также обозначаются тегом <LI>. И нумерованные, и маркированные списки в большинстве броузеров выделяются небольшим отступом.
Итак, давайте посмотрим, как может выглядеть эта страничка. (Элемент выравнивания DIV – парный, SMALL – уменьшает шрифт)
<HTML>
<НЕАD>
<ТIТLЕ>Фирма "ЛЕНТЯЙ"</ТIТLЕ> </НЕАD>
<BODY BGCOLOR="#D2FFFF" ТЕХТ="#003737" LINK="#006A6A" VLINK="#006A6A" ALINK="#006A6A">
<DIV ALIGN=”center”><H1>Фирма «ЛЕНТЯЙ»</H1></DIV>
<FONTSIZE="+1">Наша фирма предоставляет следующие услуги </FONT>
<UL>
<LI>Вкручивание электрических лампочек
<LI>Подметание пола
<LI>Вынесение мусора из квартиры
<LI>Мытье посуды
<LI>Дефрагментация жестких дисков
</UL>
<FONTSIZE="+1">Чтобы воспользоваться нашими услугами,следует:
</FONT>
<OL>
<LI>Зарегистрироваться (<A HREF="reg.html">здесь</A>)
<LI>Заполнить форму заказа (<A HREF="form1.html">здесь</A>)
<LI>Получив письмо с паролем, послать пустой ответ
<LI>Заполнить форму-подтверждение заказа
(<А HREF="form2.html">Здесь<:/A>)
<LI>Приготовить деньги для оплаты услуг </OL>
</BODY> </HTML>
См . файл :spiski1.html
. Как видите, мы здесь не употребляли закрывающий тег </LI>. Броузер обычно все равно понимает, гдекончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента <LI>, либо тег завершения списка </UL> или </OL>.
Другой вопрос, что будет, если код написан некорректно: например, указаны теги <LI> без тега списка <OL> или <UL>, или в списке есть элементы без тега <LI>?
Вообще говоря, такого допускать не следует, так как некоторые «строгие» броузеры в этом случае не будут отображать практически ничего. Большинство популярных броузеров, правда, попытаются угодить даже автору странички, написавшему такой код. Например, InternetExplorer 5, если встретит теги <LI> без тега начала списка, интерпретирует их как маркированный список, хотя и не будет выделять его отступом, а не помеченные тегом <LI> элементы списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие случаи.
Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема расположения тегов списка при этом получится примерно такая:
<UL>
<UL>
<UL>
</UL>
</UL>
</UL>
Разумеется, отступы здесь обозначены только для наглядности — чтобы не перепутать, какой закрывающий тег к какому открывающему тегу относится.
Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим типом маркера. Некоторые броузеры так и делают по умолчанию. Например, InternetExplorer элементы первого списка из серии вложенных обозначает закрашенным кружком, элементы второго — незакрашенным кружком, а элементы всех следующих — квадратиком. Однако, во-первых, так поступают не все броузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге <UL> следует установить атрибут TYPE=. У него могут быть три значения: "disc", "square" и "circle", что означает, соответственно, закрашенный кружок, квадратик и незакрашенный кружок.
В теге нумерованного списка <OL> можно установить атрибут TYPE= для определения типа нумерации. Если не указано ничего или установлено значение T
Наверняка у вас есть товары или услуги, продажа которых приносит вам максимальную прибыль. Для быстрого старта в сети вам необходимо создание посадочной страницы (одностраничного сайта), на которой будет размещена информация о маржинальных товарах/услугах интернет магазина. За 8 лет опыта разработки конверсионных страниц мы выработали оптимальную структуру, которая позволит привлекать через landing page больше продаж. На такую структуру «одевается» ваш контент — фирменный стиль, тексты, фотографии, уникальные торговые предложения, после чего страница выходит в свет. Разработка лендинга и запуск в сети — до 7 рабочих дней. Стоит отметить, что в разработку самой посадочной страницы входит и написание копирайтером продающих текстов для вашего бизнеса, чтобы каждый посетитель страницы захотел совершить покупку именно у вас. Результат: качественно разработаная продающая посадочная страница, которая готова приносить вам новых клиентов.