Список покупок в HTML!

Для того, чтобы завершить список всех функций MsWord понять оставшиеся основные функции языка HTML осталось лишь две задачи: как вставить картинку и как сделать список. И сейчас мы разберёмся, как делаются списки на любой случай жизни!

Начнём с того, какие виды списков существуют? В основном выделяется три вида списков - маркированный, нумерованный и список определений (я мог сделать очередной список, но их и так будет слишком много)

Маркированные списки

Маркированный список - список, в котором отсутствует нумерация и используются вместо этого метки разного типа (точки, галочки и т.д.). Для того, чтобы создать маркированный список нужны теги <ul>...</ul> (UL - Unordered List, здесь тоже есть логика!), внутри которых каждый элемент списка должен находится в тегах <li>...<li>. Например, вот типичный маркированный список:

• Первый элемент
• Второй элемент
• Третий элемент

И вот как выглядит этот список в языке HTML:
<ul>
<span style="color: #444444; font-family: &quot;open sans&quot;;"> (единый стиль текста)
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</span>
</ul>

При этом можно делать и многоуровневые маркированные списки (также, как и все остальные подвиды, но здесь проще объяснить основы)

• Первый элемент
• Первая подгруппа первого элемента
• Вторая подгруппа первого элемента
• Второй элемент
• Третий элемент

И делается это намного проще, чем может показаться, просто нужно запихнуть написать внутри тегов ещё одну пару тегов <ul>...</ul>:
<ul>
<span style="color: #444444; font-family: &quot;open sans&quot;;">
<li>Первый элемент</li>
<ul>
<li>Первая подгруппа первого элемента</li>
<li>Вторая подгруппа первого элемента</li>
</ul>
<li>Второй элемент</li>
<li>Третий элемент</li>
</span>
</ul>

Нумерованные списки

В отличии от маркированных списков, в нумерованных есть...нумерация! (я знаю, это так неожиданно!) Из-за этого используются другие теги - <ol>...</ol> (OL - Ordered List), которые создают тот самый порядок!

1. Первый элемент
2. Второй элемент
3. Третий элемент

А всегда ли римская нумерация в списке, хотели вы спросить (я хотел, чтобы вы спросили, cпросите, пожалуйста). Ответ - нет! Но это можно сделать атрибутом type внутри тега <ol>. Посмотрим, как это выглядит:
<ol type="I">
<span style="color: #444444; font-family: &quot;open sans&quot;;">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</span>
</ol>

При этом, у атрибута type есть разные подвиды использования, "1" - стандартная десятичная нумерация, "A"/"a" - алфавитная нумерация списка (заглавные/строчные буквы), "I"/"i" - римская нумерация списка (заглавные/строчные буквы). Также, используя атрибут reversed можно сделать так, чтобы список был в обратном порядке (начинаясь с максимального значения). 
Как я говорил до этого, также существуют многоуровневые нумерованные списки:

1. Первый элемент
1. Первая подгруппа первого элемента
2. Вторая подгруппа первого элемента
2. Второй элемент
1. Первая подгруппа второго элемента
2. Вторая подгруппа второго элемента
3. Третья подгруппа второго элемента
3. Третий элемент
1. Первая подгруппа третьего элемента
2. Вторая подгруппа третьего элемента

<ol>
<span style="color: #444444; font-family: &quot;open sans&quot;;">
<li>Первый элемент</li>
<ol>
<li>Первая подгруппа первого элемента</li>
<li>Вторая подгруппа первого элемента</li>
</ol>
<li>Второй элемент</li>
<ol>
<li>Первая подгруппа второго элемента</li>
<li>Вторая подгруппа второго элемента</li>
<li>Третья подгруппа второго элемента</li>
</ol>
<li>Третий элемент</li>
<ol>
<li>Первая подгруппа третьего элемента</li>
<li>Вторая подгруппа третьего элемента</li>
</ol>
</span>
</ol>

Cписки определений

Отдельным видом списков являются списки определений, в которых отсутствуют какие либо символы для обозначения нумерации, но присутствует точное разделение между уровнями элементов. Они создаются с помощью тегов <dl>...</dl> (DL = Description List), в котором главные элементы обозначаются тегами <dt>...</dt>, а элементы подгрупп <dd>...</dd>. Вот как выглядит список определений:

Первый элемент

Первая подгруппа первого элемента

Вторая подгруппа первого элемента

Второй элемент

Первая подгруппа второго элемента

Вторая подгруппа второго элемента

Третья подгруппа второго элемента

Третий элемент

Первая подгруппа третьего элемента

Вторая подгруппа третьего элемента

И вот как выглядит этот список в языке HTML:

<dl>

<span style="color: #444444; font-family: &quot;open sans&quot;;">

<dd><b>Первый элемент</b></dd>

<dt>Первая подгруппа первого элемента</dt>

<dt>Вторая подгруппа первого элемента</dt>

<dd><b>Второй элемент</b></dd>

<dt>Первая подгруппа второго элемента</dt>

<dt>Вторая подгруппа второго элемента</dt>

<dt>Третья подгруппа второго элемента</dt>

<dd><b>Третий элемент</b></dd>

<dt>Первая подгруппа третьего элемента</dt>

<dt>Вторая подгруппа третьего элемента</dt>

</span>

</dl>

Надеюсь, что я вам помог и теперь мы стали на шаг ближе к освоению функций MsWord языка HTML