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

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

Маркированные и нумерованные списки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы пока намеренно не приводим примеры того, что могло бы быть в файлах reg.html, form1 .html и form2.html, на которые есть ссылки в этом примере, поскольку подобные вещи чуть более сложны и потому будут рассмотрены в главе 7.

Списки определений

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

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

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

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

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

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

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

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

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

Результат показан на рис. 2.12. Как видите, все достаточно строго и наглядно. Кстати, обратите внимание на то, что каждый термин мы также оформили как якорь. Это сделано для того, чтобы с других страниц нашего предполагаемого сайта можно было ссылаться непосредственно на объяснение этого термина. Например, если наш файл-словарь терминов называется glossary.html, то в каком-нибудь другом файле на этом сайте мы можем написать приблизительно следующее:

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

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

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

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

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