Вам нужно знать – Как сделать список в html? Тогда Вы попали в нужное место! Узнай и сделай за 5 минут!

Здравствуйте, уважаемые друзья и гости блога atready.ru! Сейчас Вы узнаете, как сделать список в html для сайта. Это будет полезно как для новичков, так и для всех кому нужно узнать все о создании списков в html. Если Вас интересует данная тема, то приступим?! Поехали …

Для начала давайте разберемся в некоторых нюансах, а уже затем только приступим к созданию самих списков в html.

Какие бывают списки в HTML?

Как Вы наверное все знаете, списки бываю разные и их огромное количество. Мы с Вами сегодня разберем самые часто встречающиеся и наиболее востребованные среди вебмастеров. Эти виды списков чаще всего нужны для создания сайтов и построения веб-страниц.

Вы начинающий вебмастер? Тогда Вам просто необходимо знать сервис, который поможет создать и продвинуть сайт с нуля – http://profi-site.info/sozdanie-sajtov-v-adlere.html

Разделяются все списки по классам или видам на:

1. Маркированные списки в html
2. Нумерованные списки в html
3. Выпадающие списки в html
4. Списки определений в html

Теперь давайте разберем каждый в отдельности и научимся создавать их самостоятельно без применения разного рода редакторов, такого как например есть WordPress.

Как делают маркированные списки в html?

Данного вида списки в html создаются при помощи тега ul, который и будет отвечать за маркировку создаваемого списка.

Для того, чтобы создать такой список необходимо заключить его в открывающийся тег <ul> и соответственно, закрывающийся тег </ul>. Например создадим вот такого вида маркированный список:

<ul>
<li>Строка маркированного списка в html первая</li>
<li>Строка маркированного списка в html вторая</li>
<li>Строка маркированного списка в html третья</li>
<li>Строка маркированного списка в html четвертая</li>
</ul>

Теперь давайте посмотрим пример того, что из этого у нас с вами выйдет, когда мы его поместим на сайт:

Строка маркированного списка в html первая
Строка маркированного списка в html вторая
Строка маркированного списка в html третья
Строка маркированного списка в html четвертая

Получилось совсем неплохо на мой взгляд. А как Вам кажется?

Как делают нумерованные списки в html?

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

Вот пример создания нумерованного списка в html:

<ol>
<li>Строка нумерованного списка в html первая</li>
<li>Строка нумерованного списка в html вторая</li>
<li>Строка нумерованного списка в html третья</li>
<li>Строка нумерованного списка в html четвертая</li>
</ol>

А вот, что из этого получается, когда мы вставляем данный список в html на свой сайт:

Строка нумерованного списка в html первая
Строка нумерованного списка в html вторая
Строка нумерованного списка в html третья
Строка нумерованного списка в html четвертая

Получилась замечательная нумерация!

Теперь узнаем как сделать выпадающий список в html

Как и для остальных списков, чтобы создать выпадающий список нужны специальные теги: select и option. Они нам с вами помогут сделать просто чудо!

Вот пример создания выпадающего списка в html:

Правда замечательный выпадающий список получился?! Оказывается все не так уж и сложно!

И теперь последний на сегодня вид из все рассматриваемых списков в html …

Узнаем как сделать список определений в html?

Списки такого типа нужны для того, например, чтобы выделить какой либо термин или класс. В данном случае я выделил автора блога и его посетителей. Какие теги для этого используются, Вы сами видите:

<dl>
<dt>Автор блога:</dt>
<dd>Валерий Бородин</dd>
<dt>Посетители:</dt>
<dd>Друзья</dd>
<dd>Гости</dd>
</dl>

А вот так получилось после вставки на сайт в текстовом режиме: