Html верстка сайта - создаем списки

Здравствуйте уважаемые читатели блога Сам себе Seoшник. Сегодня в продолжении нашей с вами темы про Html я бы хотел написать о том, как с помощью тегов Ul и Ol создать маркированный или нумированный список (соответственно).

Хочу напомнить, что мы уже успели рассмотреть некоторые интересные уроки в рамках работы над Html версткой сайта, а именно "Таблица на сайт с помощью Html" и "Html теги для отображения медиа файлов". Так что если вы еще не ознакомились с этими статьями, то прошу прочесть их. Эти посты также добавят вам некоторый опыт в работе с языком гипертекстового програмирования Html.

Как создать списки с помощью Html?

Чтобы создать список на веб странице нам понадобятся два тега. Ul - блочный и парный тег, позволяющий создать маркированный список. И Ol - такой же по своей структуре тег, но уже помогает нам в создании нумерованного списка. Между этими тегами обязательно должен присутствовать открывающийся и закрывающийся тег Li для того чтобы в списке появились столбики. Примерно стандартный список выглядит вот так:

• первый столбик в маркированном списке
• второй столбик в маркированном списке
• третий столбик в маркированном списке

<ul>
<li>первый столбик в маркированном списке</li>
<li>второй столбик в маркированном списке</li>
<li>третий столбик в маркированном списке</li>
</ul>

и

1. первый столбик в нумерованном списке
2. второй столбик в нумерованном списке
3. третий столбик в нумерованном списке

<ol>
<li>первый столбик в нумерованном списке</li>
<li>второй столбик в нумерованном списке</li>
<li>третий столбик в нумерованном списке</li>
</ol>

Как вы уже успели заметить внутри тегов Ul и Ol могут стоять только теги li, а уже вних содержится любая информация, которая выводится на веб страницу в виде списка.

Но это набор тегов только для стандартного списка, также существуют другие списки, которые мы с вами сейчас рассмотрим.

Списки тегов

Начнем пожалуй с маркированного списка. У него  кроме списка по умолчанию существует еще две разновидности списков, а именно:

1. <ul type=square> - квадрат
2. <ul type=circle> - не закрашенный кружок

Как вы уже догадались, в открывающемся теге ul нужно прописать разные значение атрибута type. Тоже самое будет и в нумерованном списке, только вариантов списка здесь в два раза больше:

1. <ol type=I> - Заглавные римские цифры
2. <ol type=i> - Римские цифры
3. <ol type=A> - Заглавные буквы
4. <ol type=a> - Буквы

Также в нумерованном списке можно начать счет столбиков с любого значение, которого вы пожелаете. Для этого нам надо прописать в открывающемся теге ol атрибут start= и любое значение, например 8

8. Восьмой столбик
9. Девятый столбик
10. Десятый столбик

<ol start=8>
<li>Восьмой столбик</li>
<li>Девятый столбик</li>
<li>Десятый столбик</li>
</ol>

Еще одной функцией нумированного списка в Html является то, что начать новую нумерацию можно с любого значение. Для этого в открывающемся теге li прописываем атрибут Value= и любое значение, например 25

1. Первый столбик
25. Двадцать пятый столбик
26. Двадцать шестой столбик

<ol>
<li>Первый столбик</li>
<li value=25>Двадцать пятый столбик</li>
<li>Двадцать шестой столбик</li>
</ol>

Вот и весь краткий курс по созданию маркированных и нумированных списков с помощью гипертекстового языка програмирования Html.

Не забудьте подписаться на обновление блога, чтоб не пропустить новые, интересные статьи!

автор: Ловцов Алексей