Списки в HTML
Списки відображають інформацію структурно і дають змогу зручно налаштовувати відображення з допомогою CSS, тому вони якнайліпше підходять для створення меню на сайті.
Існує два основних види списків в HTML: нумерований і маркований. Третій тип — список для визначень, який зустрічається доволі рідко.
Нумерований список
У нумерованому списку біля кожного елемента списку проставляється номер.
Наприклад, щоб створити такий список:
- Одягнути спортивну форму
- Узяти м’яч
- Зібрати друзів
- Зіграти футбол
треба написати такий код:
<ol>
<li> Одягнути спортивну форму </li>
<li> Узяти м’яч </li>
<li> Зібрати друзів </li>
<li> Зіграти футбол </li>
</ol>
Розберемся з структурою. Тег <ol> означає початок списку, а тег <li> новий елемент. Для тегу нумерованного списку <ol> можна застосовувати декілька атрибутів, зокрема, start(номер з якого буде починатись наша нумерація) і type( вказує тип нумерації і може мати такі значення — 1, A, a, I, i).
<ol start=3 type=A>
<li> Одягнути спортивну форму </li>
<li> Узяти м’яч </li>
<li> Зібрати друзів </li>
<li> Зіграти футбол </li>
</ol>
Модифікувавши код, ми вказали, що тип нумерації мусить бути буквенний і починатися з 3 символа, тобто букви C, ось що ми отримали:
C.Одягнути спортивну форму
D.Узяти м’яч
E.Зібрати друзів
F.Зіграти футбол
Маркований список
У маркованому списку порядок елементів не має такої ролі, як у нумерованому. Біля елементів проставляються спеціальні значки(точки, сфери, квадрати).
Перед наведенням прикладу, скажу що список це має атрибут type(від якого саме і залежить тип значка), який набуває значень disc(по замовчуванні, відображає зафарбований круг), square(зафарбований квадрат), circle(незафарбований круг).
<ul type=square>
<li>Сходити в кінотеатр</li>
<li>Зустріч з друзями</li>
<li>Гра у пейнтбол</li>
</ul>
Щоб створити маркований список використовуєм тег <ul>.
Ось так можна легко створити власні списки, нагадаю тільки, що списки найчастіше застосовуються для меню і додам, що структуру списків можна ускладнювати, вставляючи один список в інший, так досягається багаторівнева структура.
n
Чекаю ваших відгуків і побажань щодо уроків! Щасти!