Как создать списки на веб-странице
Кстати, цветовую схему нужно в этом случае выбрать тоже достаточно строгую. Можно вообще подать черные буквы на белом фоне, но в нашем примере мы решили все же чуть-чуть смягчить контраст.
Кроме того, читателю нужно предоставить возможность быстрого перемещения в любое место словаря. Вы скажете, что у нас уже есть для этого алфавит? Но ведь он расположен в верхней части страницы, а в поисках описаний терминов (кроме нескольких первых), пользователь неизбежно уйдет по страничке вниз и алфавит ему будет недоступен. Идеальный случай, когда алфавит все время виден сверху, а пока примем простое решение: время от времени (лучше всего в конце каждой буквенной рубрики) поставим небольшие (в смысле напечатанные мелким шрифтом) гиперссылки, ведущие наверх, к алфавиту:
<SMALL><A HREF="#Top">В начало</A></SMALL>Теперь обсудим, как организовать объяснение терминов. Для этого в HTML предусмотрен тег <DL>. Все, что находится между ним и его закрывающей парой </DL>, считается списком определений. Внутри этого списка возможно применение тегов <DT> для выделения самих терминов и <DD> для их определений. Теги <DT> и <DD> могут использоваться без соответствующей закрывающей пары (сравните с рассмотренным ранее тегом <LI>). Элементы, обозначенные как термины (<DT>), выводятся практически без отступа, а элементы, обозначенные как определения (<DD>) – с довольно большим отступом. Ни те, ни другие элементы не маркируются.
На наш взгляд, хорошо бы еще элементы-термины выделять, например полужирным начертанием. Некоторые браузеры так и делают, однако большинство – нет. Поэтому в нашем примере мы сами на всякий случай заботимся об этом, заключая каждый термин между тегами <В>…</В>.
Итак, приведем пример странички-словаря терминов. Для экономии места алфавит здесь обрывается на букве “Е”. Далее его легко можно продолжить самостоятельно (а если терминов много, то, возможно, стоит его продолжить в другом файле, чтобы не заставлять пользователя ждать загрузки слишком большого файла с сервера). Более того, здесь заполнены только разделы на буквы “А” и “Б”, чего для примера вполне достаточно.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><HTML> <HEAD> <TITLE>Словарь терминов</TITLE> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;charset=windows-1251"></HEAD> <BODY BGCOLOR="#EAEAEA" TEXT="Black" LINK="#7A3F51" VLINK="#7A3F51" ALINK="#7A3F51"> <H1><A NAME="Top">Словарь терминов</A></H1> <HR ALIGN="left" WIDTH="40%"> <BR> <A HREF=="#BukvaA">А</A> <A HREF="#BukvaB">Б</A> <A HREF="#BukvaV">В</A> <A HREF="#BukvaG">Г</A> <A HREF="#BukvaD">Д</A> <A HREF="#BukvaE">Е</A> </HR> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaA">А</A></H1> <DL> <DT><A NAME="avtentich"><B>АВТЕНТИЧЕСКИЙ КАДАНС</B></A></DT> <DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой</DD> <DT><A NAME="aliquot"><B>АЛИКВОТНЫЕ СТРУНЫ</B></A></DT> <DD>резонирующие струны, к которым исполнитель не прикасается во время игры</DD> <DT><A NAME="atakta"><B>ATAKTA</B></A></DT> <DD>гармонический элемент на басу нижнего или верхнего вводного тона</DD> </DL> <SMALL><A HREF="#Top">В начало</A></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaB">B</A></H1> <DL> <DT><A NAME="bagatel"><B>БАГАТЕЛЬ</B></A></DT> <DD>небольшая нетрудная для исполнения пьеса</DD> <DT><A NAME="bartok"><B>БАРТОКОВСКОЕ ПИЦЦИКАТО</B></A></DT> <DD>сильный щипок струны с последующим ударом струны о гриф</DD> <DT><A NAME="bonang"><B>БОНАНГ</B></A></DT> <DD>Набор из 10-12 гонгов разного размера</DD> </DL> <SMALL><A HREF="#Top">В начало</A></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaV">В</A></H1> <SMALL><A HREF=<"#Top">В начало</A></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME=<"#BukvaG">Г</A></H1> <SMALL><A HREF="#Top">В начало</A></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME=="#BukvaD">Д</A></H1> <SMALL><A HREF="#Top">В начало</A></SMALL> <HR ALIGN="left" WIDTH="40%"> <H1><A NAME="BukvaE">Е</A></Hl> <SMALL><A HREF="#Top">В начало</A></SMALL></BODY></HTML>