Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
Любой список представляет собой контейнер <UL>, который устанавливает маркированный список, или <OL>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <LI>.
Маркированный список
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера <UL>, а каждый пункт списка начинается с тега <LI>, как показано ниже.
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
В списке непременно должен присутствовать закрывающий тег </UL>, иначе возникнет ошибка. Закрывающий тег </LI> хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.
В листинге 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Маркированный список</title>
</head>
<body>
<hr>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
<li>Крыса Лариса</li>
</ul>
<hr>
</body>
</html>Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется параметр type тега <UL>. Допустимые значения приведены в табл. 11.1
Тип списка Код HTML Пример
Список с маркерами в виде круга <ul type="disc">
<li>...</li>
</ul> Первый
Второй
Третий
Список с маркерами в виде окружности <ul type="circle">
<li>...</li>
</ul> Первый
Второй
Третий
Список с квадратными маркерами <ul type="square">
<li>...</li>
</ul> Первый
Второй
Третий
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в листинге 11.2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Маркированный список</title>
</head>
<body>
<p><strong>Изменение убеждений</strong></p>
<ul type="square">
<li>изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение - иудаизм и мусульманство вместе;</li>
<li>изменение веры в непогрешимость любимой партии;</li>
<li>убеждение в том, что инопланетяне существуют;</li>
<li>предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).</li>
</ul>
</body>
</html>Нумерованный список
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от параметров тега <OL>, который и применяется для создания списка. Каждый пункт нумерованного списка заключается в контейнер <LI>, как показано ниже.
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
Если не указывать никаких дополнительных параметров и просто написать тег <OL>, то по умолчанию применяется список с арабскими числами (1, 2, 3,...), как показано в листинге 11.3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Нумерованный список</title>
</head>
<body>
<p><strong>Работа со временем</strong></p>
<ol>
<li>создание пунктуальности (никогда не будете никуда опаздывать);</li>
<li>излечение от пунктуальности (никогда никуда не будете торопиться);</li>
<li>изменение восприятия времени и часов.</li>
</ol>
</body>
</html>Заметьте, что в нумерованном списке также добавляются автоматические отступы сверху, снизу и слева от текста.
В качестве нумерующих элементов могут выступать следующие значения:
арабские числа (1, 2, 3, ...);
прописные латинские буквы (A, B, C, ...);
строчные латинские буквы (a, b, c, ...);
прописные римские числа (I, II, III, ...);
строчные римские числа (i, ii, iii, ...).
Для указания типа нумерованного списка применяется параметр type тега <OL>. Его возможные значения приведены в табл. 11.2.
Тип списка Код HTML Пример
Арабские числа <ol type="1">
<li>...</li>
</ol> 1. Чебурашка
2. Крокодил Гена
3. Шапокляк
Прописные буквы латинского алфавита <ol type="A">
<li>...</li>
</ol> A. Чебурашка
B. Крокодил Гена
C. Шапокляк
Строчные буквы латинского алфавита <ol type="a">
<li>...</li>
</ol> a. Чебурашка
b. Крокодил Гена
c. Шапокляк
Римские числа в верхнем регистре <ol type="I">
<li>...</li>
</ol> I. Чебурашка
II. Крокодил Гена
III. Шапокляк
Римские числа в нижнем регистре <ol type="i">
<li>...</li>
</ol> i. Чебурашка
ii. Крокодил Гена
iii. Шапокляк
Чтобы начать список с определенного значения, используется параметр start тега <OL>. При этом не имеет значения, какой тип списка установлен с помощью параметра type, аргумент start одинаково работает и с римскими и с арабскими числами. В листинге 11.4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Римские числа</title>
</head>
<body>
<ol type="I" start="8">
<li>Король Магнум XLIV</li>
<li>Король Зигфрид XVI</li>
<li>Король Сигизмунд XXI</li>
<li>Король Хусбрандт I</li>
</ol>
</body>
</html>Список определений
Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера <DL>, термин — тегом <DT>, а его определение — с помощью тега <DD>. Вложение тегов для создания списка определений продемонстрировано в листинге 11.5.
<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
<dl>Список определений хорошо подходит для расшифровки терминов, создания глоссария, словаря, справочника и т.д. В листинге 11.6 показано одно из возможных использований этого вида списка.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Список определений</title>
</head>
<body>
<dl>
<dt>Тег</dt>
<dd>Тег - это специальный символ разметки, который применяется для вставки различных элементов на веб-страницу таких как: рисунки, таблицы, ссылки и др., и для изменения их вида.</dd>
<dt>HTML-документ</dt>
<dd>Обычный текстовый файл, который может содержать в себе текст, теги и стили. Изображения и другие объекты хранятся отдельно. Содержимое такого файла обычно называется HTML-код.</dd>
<dt>Сайт</dt>
<dd>Cайт - это набор отдельных веб-страниц, которые связаны между собой ссылками и единым оформлением.</dd>
</dl>
</body>
</html>Как видно , текст термина прижимается к левому краю окна браузера, а его определение сдвигается вправо.