Создание списков в HTML

В этом уроке html мы поговорим о создании списков на странице. Списки достаточно часто используются на web-страницах, поэтому вы должны знать как они создаются.

Допустим, нам необходимо создать список из пяти пунктов. Можно создать такой список примитивным методом, применив тег <br> - тег переноса строки. Название списка возьмем в абзац - тег <p>.

Пример:

<p>Название списка</p>

1. Первый пункт списка <br>

2. Второй пункт списка <br>

3. Третий пункт списка <br>

4. Четвертый пункт списка <br>

5. Пятый пункт списка <br>

Проверив нашу запись в браузере, мы увидим более менее упорядоченный список из пяти пунктов. Но это неправильный метод создания списка, а простой перенос строк. Список создается немного по другому и мы сейчас разберемся как это делается.

Для создания нумерованного списка (пункты списка отсортированы по номерам) применяется тег <ol>. Весь список помещаем между открывающим тегом <ol> и закрывающим тегом </ol>, а каждый пункт списка ограничиваем тегами <li> и </li>.

Пример:

<p>Название списка</p>

<ol>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

Для создания ненумерованного списка (без нумерации пунктов списка) вместо тега <ol> применяем тег <ul> и каждый элемент списка выделить тегом <li>.

Пример:

<p>Название списка</p>

<ul>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>

Вот таким способом создаются нумерованные и ненумерованные списки.

Теперь давайте поговорим о некоторых атрибутах, используемых при создании списков и которые будут необходимы и нам. Вначале рассмотрим атрибуты списка <ol>. При просмотре в браузере мы видим, что нумерация идет арабскими цифрами. Если мы хотим что-бы нумерация была римскими цифрами к тегу <ol> добавляем атрибут type со значением "I" (большая буква I).

Пример:

<ol type="I">

Если хотим маленькие римские цифры - ставим значение "i" (маленькую букву i).

Для буквенного обозначения пунктов списка - ставим значение "A" или "a" (большую или маленькую букву А).

Пример:

<ol type="A">


Еще может возникнуть ситуация, в которой нумерацию пунктов списка понадобиться начинать не с единицы, а, например, с тройки. В этом случае используем атрибут start, а в значении прописываем то число (букву) с которого будет начинаться список.

Пример:

<p>Название списка</p>

<ol type="I" start="3">

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

Проверив нашу запись в браузере, мы увидим, что наш список начинается с номера три.

У ненумерованного списка тоже есть атрибут type отвечающий за форму метки у каждого пункта списка. Без атрибута ненумерованный список имеет метки каждого элемента списка - черный кружок. Если мы хотим иметь метку - черный квадрат, к атрибуту type пишем значение "skuare". Метка - белый кружок - это значение "circle".

Пример:

<p>Название списка</p>

<ul type="skuare">

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>

Вот такие атрибуты, из основных, применяются при создании списков.

Еще рассмотрим такой момент, как вложенные списки. Это когда один список вложен в другой. Давайте в наш нумерованный список вложим наш ненумерованный, например, в третий пункт списка. Для этого нам, всего лишь, надо после закрывающего тега третьего пункта нумерованного списка вставить полностью наш ненумерованный список.

Пример:

<p>Название списка</p>

<ol type="I">

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>


<ul type="skuare">

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>


<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

Не забывайте проверять результаты работы в браузере.

Следующий урок — создание ссылок