Списки на веб-сторінках
Поняття списку
Часто інформація подається структурованими фрагментами певної послідовності у вигляді списку.
Список — скінченна послідовність однорідних об'єктів, що називаються елементами списку, упорядкованих деяким логічним способом, яка містить хоча б один такий об'єкт.
Списки на веб-сторінках
Існує кілька видів списків:
Марковані.
Нумеровані.
Списки визначень.
Всі види списків можуть бути використані у змішаному порядку.
Окремим типом списків є багаторівневий, для створення якого використовуються комбінації маркованих і нумерованих.
Списки на веб-сторінках додаються за допомогою тегів <ul></ul> (маркований, невпорядкований список), <ol></ol> (нумерований, впорядкований список) та тегів <li> (елементи списку).
Невпорядкований (маркований) список. Тег <ul></ul>
Маркований список визначається тим, що перед кожним елементом списку додається невеликий маркер, зазвичай у вигляді зафарбованого кола. Сам список формується за допомогою контейнера <ul></ul>, а кожен пункт списку починається з тега <li>:
<ul>
<li>Перший пункт</li>
<li>Другий пункт</li>
<li>Третій пункт</li>
</ul>
В списку неодмінно повинен бути присутнім закриваючий тег </ul>, інакше виникне помилка. Закриваючий тег </li> хоча і не обов'язковий, але бажано завжди його додавати, щоб чітко розділяти елементи списку.
Відступи зверху, знизу і зліва від списку додаються автоматично.
Маркери можуть приймати один з трьох видів: коло (за замовчуванням), окружність і квадрат. Для вибору стилю маркера використовується атрибут type тега <ul>.
Також для цього тега доступні універсальні атрибути.
Приклад списків з різними маркерами:
<!DOCTYPE html>
<html>
<head>
<title>Маркований список</title>
</head>
<body>
<h2 align="center">Списки з маркерами різного стилю</h2>
<ul title="Список з маркерами у вигляді зафарбованого кола" type="disc"><h3>Пори року</h3>
<li>Зима</li>
<li>Весна</li>
<li>Літо</li>
<li>Осінь</li>
</ul>
<ul title="Список з маркерами у вигляді кола" type="circle"><h3>Дні тижня</h3>
<li>Понеділок</li>
<li>Вівторок</li>
<li>Середа</li>
<li>Четвер</li>
<li>П'ятниця</li>
<li>Субота</li>
<li>Неділя</li>
</ul>
<ul title="Список з маркерами у вигляді квадратів" type="square"><h3>Час доби</h3>
<li>Ніч</li>
<li>Ранок</li>
<li>День</li>
<li>Вечір</li>
</ul>
</body>
</html>
Впорядкований (нумерований) список. Тег <ol></ol>
Нумеровані списки є набором елементів з їх порядковими номерами. Вид і тип нумерації залежить від атрибутів тега <ol>, який і застосовується для створення списку. Кожен пункт нумерованого списку позначається тегом <li>.
<ol>
<li>Перший пункт</li>
<li>Другий пункт</li>
<li>Третій пункт</li>
</ol>
Якщо не вказувати жодних додаткових атрибутів і просто написати тег <ol>, то за замовчуванням застосовується список з арабськими числами (1, 2, 3, ...).
В нумерованому списку також додаються автоматичні відступи зверху, знизу і зліва від тексту.
В якості елементів, що нумерують, можуть виступати наступні значення:
арабські цифри (1, 2, 3, ...);
прописні латинські літери (A, B, C, ...);
рядкові латинські літери (a, b, c, ...);
прописні римські числа (I, II, III, ...);
рядкові римські числа (i, ii, iii, ...).
Для вказівки типу нумерованого списку застосовується атрибут type тега <ol>.
Приклад списків з різним стилем нумерації:
<!DOCTYPE html>
<html>
<head>
<title>Нумерований список</title>
</head>
<body>
<h2 align="center">Списки з нумерацією різного стилю</h2>
<ol title="Нумерація арабськими цифрами" type="1"><h3>Пори року</h3>
<li>Зима</li>
<li>Весна</li>
<li>Літо</li>
<li>Осінь</li>
</ol>
<ol title="Нумерація великими та малими латинськими літерами" type="A"><h3>Дні тижня</h3>
<li>Понеділок</li>
<li>Вівторок</li>
<li>Середа</li>
<li>Четвер</li>
<li type="a">П'ятниця</li>
<li type="a">Субота</li>
<li type="a">Неділя</li>
</ol>
<ol title="Нумерація великими та малими римськими числами" type="i"><h3>Час доби</h3>
<li>Ніч</li>
<li>Ранок</li>
<li type="I">День</li>
<li type="I">Вечір</li>
</ol>
</body>
</html>
Щоб почати список з певного значення, використовується атрибут start тега <ol>. При цьому не має значення, який тип списку встановлений за допомогою type, атрибут start однаково працює з римськими, з арабськими числами і латинськими літерами.
Приклад списків, нумерованих з певного значення:
<!DOCTYPE html>
<html>
<head>
<title>Нумерований список</title>
</head>
<body>
<h2 align="center">Списки, нумеровані з певного значення</h2>
<ol title="Початок нуменації з 5" start="5"><h3>Пори року</h3>
<li>Зима</li>
<li>Весна</li>
<li>Літо</li>
<li>Осінь</li>
</ol>
<ol title="Початок нуменації з 3" type="A" start="3"><h3>Дні тижня</h3>
<li>Понеділок</li>
<li>Вівторок</li>
<li>Середа</li>
<li>Четвер</li>
<li>П'ятниця</li>
<li>Субота</li>
<li>Неділя</li>
</ol>
<ol title="Початок нуменації з 8" type="I" start="8"><h3>Час доби</h3>
<li>Ніч</li>
<li>Ранок</li>
<li>День</li>
<li>Вечір</li>
</ol>
</body>
</html>
Окремим типом списків є багаторівневий, для створення якого використовуються комбінації маркованих і нумерованих списків.
Багаторівневий список створюється шляхом інтегрування (вкладення) одного списку в інший.
Приклад багаторівневого списку:
<!DOCTYPE html>
<html>
<head>
<title>Багаторівневий список</title>
</head>
<body>
<h2 align="center">Багаторівневий список</h2>
<ol title="Багаторівневий список"><h3>Пори року</h3>
<li>Зима</li>
<ol type="a">
<li>Грудень</li>
<li>Січень</li>
<li>Лютий</li>
</ol>
<li>Весна</li>
<ul type="a">
<li>Березень</li>
<li>Квітень</li>
<ol type="1" start="6">
<li>квітня</li>
<li>квітня</li>
<li>квітня</li>
</ol>
<li>Травень</li>
</ul>
<li>Літо</li>
<ol type="I">
<li>Червень</li>
<li>Липень</li>
<li>Серпень</li>
</ol>
<li>Осінь</li>
<ol>
<li>Вересень</li>
<li>Жовтень</li>
<li>Листопад</li>
</ol>
</ol>
</body>
</html>
Список визначень
Список визначень складається з двох елементів - терміна і його визначення. Сам список задається за допомогою контейнера <dl>, термін - тегом <dt>, а його визначення - за допомогою тега <dd>.
<dl>
<dt>Термін 1</dt>
<dd>Визначення 1</dd>
<dt>Термін 2</dt>
<dd>Визначення 2</dd>
</dl>
Список визначень добре підходить для розшифровки термінів, створення глосарію, словника, довідника і тощо.
Приклад списку визначень:
<!DOCTYPE html>
<html>
<head>
<title>Список визначень</title>
</head>
<body>
<h2 align="center">Список визначень</h2>
<dl>
<dt>Тег</dt>
<dd>
Тег - це спеціальний символ розмітки, який застосовується для вставки різних елементів на веб-сторінку таких як: малюнки, таблиці, посилання та ін., і для зміни їх виду.
</dd>
<dt>HTML-документ</dt>
<dd>
Звичайний текстовий файл, який може містити в собі текст, теги і стилі. Зображення та інші об'єкти зберігаються окремо. Вміст такого файлу зазвичай називається HTML-код.
</dd>
<dt>Сайт</dt>
<dd>
Cайт - це набір окремих веб-сторінок, які пов'язані між собою посиланнями і єдиним оформленням.
</dd>
</dl>
</body>
</html>
Опрацюйте теоретичні відомості:
05_Списки.pdfПрактична частина
Вправа 1
Виконайте завдання за зразком:
Текст тегу <title> - Багаторівневий список
Зберегти файл з іменем list1_своє прізвище.html
Вправа 2
Виконайте завдання за зразком:
Текст тегу <title> - Список визначень.
Зберегти файл з іменем list2_своє прізвище.html