Создание упорядоченных и неупорядоченных списков
Выше в этой главе мы рассказали о нескольких способах компоновки содержимого на Web-странице. Упорядоченные и неупорядоченные списки — еще один инструмент, с помощью которого можно организовывать взаимосвязанный текст в группы маркированных или нумерованных элементов списка. Списки очень полезны для представления информации в структурированном виде. В упорядоченных (ordered) списках для организации Web-содержимого используется алфавитная или числовая система, а в неупорядоченных (unordered) каждый элемент списка идентифицируется символом, или маркером.
ПРАКТИКУМ
С помощью упорядоченных, или нумерованных, списков создайте пошаговые инструкции, где имеет значение порядок элементов в списке. Приведенный ниже HTML-код описывает упорядоченный список, показанный на рис. 1.21.
Рис. 1.21. Web-страница с упорядоченным (слева) и неупорядоченным (справа) списками
html><head>
<titles>Пример упорядоченного списка</title>
</head><body>
<b>Загрузка программы</b>
<ol>
<li>Вставьте компакт-диск в дисковод</li>
<li>Щелкните на пиктограмме "Пуск"</li>
<li>Загрузите программу</li>
<li>Играйте!</li>
</ol>
</body></html>
Как показано в этом примере, чтобы обозначить упорядоченный список в HTML-коде Web-страницы, поместите элементы списка между начальным и конечным дескрипторами упорядоченного списка (<oi></oi>). Затем, чтобы добавить в список элементы, поместите текст каждого элемента между начальным и конечным дескрипторами элемента списка (<li></li>).
По умолчанию Web-браузер отображает перед каждым элементом списка арабскую цифру (1, 2, 3, 4, ...), причем первый элемент получает номер 1. Если вы хотите использовать вместо арабских цифр буквы или римские цифры, поместите в начальный дескриптор упорядоченного списка атрибут type, как указано ниже:
- <ol type="1">. Перечисляет элементы с использованием арабских цифр (по умолчанию).
- <ol type="a">. Перечисляет элементы с использованием букв нижнего регистра.
- <ol type="A">. Перечисляет элементы с использованием букв верхнего регистра.
- <ol type="i" >. Перечисляет элементы с использованием римских цифр нижнего регистра.
- <ol type="I">. Перечисляет элементы с использованием римских цифр верхнего регистра.
Чтобы начать упорядоченный список не с "1", а с другой цифры (или же не с "A", а другой буквы) поместите в дескриптор <ol> атрибут start со значением, отличным от "1" . Например, упорядоченный список, в начале которого стоит следующий дескриптор <ol>, будет начинаться с буквы "е", поскольку "е" - пятая буква (английского) алфавита:
<ol type="a" start="5">
Аналогично, если вы присвоите атрибуту type значение "1" чтобы указать, что браузер должен ставить перед каждым элементом списка арабскую цифру, браузер начнет список с элемента под номером 5.
Неупорядоченные списки позволяют создавать группы текста, в которых порядок элементов в списке не имеет значения, — например, список покупок. Следующий HTML-код создает неупорядоченный список, также показанный на рис. 1.21:
<head>
<title>Пример неупорядоченного списка</title>
</head><body>
<b>Список покупок</b><ul>
<li>Хлеб</li><li>Молоко</li><li>Масло</li><li>Чай</li>
</ul>
</body></html>
Чтобы обозначить неупорядоченный список в HTML-коде Web-страницы, поместите элементы списка между начальным и конечными дескрипторами неупорядоченного списка (<ul></ul>). Как и в случае упорядоченного списка, для добавления элементов в неупорядоченный список следует поместить текст каждого элемента между начальным и конечными дескрипторами списка (<li></li>) .
По умолчанию Web-браузер отобразит в качестве маркера перед каждым элементом неупорядоченного списка жирную черную точку (•). Если вы хотите, чтобы браузер использовал в качестве маркера другой символ, выберите символ для представления маркера с помощью атрибута type, как указано ниже:
- <ui type="disc">. Маркирует элементы жирными черными точками (по умолчанию).
- <ui type="square">.Маркирует элементы черными контурными квадратиками.
- <ui type="circle">. Маркирует элементы черными контурными точками (незаполненными окружностями).