Нумеровані списки є набором елементів з їх порядковими номерами. Вигляд і тип нумерації залежить від атрибутів тега <ol> , який і застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом <li> , як показано нижче.
<ol> <li> Перший пункт </li> <li> Другий пункт </li> <li> Третій пункт </li> </ol>
Якщо не вказувати жодних додаткових атрибутів і просто написати тег <ol> , то за умовчанням застосовується список з арабськими числами (1, 2, 3, ...), як показано в прикладі 11.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=utf-8"> <title> Нумерований список </title> </head> <body> <p> <strong> Робота з часом </strong> </p> <ol> <li> створення пунктуальності (ніколи не будете нікуди спізнюватися); </li> <li> лікування від пунктуальності (ніколи нікуди не будете поспішати); </li> <li> зміна сприйняття часу і годин. </li> </ol> </body> </html>
Результат даного прикладу показаний на рис. 11.3.
Зауважте, що в нумерованому списку також додаються автоматичні відступи зверху, знизу і зліва від тексту.
Як нумерують елементів можуть виступати наступні значення:
- арабські числа (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 показано створення списку з використанням римських цифр в верхньому регістрі, що починаються з восьми.
Приклад 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=utf-8"> <title> Римські числа </title> </head> <body> <ol type="I" start="8"> <li> Король Магнум XLIV </li> <li> Король Зігфрід XVI </li> <li> Король Сигізмунд XXI </li> <li> Король Хусбрандт I </li> </ol> </body> </html>
Результат даного прикладу показаний на рис. 11.4.
