Работаем с текстом на странице html часть 5. Упорядоченный и неупорядоченные списки, нумерация списков.


В этом уроке будем работать над элементами создающими различные варианты списков.

<ol> </ol> Упорядоченный список.    

<ul> </ul> Неупорядоченный список.




<ol> </ol> Как сделать упорядоченный список на сайте.

Давайте посмотрим как создавать упорядоченные списки на веб странице. Элемент <ol> работает в паре с атрибутом <li> они оба имеют закрывающие теги.

Возможные варианты нумерации:

1, 2, 3 ... – обычные числа.
I, II, III ... – большие римские числа.
i, ii, iii ... – маленькие римские числа.
A, B, C ... – большие буквы.
a, b, c ... – маленькие буквы.

Давайте посмотрим на примере как это выглядит.


Список с обычными цифрами.
<ol type="1" >
<li>один</li>
<li>два</li>
<li>три</li>
</ol>

Список с обычными цифрами начало отсчёта цифра 5.
<ol type="1" start="5" >
<li>три</li>
<li>четыре</li>
<li>пять</li>
</ol>

В этом списке мы перепрыгиваем через несколько цифр.
<ol>
<li>первый</li>
<li>второй</li>
<li value="6">шестой</li>
<li>седьмой</li>
<li value="3">третий</li>
<li>четвёртый</li>
<li>пятый</li>
</ol>
 

Давайте сохраним это всё в нашем html документе и посмотрим в браузере, что у нас получилось. Как вы уже заметили, что во втором списке добавлен дополнительный атрибут start="5" указывающий, что список начнёт отсчёт с цифры 5. В третьем списке мы в теге <ol> не указали вариант нумерации и она нумеруется по умолчанию так же здесь мы использовали атрибут <value> способным изменять порядок отсчёта. Таким же способом вы можете использовать и другие элементы нумерации указанные выше.

Как создать упорядоченные списки на сайте, нумирация списков в тексте.



<ul> </ul> Неупорядоченный список на сайта.

Теперь посмотрим вариант вывода неупорядоченного списка на html странице.


Так выглядит список без нумерации.
<ul>
<li> Первый </li>
<li> Второй </li>
<li> Третий </li>
</ul>
 

А вот и неупорядоченный список на веб странице.

Как сделать неупорядоченные списки на веб странице

На этом мы закончим основное знакомство работы над текстом и переходим к изучению размещения ссылок на html странице.




Рейтинг@Mail.ru   Яндекс.Метрика