>>> Перейти на мобильный размер сайта >>>

Онлайн учебник по HTML

Основы HTML

Оформление списков в HTML-документах

В идеале, вопросы оформления списков мы должны были рассматривать в разд. "Оформление текста" ранее в этой главе, так как списки тоже состоят из текстовых строк и абзацев. Но тема списков достаточно велика, поэтому ей и был выделен отдельный раздел.

Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров.

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

Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом <ul> и его закрывающим близнецом </ul>. Отдельные элементы списка объявляются при помощи обозначающего тега <li>, который не имеет закрывающей пары. Точнее, закрывающий тег </li> может применяться, но он необязателен.

Примечание
Использовать необязательные закрывающие теги в HTML-документах имеет смысл, если в последующем мы собираемся отображать их при помощи XML-браузеров. О новом стандарте XML, который со временем должен будет сменить HTML. Обязательным условием корректного распознавания документов в ХМ L является обязательное присутствие всех закрывающих тегов.

Приведем простейший пример использования нумерованного списка

Листинг 1.18

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<title>Mapкированный список</title> <body> <р>Это обычный текст. </р>
<ul>
<li> Первый пункт списка
<li> Второй пункт списка
</ul>
</body>
</html>

Результат отображения данного кода в окне просмотра браузера показан на рис. 1.17.

Списки в HTML

Рис. 1.17. Окно браузера с результатом отображения файла, приведенного в листинге 1.18

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

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

Значение disc указывает браузеру, что следует использовать маркеры в виде маленького заполненного круга.
Значение circle задает маркер в виде окружности.
Значение square устанавливает маркер в виде маленького прямоугольника.

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

Листинг 1.19

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mapкированный список</title> <body>
<ul>
<li type="circle">Первый пункт списка
<li type="disc">Bторой пункт списка
<li type="square">Tpeтий пункт списка
</ul>
</body>
</html>

Результат отображения данного кода в окне просмотра браузера показан на рис. 1.18.

Списки в HTML

Рис. 1.18. Окно браузера с результатом отображения файла, приведенного в листинге 1.19

Необходимо отметить, что как именно будет отображен маркер того или иного типа зависит только от браузера, и маркеры не обязаны быть одинаковыми в различных браузерах. Однако общее подобие всегда будет сохранено, и окружность всегда останется окружностью, а прямоугольник — прямоугольником.

Также в теге <li> может использоваться параметр compact, применяемый без каких-либо значений. Если его ввести в состав искомого тега, то браузер должен будет отобразить содержимое элемента списка более компактно. Однако параметр является директивным, и отработка его лежит только на совести производителей того или иного браузера. Мне не удалось заметить каких-либо ощутимых изменений во внешнем виде элементов списка при использовании данного параметра.

Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов <ol> и </ol>. А элементы списка объявляются при помощи все того же тега <li>. Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер.

Листинг 1.20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
</title>Нумерованный cписок</title>
<body>
<ol>
<li>Первый пункт списка
<li>Bторой пункт списка
<li>Tpeтий пункт списка
</ol>
</body>
</html>

Списки в HTML

Рис. 1.19. Окно браузера с результатом отображения файла, приведенного в листинге 1.20

Опять-таки, при использовании стандартных "умолчальных" значений нумерованный список выглядит просто и правильно, но этого может быть недостаточно. Для изменения его параметров и внешнего вида, т. е. адаптации к пользовательскому виду, у нас есть достаточно средств, т. е. параметров все того же тега <li>.

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

Значение 1 применяется для нумерации обычными арабскими цифрами.
Значение а задает обозначения в виде символов латинского алфавита нижнего регистра. Нумерация идет по алфавитному порядку, начиная от а и до z. Впрочем, при дальнейшем продолжении списка, обозначения тоже будут продолжены.
Значение А также как и предыдущее задает обозначение элементов списка при помощи символов латинского алфавита, но при этом будут уже использоваться символы верхнего регистра.
Значение i создает нумерацию при помощи римских цифр, которые будут состоять из символов латинского алфавита нижнего регистра.
Значение I устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться латинские символы верхнего регистра.

Теперь, когда мы теоретически знаем, какие бывают варианты нумерации, и как их устанавливать, пришло время увидеть их использование на примере.

Листинг 1.21

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http: //www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hyмepoванный cписок</title>
<body>
<li type="1">Первый пункт списка
<li type="a">Bторой пункт списка
<li type="A">Tpeтий пункт списка
<li type="i">Четвертый пункт списка
<li type="I">Пятый пункт списка
</body>
</html>

На рис. 1.20 видно, как при сохранении единой нумерации элементов списка браузер меняет внешний вид каждого элемента списка, сохраняя при этом их общую нумерацию. HTML предоставляет возможность самостоятельно указывать стартовый номер элемента. Для этого в тег <ol> вставляется параметр start. Значением того параметра является натуральное число, которое и будет номером первого элемента списка. Но внутри списка мы можем произвольно пенять порядковые номера элементов при помощи параметра value, применяемого в составе тега <ii>. Для того, чтобы увидеть механизм применения этих параметров, рассмотрим еще один пример (рис. 1.21).

Листинг 1.22

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Вложенные списки</title>
<body>
<ol start=5>
<li>Пятый пункт списка
<li>Шестой пункт списка
<li vа1uе=10> Десятый пункт списка
<li>Одиннадцатый пункт списка
<ol>
</body>
</html>

Списки в HTML

Рис. 1.20. Окно браузера с результатом отображения файла, приведенного в листинге 1.21

Списки в HTML

Рис. 1.21. Окно браузера с результатом отображения файла, приведенного в листинге 1.22

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

Листинг 1.23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http: //www. w3.org/TR/html4/strict.dtd">
<bead>
<title> Вложенные списки</title>
<body>
<li>Первый пункт списка
<ol>
<li>Первый вложенный пункт
<li>Второй вложенный пункт
</ol>
<li>Второй пункт списка
<ul>
<li>Вложенный маркированный элемент
<li>Вложенный маркированный элемент
<ul>
</ol>
</body>
<html>

Итак, мы рассмотрели основные варианты использования стандартных нумерованных и маркированных списков. Но в HTML предусмотрены еще несколько специализированных списков, которые тоже необходимо рассмотреть.

Затем как перейти к непосредственному рассмотрению этих дополнительных типов списков, следует сделать маленький экскурс в историю создания HTML. Дело в том, что изначально он был создан в Тимом Бернерсом-Ли для публикации связанных научных отчетов и документов, и как следствие, изначально в него были вставлены средства тестового оформления, присущего техническим и научным документам. B их числе и списки определений и терминов.
Сам список определений создается при помощи тега <dl> с его закрывающим близнецом </dl>. В качестве элементов используются термины, обозначаемые тегами <dt>, и определения, создаваемые при помощи тегов <dd>. Техническое отличие этих двух элементов списка состоит в том, что термины являются inline-элементами, т. е. обязаны занимать не более одной строки, а определения — flow-элементами, т. е. не ограничены пределами одной строки. Рассмотрим пример применения подобного списка определений (рис. 1.23).

Списки в HTML

Рис. 1.24. Окно браузера с результатом отображения файла, приведенного в листинге 1.23

Листинг 1.23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//BN
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cписок определений</head>
<body>
<dl>
<dt>Это термин
<dd>A это определение
</dl>
<p>A это обычный текст</р>
</body>
</html>

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