Списки в HTML

Списки часто використовуються в різних документах. Іноді, щоб зробити список, користувач просто нумерує рядки тексту. Такий підхід не є хорошим, так як в документі відсутня логічна сутність «список».

Тег	Опис
<ol>	Визначає впорядкований список
<ul>	визначає неупорядкований список
<li>	Визначає пункт списка
<dl>	Визначає список визначень
<dt>	Визначає пункт списка визначень
<dd>	Визначає опис пункта списка визначень

Невпорядковані списки

У HTML існує сімейство тегів для створення списків: невпорядкованих, упорядкованих і списків визначень. У наступних завданнях ми будемо тренуватися працювати з ними.

Невпорядковані (або марковані) списки створюються за допомогою тега <ul>, який може містити в собі теги <li>, що позначають «елемент списку»

See the Pen <a href='https://codepen.io/raisa69/pen/MWebEOd'>list-marker-html</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

Тег <ul> може мати атрибут type, який визначає форму позначки. Цей атрибут набуває таких значень:

Тип списку	Код HTML	Приклад
Список з маркерами у вигляді кола	<ul type = "disc"> <li> ... </li> </ul>
Список з маркерами у вигляді окружнoсті	<ul type = "circle"> <li> ... </li> </ul>
Список з квадратними маркерами	<ul type = "square"> <li> ... </li> </ul>

See the Pen <a href='https://codepen.io/raisa69/pen/qBNqPgr'>list-marker-type</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

Впорядковані списки

Впорядкований список також є списком елементів . Елементи списку маркуються за допомогою чисел або букв.

Впорядкований список починається з тега <ol> . Кожен елемент списку починається з тега <li>/

Якщо не вказувати ніяких додаткових атрибутів і просто написати тег <ol>, то за замовчуванням застосовується список з арабськими числами (1, 2, 3, ...).

See the Pen <a href='https://codepen.io/raisa69/pen/rNLWYNe'>list-number-html</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

В нумерованому списку також додаються автоматичні відступи зверху, знизу і зліва від тексту.

При нумерації елементів можуть використовуватись наступні значення:

арабські числа (1, 2, 3, ...);
великі латинські літери (A, B, C, ...);
малі латинські букви (a, b, c, ...);
прописні римські числа (I, II, III, ...);
малі римські числа (i, ii, iii, ...).

Для вказівників типу нумерованого списку застосовується атрибут 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 однаково працює і з римськими, і з арабськими числами.

У наступному прикладі показано створення списку з використанням римських цифр у верхньому регістрі, який починається з восьми.

Список визначень

Cкладається з двох елементів − терміну та його визначення. Сам список задається за допомогою контейнера <dl>, термін − тегом <dt>, а його визначення − за допомогою тега <dd>. Використання тегів для створення списку визначень продемонстровано в наступному прикладі.

See the Pen <a href='https://codepen.io/raisa69/pen/jOrVaBE'>list-dl-dt-html</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

Список визначень добре підходить для розшифровки термінів, створення глосарію, словника, довідника тощо. У наступному прикладі показано одне з можливих використань цього виду списку.

Приклад cтворення списку визначень

See the Pen <a href='https://codepen.io/raisa69/pen/MWebOEj'>list-dl-dt-dd</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

Багаторівневі списки

Cтворювати досить просто. Досить лише вставити новий список перед закриваючим тегом </li> того елемента, у якого є підпункти.

Приклад списку з двома рівнями

See the Pen <a href='https://codepen.io/raisa69/pen/VwjmryB'>list-multilevel-html</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

ЗАВДАННЯ 1:

Вписати в код файлу вказану інформацію:
See the Pen <a href='https://codepen.io/raisa69/pen/QWEGOzN'>list-task1</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

ЗАВДАННЯ 2

Створити у свої папці файл list_task.html такого зразка:

Текст для файлу:

Що потрібно знати, щоб створювати сайти:

Основи Web-дизайну:

HTML CSS Web-програмування: PHP SQL JavaScript jQuery Flash SEO

Мови програмування PHP і JavaScript дозволяють зробити сайт динамічним, тобто який реагує на дії користувача. Наприклад, можна зробити красиву випадає менюшку або слайдер

Види скриптів

Для цього пишуться скрипти (англ. Script - «сценарій») - програми, які дозволяють реагувати на дії користувача. Скрипти бувають двох видів:

ті, які виконуються на сервері, а результат їх виконання приходить в браузер до користувача вже в готовому вигляді. Це скрипти, написані на мові PHP. На ньому пишуться CMS-ки - системи управління контентом.

ті, які виконуються прямо в браузері користувача. Це скрипти, написані на мові JavaScript. Вони найчастіше використовуються для, того щоб зробити сторінку більш зручною і красивою.

Завантаження…

Тестове завдання:

вписати в кутових дужках теги замість слів

See the Pen html-теги розмітки by kravets (@raisa69) on CodePen.