2.3 Списки на веб-странице. Создание сайтов (самоучитель)

Иногда при создании веб-страниц бывает полезно (а порой даже необходимо) как-то упорядочить представленную на них информацию. В традиционном языке html для этого применяют списки и таблицы. Более гибко это можно сделать с помощью каскадных таблиц стилей, однако сначало мы рассмотрим стандартные методы.

В качестве 1-го примера давайте рассмотрим веб-страницу гипотетической фирмы "Лентяй". Допустим, мы сначала хотим перечислить предоставляемые услуги, а затем указать последовательность действий, необходимых для их заказа.

Маркированные и нумерованные списки Перечисление услуг хорошо смотрится в виде маркированного списка. Для его организации применяется тег <UL>. Все, что находится между ним и его открывающим тегом (</UL>), считается маркированным списком. Каждый элемент списка должен быть при этом обозначен тегом <LI>. Этот тег можно употреблять без закрывающего (хотя можно и с ним). Т.е., можно написать:

<LI>Вкручивание электрических лампочек или <LI>Вкручивание электрических лампочек</LI>

И то и другое будет считаться элементом списка, и практически все браузеры интерпретируют эти записи корректно. Каждый элемент маркированного списка будет при просмотре отмечаться закрашенным кружком.

Что о касается перечисления порядка действий для заказа, то его целесооб- разно организовать в виде нумерованного списка. Для этого служит тег <OL>, а элементы списка также обозначаются тегом <LI>. И нумерованные, и маркированные списки в большинстве браузеров выделяются небольшим отступом. Итак, давайте посмотрим, как может выглядеть эта страничка.

<html><head><title>фирма "ЛЕНТЯЙ"</title></head><BODY BGCOLOR="#D2FFFF" TEXT="#003737" LINK="#006A6A"

VLINK="#006A6A" ALINK="#006A6A>

<DIV ALIGN"center><H1> фирма «ЛЕНТЯЙ «</H1></DIV>

<FONT SIZE="+l>Haшa фирма предоставляет следующие услуги </FONT>

<UL><li>Вкручивание электрических лампочек

<li>Подметание пола

<li>Вынесение мусора из квартиры

<li>Мытье посуды

<li>Дефрагментация жестких дисков </UL>

<FONT SIZE="+l>Чтобы воспользоваться нашими услугами,следует: </FONT>

<OL>

<li>Зарегистрироваться (<a HRЕF="#reg.phpl> здесь</a>)

<li>Заполнить форму заказа

(<a HRЕF="forml.phpl>здесь</a>)

<li>Получив письмо с паролем, послать пустой ответ <li>Заполнить форму-подтверждение заказа

(<a HRЕF="form2.phpl>здесь</a>)

<li>Приготовить деньги для оплаты услуг </OL>

</body></html>

Рис.2.9. Применение маркированного и нумерованного списков

Результат показан на рис.2.9. Как видите, мы здесь не употребляли закрывающий тег </LI>. Браузер обычно все равно понимает, где кончается элемент списка, поскольку после любого элемента стоит либо тег следующего элемента <U>, либо тег завершения списка </UL> или </OL>.

Другой вопрос, что будет, если код написан некорректно: например, указаны теги <LI> без тега списка <OL> или <UL>, или в списке есть элементы без тега <LI> ?

Вообще говоря, такого допускать не следует, так как некоторые "строгие" браузеры в этом случае не будут отображать практически ничего. Большинство популярных браузеров, правда, попытаются угодить даже автору странички, написавшему такой код. Например, Internet Explorer 5, если встретит теги <LI> без тега начала списка, интерпретирует их как маркирован ный список, хотя и не будет выделять его отступом, а не помеченные тегом <LI> элементы списка оставит без маркера. Однако, повторяю, это из ряда вон выходящие случаи.

Благодаря тому, что списки отображаются с отступом, легко можно организовывать вложенные списки с помощью тех же тегов. Для этого надо просто начать новый список внутри уже начатого. Схема расположения тегов списка при этом получится примерно такая:

<UL>

</UL>

Разумеется, отступы здесь обозначены только для наглядности - чтобы не перепутать, какой закрывающий тег к какому открывающему тегу относится. Далее, при вложении нескольких маркированных списков хочется каждый из них обозначить своим типом маркера. Некоторые браузеры так и делают по умолчанию. Например, Internet Explorer элементы 1-го списка из серии вложенных обозначает закрашенным кружком, элементы 2-го - незакрашенным кружком, а элементы всех следующих - квадратиком. Однако, во-первых, так поступают не все браузеры, а во-вторых, нам может захотеться изменить порядок маркеров. Для явного определения типа маркера в теге <UL> следует установить атрибут TYPE=. У него могут быть 3 значения: "disc", "square" и "circle", что означает, соответственно, закрашенный кружок, квадратик и незакрашенный кружок.

В теге нумерованного списка <OL> можно установить атрибут TYPE= для определения типа нумерации. Если не указано ничего или установлено значение TYPE="1", то нумерация происходит обычными цифрами. Если установить TYPE="I" или "i", то получится нумерацию римскими цифрами (соответственно, с использованием прописных или строчных букв).

И, наконец, для буквенных обозначений элементов списка устанавливают атрибут TYPE="A" или "а". Кроме того, иногда может потребоваться начать нумерацию не с единицы, а с какого-нибудь иного числа. Для этого существует атрибут START=. Например, запись <OL START="43> кызовет нумерацию элементов списка, начиная с числа 43. Далее пойдут элементы с номерами 44, 45 и т.д.

Может возникнуть естественный вопрос: а как использовать другие типы маркеров списков - разнообразные галочки, цветные кружки и прочие, которые мы так часто видим в WWW,? Действительно, такая возможность есть, однако мы рассмотрим ее несколько позже, в разделе Si.3. А пока приведем пример кеб-странички фирмы "Лентяй" с использованием вложенных списков:

<!DOCTYPE html><html><head>

<title>Фирма "ЛЕНТЯЙ"</title></head><BODY BGCOLOR=#D2FFFF TEXT="#003737" LINK=#006A6A VLINK=#006A6A ALINK="#006A6A>

<DIV ALING=center><H1>Фирма «ЛEHTЯЙ"</H1></DIV>

Haшa фирма предоставляет следующие услуги:

<LI>Бытовые услуги

<LI>Вкручивание электрических лампочек

<LI>Услуги по наведению чистоты

<LI>Подметание пола

<LI>Вынесение мусора из квартиры

<LI>Мытье посуды

</UL>

<LI>Приготовление пищи

<LI>Компьютерные услуги

<LI>Дефрагментация жестких дисков

<LI>Переустановка Windows

</UL>

Для того, чтобы воспользоваться нашими услугами, следует:

<OL>

<LI>Зарегистрироваться

(<A HREF=reg.phpl>здесь</A>)

<LI>Заполнить форму заказа

(<A HREF=forml.php1>здесь</А>)

<LI>Пoдтвepдить заказ:

<LI>Получив письмо с паролем подтверждения, послать пустой ответ, нажав "Reply"

<LI>Заполнить форму-подтверждение заказа

(<A HREF=form2.phpl>здесь</A>)

</OL>

<LI>Приготовить деньги для оплаты услуг

</OL>

</body></html>

Результат показан на рис.2.10. Между прочим, при желании можно изменить вид маркера даже у отдельного элемента списка. Для этого следует установить атрибут TYPE= у тега <LI>. Однако это не будет смотреться очень хорошо, за исключением специальных случаев.

Мы пока намеренно не приводим примеры того, что могло бы быть в файлах reg.phpl, form! .phpl и form2.phpl, на которые есть ссылки в этом примере. Списки определений Теперь давайте рассмотрим совершенно иной пример. Допустим, у нас уже есть сайт, на котором используется довольно много терминов, и мы хотим сделать отдельную страничку, поясняющую их. Давайте попробуем организовать такую страничку-словарь, а заодно рассмотрим еще 1 вид html-списка. Кстати, впоследствии мы вполне сможем использовать эту страничку как шаблон для своего словаря терминов.

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

Рис.2.10. Применение вложенных списков

щее место в словаре. Для этого каждая буква алфавита должна быть оформлена как гиперссылка, например: <A HREF=#BukvaV>B</A>

а в соответствующее место в словаре нужно не забыть поставить соответствующий якорь, например:

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

Кстати, цветовую схему нужно в этом случае выбрать тоже достаточно строгую. Можно вообще подать черные буквы на белом фоне, но в нашем примере мы решили все же чуть-чуть смягчить контраст.

Кроме того, читателю нужно предоставить возможность быстрого перемещения в любое место словаря. Вы скажете, что у нас уже есть для этого алфавит? Но ведь он расположен в верхней части страницы, а в поисках описаний терминов (кроме нескольких первых), пользователь неизбежно уйдет по страничке вниз и алфавит ему будет недоступен. Идеальный случай, когда алфавит все время виден сверху, а пока примем простое решение: время от времени (лучше всего в конце каждой буквенной рубрики) поставим небольшие (в смысле напечатанные мелким шрифтом) гиперссылки, ведущие наверх, к алфавиту:

<SMALL><A HREF=#Top>B начало</А></SMALL>

Теперь обсудим, как организовать объяснение терминов. Для этого в html предусмотрен тег <DL>. Все, что находится между ним и его закрывающей парой </DL>, считается списком определений. Внутри этого списка возможно применение тегов <DT> для выделения самих терминов и <DD> для их определений. Теги <DT> и <DD> могут использоваться без соответствующей закрывающей пары (сравните с рассмотренным ранее тегом <LI>). Элементы, обозначенные как термины (<DT>), выводятся практически без отступа, а элементы, обозначенные как определения (<DD>) - с довольно большим отступом. Ни те, ни другие элементы не маркируются.

На наш взгляд, хорошо бы еще элементы-термины выделять, например полужирным начертанием. Некоторые браузеры так и делают, однако большинство - нет. Поэтому в нашем примере мы сами на всякий случай заботимся об этом, заключая каждый термин между тегами <В>...</В>.

Итак, приведем пример странички-словаря терминов. Для экономии места алфавит здесь обрывается на букве "Е". Далее его легко можно продолжить самостоятельно (а если терминов много, то, возможно, стоит его продолжить в другом файле, чтобы не заставлять пользователя ждать загрузки слишком большого файла с сервера). Более того, здесь заполнены только разделы на буквы "А" и "Б", чего для примера вполне достаточно.

<!DOCTYPE html>

<html><head><title>Словарь терминов</title></head><BODY BGCOLOR=#EAEAEA TEXT=Black LINK=#7A3F51 VLINK=#7A3F51 ALINK=#7A3F51>

<H1><A NАМЕ=Тор>Словарь терминов</А></Н1>

<А HREF="#BukvaB>Б</A>

<А HREF="#BukvaV>B</A>

<А HREF=#BukvaG>Г</A>

<А HREF="#BukvaD>Д</A>

<А HREF=#BukvaE>E</A>

<DT><A NAME=avtentich><B>ABTEHTИЧECKИЙ КАДАНС</В></А>

<DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой<DT><A NAME=aliquot><B>AЛИKBOTHЫE СТРУНЫ</В></А>

<DD>резонирующие струны, к которым исполнитель не прикасается во время игры

<DT><A NAME=atakta><B>ATAKTA</B></A>

<DD>гармоническйй элемент на басу нижнего или верхнего вводного тона</DL>

<SMALL><A HREF=#Top>B начало</А></SMALL>

<DT><A NAME=bagatel><B>БАГАТЕЛЬ</B></A>

<DD>небольшая нетрудная для исполнения пьеса

<DT><A NAME=bartok><B>БAPTOKOBCKOE ПИЦЦИКАТО</В></А>

<DD>сильный щипок струны с последующим ударом струны о гриф

<DT><A NAME=bonang><B>БOHAHГ</B></A>

<DD>Ha6op из 10-12 гонгов разного размера</DL>

<SMALL><A HREF=#Top>B начало</А></SMALL>

<SMALL><A HREF=#Top>B начало</А></SMALL>

<DL></DL><SMALL><A HREF=#Top>B начало</А></Small>

</DL>

<SMALL><A HREF=#Top>B начало</А></Small>

</DL>

<SMALL><A HREF=#Top>B начало</А></Small>

</body></html>

Результат показан на рис.2.11. Как видите, все достаточно строго и наглядно. Кстати, обратите внимание на то, что каждый термин мы также оформили как якорь. Это сделано для того, чтобы с других страниц нашего предполагаемого сайта можно было ссылаться непосредственно на объяснение этого термина. Например, если наш файл-словарь терминов называется glossary, html, то в каком-нибудь другом файле на этом сайте мы можем написать приблизительно следующее: характеризуется частым использованием <А HREF=glossary.phpl #bartok> бapтоковскoгo пиццикато</А>, а также приемов типа постукивания по декам и обечайке.

Рис.2.11. Использование списка терминов

В этом случае, пользователь, читающий этот текст и не понявший смысл термина бартоковское пиццикато может щелкнуть на нем и попасть в соответствующий раздел словаря терминов, причем не куда-нибудь, а точно в то место, где этот термин поясняется.

Если вы внимательно просмотрели последний листинг, то, вероятно, заметили еще одну строку, значение которой ранее не пояснялось:

Здесь применен тег <МЕТА>. Он может, вообще говоря, использоваться для ввода различной дополнительной информации: ключевых слов, описания веб-страницы, указания ее автора, программы-генератора и т.п. Но в данном случае этот тег используется для определения кодировки символов. Поскольку в тексте используются русские буквы, т.е., символы с ASCII-кодами, большими 128, необходимо указать, в какой кодировке эти символы нужно отображать. Иногда бывает полезно указать кодировку в явном виде.

Кстати, если вы работаете в другой кодировке, например, KOI8, вам следует ввести другое значение - "koi8-r", иначе эта страничка будет нечитаемой.

К сожалению, для явного указания кодировки приходится использовать столь длинный тег. Многие браузеры сейчас начинают понимать и просто указание "без лишних слов": <МЕТА CHARSET=utf-8>. Однако этот метод не универсален, поэтому для лучшей совместимости стоит всегда писать длинную строку, приведенную выше.

Вперед

Отвечу на любые вопросы. С уважением, Дмитрий Владимирович.

Ваше письмо	×