1.3. Створення списків
Списком називається взаємопов'язаний набір окремих фраз або речень, які починаються з маркера або цифри. Списки надають можливість упорядкувати і систематизувати різні дані і представити їх у наочному і зручному для користувача ввигляді. Кожен список являє собою контейнер <ul>
, який встановлює маркований список, або <ol>
, який визначає список нумерований. Кожен елемент списку повинен починатися з тега <li>
.
Маркований список (або невпорядкований) визначається тим, що перед кожним елементом списку додається невеликий маркер, зазвичай у вигляді зафарбованого кола. Сам список формується за допомогою контейнера <ul>
, а кожен пункт списку починається з тега <li>
, як показано нижче.
<ul> <li> Перший пункт </li> <li> Другий пункт </li> <li> Третій пункт </li> </ul>Переглянути Редагувати
У списку неодмінно повинен бути присутнім закриваючий тег </ul>
, інакше виникне помилка. Закриваючий тег </li>
хоча і не є обов'язковим, але, щоб чітко розділяти елементи списку, рекомендується завжди його додавати.
Приклад створення маркованого списку
<!DOCTYPE html> <html> <head> <title> Маркований список </title> </head> <body> <hr> <p>З якого мультфільму наступні персонажі?</p> <ul> <li> Чебурашка </li> <li> Крокодил Гена </li> <li> Шапокляк </li> <li> Щур Лариса </li> </ul> <hr> </body> </html>Переглянути Редагувати
При перегляді зверніть увагу на відступи зверху, знизу і зліва від списку. Такі відступи додаються автоматично.
Маркери можуть приймати один з трьох видів: коло (за замовчуванням), окружність і квадрат. Для вибору стилю маркера використовується атрибут type
тега <ul>
. Допустимі значення наведені в наступній таблиці.
Стилі маркерів списку
Тип списку | Код HTML | Приклад |
Список з маркерами у вигляді кола | <ul type = "disc"> <li> ... </li> </ul> |
|
Список з маркерами у вигляді окружнoсті | <ul type = "circle"> <li> ... </li> </ul> |
|
Список з квадратними маркерами | <ul type = "square"> <li> ... </li> </ul> |
|
Вид маркерів може мати незначні відмінності в різних браузерах, а також при зміні шрифту і розміру тексту.
Приклад використання квадратного маркера
<!DOCTYPE html> <html> <head> <title> Маркований список </title> </head> <body> <p> <strong> Атрибути тега body </strong> </p> <ul type = "square"> <li> bgcolor="колір"</li> <li> background="url\*.jpg" </li> <li> text="колір" </li> </ul> </body> </html>Переглянути Редагувати
Багаторівневі списки створювати досить просто. Досить лише вставити новий список перед закриваючим тегом </li> того елемента, у якого є підпункти.
Приклад списку з двома рівнями
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Багаторівневий список </title> </head> <body> <ul> <li>Глава 1 <ul> <li>Розділ 1.1</li> <li>Розділ 1.2</li> </ul> </li> <li>Глава 2</li> </ul> </body> </html>Переглянути Редагувати
Нумеровані списки являють собою набір елементів з їх порядковими номерами. Вид і тип нумерації залежить від атрибутів тега <ol>
, який і застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом <li>
, як показано нижче.
<ol> <li> Перший пункт </li> <li> Другий пункт </li> <li> Третій пункт </li> </ol>
Якщо не вказувати ніяких додаткових атрибутів і просто написати тег <ol>
, то за замовчуванням застосовується список з арабськими числами (1, 2, 3, ...).
<!DOCTYPE html> <html> <head> <title> Нумерований список </title> </head> <body> <p> <strong> Робота з часом </strong> </p> <ol> <li> Створення пунктуальності (ніколи не будете нікуди спізнюватися). </li> <li> Лікування від пунктуальності (ніколи нікуди не будете поспішати). </li> <li> Зміна сприйняття часу і годин. </li> </ol> </body> </html>Переглянути Редагувати
Зауважте, що в нумерованому списку також додаються автоматичні відступи зверху, знизу і зліва від тексту.
При нумерації елементів можуть використовуватись наступні значення:
Для вказівників типу нумерованого списку застосовується атрибут type
тега <ol>
.
Типи нумерованого списку
Тип списку | Код HTML | Приклад |
Арабські числа | <ol type = "1"> <li>...</li> </ol> |
|
Прописні букви латинського алфавіту | <ol type = "A"> <li>...</li> </ol> |
|
Малі літери латинського алфавіту | <ol type = "a"> <li>...</li> </ol> |
|
Римські числа в верхньому регістрі | <ol type = "I"> <li>...</li> </ol> |
|
Римські числа в нижньому регістрі | <ol type = "i"> <li>...</li> </li> |
|
Щоб почати список з певного значення, використовується атрибут start
тега <ol>
. При цьому не має значення, який тип списку встановлений за допомогою type
, атрибут start
однаково працює і з римськими, і з арабськими числами. У наступному прикладі показано створення списку з використанням римських цифр у верхньому регістрі, який починається з восьми.
<!DOCTYPE html> <html> <head> <title> римські числа </title> </head> <body> <ol type = "I" start = "8"> <li> Король Магнум XLIV </li> <li> Король Зігфрід XVI </li> <li> Король Сигізмунд XXI </li> <li> Король Хусбрандт I </li> </ol> </body> </html>Переглянути