Выпадающий список в html: учимся создавать и задавать стили с помощью css

Содержание:

Урок 8Списки HTML
Резинка в Ворде 2003
Создание HTML-списков
Списки в html
- Html список нумерованный многоуровневый
Список с русскими буквами
Горизонтальное отображение списка
Оформление списков с помощью CSS-стилей
Маркированный список в HTML
Урок 8Списки HTML

Урок 8Списки HTML

Практикум

Задание 1.

<!DOCTYPE HTML>
<html>
 <head>
    <title>Нумерованный список</title>
 </head>
 <body>
  <p><strong>Работа со временем</strong></p>
  <ol>
    <li>создание пунктуальности (никогда не будете никуда опаздывать);</li>
    <li>излечение от пунктуальности (никогда никуда не будете торопиться);</li>
    <li>изменение восприятия времени и часов.</li>
  </ol>
 </body>
</html>

Задание 2.

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

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Неупорядоченный список</title>
  </head>
  <body>
    <h1>Список изученных тегов</h1>
    <ul>
      <li>html</li>
      <li>head</li>
      <li>body</li>
      <li>p</li>
      <li>h1</li>
      <li>h2</li>
    </ul>
    <p>Неупорядоченный список используется для простого перечисления объектов, когда порядок неважен. </p>
  </body>
</html>

Задание 3.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Список определений</title>
  </head>
  <body>
    <h1>Расшифровка тегов списков</h1>
    <dl>
      <dt>dl</dt>
      <dd>Definition List, сам список определений</dd>
      <dt>dt</dt>
      <dd>Definition Term, термин</dd>
      <dt>dd</dt>
      <dd>Definition Definition, определение термина</dd>
      <dt>ul</dt>
      <dd>Unordered List, неупорядоченный список</dd>
      <dt>li</dt>
      <dd>List Item, элемент списка</dd>      
    </dl>
  </body>
</html>

Задание 4. Создание списка определений

1. Создайте страницу Список определений

2. Озаглавьте текст Компьютерные сети Английские термины

3. Создайте список определений по приведенному образцу фрагмента HTML-кода

<DL>
<DT>  <STRONG> Internet </STRONG>
<DD> глобальная компьютерная сеть.
<DT> <STRONG> internet </STRONG>
<DD> технология сетевого взаимодействия между компьютерами разных типов.
<DT> <STRONG> WAIS (Wide Area Information Servers) </STRONG>
<DD> мощная система поиска информации в базах данных сети Интернет по ключевым словам.
</DL>

4. Добавьте подзаголовок Русские термины

5. Напишите определения следующих понятий: адресное пространство, гипертекст, клиент, модем, разметка сайта, сервер, тег.

В этом задании вам нужно будет создать четырёхуровневый список:

Задание 7.

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

Используя вложенные списки, составьте HTML-документ, выводящий перечень времен года и относящихся к ним месяцев.

Задание 9.

Составьте HTML-документ, при просмотре которого в браузере, выводится список известных вам городов Курганской, Свердловской и Челябинской областей.

Создайте многоуровневый список

Повторите страницу по данному по образцу

Следующая страница Списки HTML

Резинка в Ворде 2003

Учимся создавать анимированные эффекты с помощью css3

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

1. Маркированный список

Что такое выпадающий список в excel и как его создать?

Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью парного тега <ul></ul>. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

Браузеры по умолчанию добавляют следующее форматирование блоку списка:

Каждый элемент списка создаётся с помощью парного тега <li></li> (от англ. List Item).

Для тега <ul> доступны ‎глобальные атрибуты.

Рис. 1. Маркированный список

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

Нумерованный список создаётся с помощью парного тега <ol></ol>. Каждый пункт списка также создаётся с помощью элемента <li>. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны.

Блок списка также имеет стили браузера по умолчанию:

Для тега <li> доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать <li value="10">, то остальная нумерация будет пересчитана относительно нового значения.

Для тега <ol> доступны следующие атрибуты:

Таблица 1. Атрибуты тега <ol>
Атрибут	Описание, принимаемое значение
`reversed`	Атрибут `reversed` задает отображение списка в обратном порядке (например, 9, 8, 7…).
`start`	Атрибут `start` задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция `<ol start="10">` первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например, `<ol type="I" start="10">`.
`type`	Атрибут `type` задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:`1` — значение по умолчанию, десятичная нумерация.`A` — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).`a` — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).`I` — нумерация римскими заглавными цифрами (I, II, III, IV).`i` — нумерация римскими строчными цифрами (i, ii, iii, iv).

Рис. 2. Нумерованный список

3. Список определений

Списки определений создаются с помощью тега <dl></dl>. Для добавления термина применяется тег <dt></dt>, а для вставки определения — тег <dd></dd>.

Блок списка определений имеет следующие стили браузера по умолчанию:

Для тегов <dl>, <dt> и <dd> доступны ‎глобальные атрибуты.

Рис. 3. Список определений

4. Вложенный список

Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:

Рис. 4. Вложенный список

5. Многоуровневый нумерованный список

Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:

Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

Рис. 5. Многоуровневый нумерованный список
HTML-таблицы
Спецсимволы HTML

Списки в html

Php парсинг html, с помощью simple html dom

В коде html используют теги, чтобы оформить различного рода перечни и перечисления.

Нумерованный список в html, пример: По умолчанию он отображается в браузере с такими атрибутами

ol {padding-left: 40px; margin-top: 1em; margin-bottom: 1em;}.

Если какой-то пункт удалить, оставшиеся номера будут пересчитаны автоматически.

Html список нумерованный многоуровневый

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

Пример разметки: Список второго уровня поместили внутрь тега <li>, только потом его закрыли.

Теги для маркированного списка

Пункты маркированного списка создаются тегами <li>.
Браузеры формируют блоки списков автоматически, с такими атрибутами В маркированном списке html можно ставить галочки вместо маркеров точек. В таблицу css поместите этот код Тогда список будет выглядеть так
Так же как нумерованные, маркированные списки можно делать многоуровневыми.

Может ли многоуровневый список включать как нумерованные так и маркированные списки? Ответ: да. Вот пример разметки
Надо добавить в стили код

ol ol{
 list-style-type: lower-alpha;
}

Свойство list-style-type: lower-alpha заменит нумераторы цифр внутреннего списка на строчные латинские буквы. Селектор ol ol выберет все списки, которые имеют уже второй уровень вложенности.

Советы копирайтерам по составлению списков

Копирайтеру, который пишет продающий текст, блоггеру, публикующему посты в своем блоге, не следует разочаровывать своих читателей.

Что они могут объединять в списки? ОДНОТИПНЫЕ ХАРАКТЕРИСТИКИ:

области применения товара или услуги;
проблемы, которые решает этот продукт;
выгоды, преимущества, получаемые клиентом в случае покупки товара;
характеристики товара;
факты о товаре;
отзывы клиентов.

Чтобы пользователь уделил равное внимание всем пунктам списка, делайте предложения (пунктики перечня) примерно одной длины. Для перечисления (статистики) берите только реальные цифры

Вот пример списка на одностраничном сайте, его даже можно считать УТП. Его появление на первом экране полностью оправданно.

Перечень нужен, если информация, представленная в нем, действительно важна, заслуживает отдельного упоминания.

Как оформлять списки в тексте

При оформлении списка делайте отступы, чтобы пункты были визуально разделены. Маркированные списки используйте, только если порядок пунктов и их количество имеет значение.

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

Пример — 6 лучших курортов для бюджетного отдыха, 5 простых продуктов для быстрого похудения.

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

В иных случаях пользователь сразу не вникнет в суть, ему придется перечитывать, а это нервирует.

Чтобы не повторяться, не нарушить принципы Seo, не попасть под фильтр Баден-Баден (переспам), ключевые слова заменяйте синонимами, либо хотя бы вставляйте стандартные названия не по порядку.

Вот плохой пример, над этим тестом надо серьезно поработать.

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

При подаче информации сплошным текстом читатель, возможно, даже не обратил бы на эти сведения свое внимание. . Перечней не должно быть слишком много, иначе ценность информации в них снизится

Если набирается всего пара буллетов, укажите их в одном предложении

Перечней не должно быть слишком много, иначе ценность информации в них снизится. Если набирается всего пара буллетов, укажите их в одном предложении.

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

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

Cписки в html wordpress

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

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

Список с русскими буквами

Нумерованный список есть с латинскими буквами, а вот русских букв для списка нет. Их можно добавить искусственно, воспользовавшись вышеприведённым приёмом. Поскольку нумерация делается через стили, сам список остаётся исходным, к нему лишь добавляется выбранный класс, назовём его cyrilic (пример 4).

Пример 4. Код для создания списка

Добавление букв осуществляется с помощью псевдоэлемента ::before и свойства content. Поскольку в каждой строке должна быть своя буква, воспользуемся псевдоклассом :nth-child(1), в скобках пишется номер буквы. Первой буквой, естественно, идёт А, второй — Б, третьей — В и т. д. Весь этот набор добавляется к селектору li следующим образом (пример 5).

Пример 5. Применение псевдокласса :nth-child

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

Окончательно настраиваем выравнивание и положение букв, по желанию указываем размер шрифта, цвет и другие параметры (пример 6).

Пример 6. Список с русскими буквами

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Список</title>
<style>
.cyrilic {
list-style-type: none; /* Прячем исходную нумерацию */
}
.cyrilic li::before {
margin-right: 5px; /* Расстояние от буквы до текста */
width: 1em; /* Ширина */
text-align: right; /* Выравнивание по правому краю */
display: inline-block; /* Строчно-блочный элемент */
}
.cyrilic li:nth-child(1)::before { content: ‘а)’; }
.cyrilic li:nth-child(2)::before { content: ‘б)’; }
.cyrilic li:nth-child(3)::before { content: ‘в)’; }
.cyrilic li:nth-child(4)::before { content: ‘г)’; }
.cyrilic li:nth-child(5)::before { content: ‘д)’; }
.cyrilic li:nth-child(6)::before { content: ‘е)’; }
.cyrilic li:nth-child(7)::before { content: ‘ё)’; }
.cyrilic li:nth-child(8)::before { content: ‘ж)’; }
.cyrilic li:nth-child(9)::before { content: ‘з)’; }
.cyrilic li:nth-child(10)::before { content: ‘и)’; }
</style>
</head>
<body>
<ol class=»cyrilic»>
<li>Борщ</li>
<li>Котлеты из щуки</li>
<li>Кулебяка</li>
<li>Грибы в сметане</li>
<li>Блины с икрой</li>
<li>Квас</li>
</ol>
</body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Русские буквы в списке

Плюсов у данного метода добавления нумерации много.

Можно использовать буквы любого алфавита, не только русского.
Мы сами определяем, включать в список спорные буквы, такие как Ё и Й, или нет.
Вид нумерации и оформление букв устанавливается через CSS.
Список легко расширить, а также сделать вложенные списки.
Можно создать несколько списков разного вида и применять их в требуемых ситуациях или комбинировать между собой.

списки

Горизонтальное отображение списка

Иногда мы хотим отобразить списки горизонтально, а не вертикально. Возможно, мы желаем разделить список на несколько колонок, чтобы построить список навигации или разместить несколько пунктов списка в один ряд. В зависимости от содержания и желаемого внешнего вида есть несколько способов для отображения списков в виде одной строки, например, путём принятия значения свойства display для элементов <li> как inline или inline-block или через свойство float.

Отображение списка

Самый быстрый способ отобразить список на одной строке — это задать элементам <li> свойство display со значением inline или inline-block. Это поставит все элементы <li> в одну строку с одинаковым промежутком между каждым пунктом списка.

Если промежутки между элементами <li> доставляют проблемы, то они могут быть удалены с помощью тех же методов, что мы обсуждали в уроке 5, «Позиционирование содержимого».

Намного чаще мы будем использовать значение inline-block вместо значения inline. Значение inline-block позволяет легко добавлять вертикальные отступы и другое пространство к элементам <li>, в то время как значение inline нет.

При изменении значения свойства display на inline или inline-block, маркер списка, будь то точка, число или другое, удаляется.

HTML

CSS

Списки с float

Изменение значение свойства display на inline или inline-block быстро, однако это удаляет маркеры списка. Если они необходимы, то добавление float к каждому элементу <li> является лучшим вариантом, чем изменение свойства display.

Установка для всех элементов <li> свойства float как left выровняет горизонтально все элементы <li> непосредственно рядом друг с другом без каких-либо промежутков между ними. Когда мы используем float для <li>, маркер списка отображается по умолчанию и будет располагаться поверх элемента <li> рядом с ним. Чтобы предотвратить отображение маркера списка поверх других элементов <li>, должны быть добавлены горизонтальный margin или padding.

HTML

CSS

Демонстрация списка с float

Как и с любыми обтекаемыми элементами это нарушает поток страницы. Мы не должны забывать очищать float и возвращать страницу в обычный поток — наиболее распространённым методом через clearfix.

Пример навигационного списка

Мы часто разрабатываем и находим навигационные меню, в которых применяются неупорядоченные списки. Эти списки, как правило, располагаются горизонтально с помощью одного из двух методов, упомянутых ранее. Вот, к примеру, горизонтальное навигационное меню, размеченное с помощью неупорядоченного списка, в котором элементы <li> отображаются как inline-block.

HTML

CSS

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.

list-style-type
Значения:
`disc`	Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
`armenian`	Традиционная армянская нумерация.
`circle`	В качестве маркера выступает незакрашенный кружок.
`cjk-ideographic`	Идеографическая нумерация.
`decimal`	1, 2, 3, 4, 5, …
`decimal-leading-zero`	01, 02, 03, 04, 05, …
`georgian`	Традиционная грузинская нумерация.
`hebrew`	Традиционная еврейская нумерация.
`hiragana`	Японская нумерация: a, i, u, e, o, …
`hiragana-iroha`	Японская нумерация: i, ro, ha, ni, ho, …
`katakana`	Японская нумерация: A, I, U, E, O, …
`katakana-iroha`	Японская нумерация: I, RO, HA, NI, HO, …
`lower-alpha`	a, b, c, d, e, …
`lower-greek`	Строчные символы греческого алфавита.
`lower-latin`	a, b, c, d, e, …
`lower-roman`	i, ii, iii, iv, v, …
`none`	Маркер отсутствует.
`square`	В качестве маркера выступает закрашенный или незакрашенный квадрат.
`upper-alpha`	A, B, C, D, E, …
`upper-latin`	A, B, C, D, E, …
`upper-roman`	I, II, III, IV, V, …
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

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

list-style-image
Значения:
`url(url)`	Путь к изображению.
`none`	значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

Рис. 2. Оформление маркированного списка с помощью изображенияРис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

list-style-position
Значения:
`outside`	Значение по умолчанию. Маркер располагается вне блока с текстом.
`inside`	Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

Рис. 4. Пример расположения маркера внутри и снаружи блока списка

4. Краткая форма задания стилей списка

Можно объединить все три свойства форматирования списка в одно с помощью list-style. Значения свойств могут быть расположены в произвольном порядке, а часть значений может быть опущена. Если присутствует одно значение, то другие свойства примут значения браузера по умолчанию.

Синтаксис

Маркированный список в HTML

Во – первых, все наши документы в интернете и весь интернет — это в целом один большой каталог, в котором собрано большое количество самых разнообразных страниц. И вот пришли на помощь к нам любимые всем поисковики и начали тут разделять и властвовать, что в принципе хорошо.

Меньше плохих сайтов, больше хороших, качественных и полезных. Вы спросите, а причем тут вообще html списки и все эти «словобуквы» выше? Отвечу просто, они нужны для лучшего восприятия информации как человеками, так и роботами, которые любят, чтоб все было структурно, лаконично, грамотно и правильно.

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

И тут самое время упомянуть про списки. Их существует 3 вида: маркированные, нумерованные и в виде определений. Я решил не объединять их всех в этой статье, позже объясню почему.

Урок 8Списки HTML

Содержание урока

Списки HTML

Этот урок сложнее предыдущего, поэтому советую не отвлекаться и максимально сконцентрироваться на материале. Списки бывают четырех видов. Это нумерованные списки, маркированные, многоуровневые и списки определений. Теперь давайте разберемся с каждым в порядке очереди. Наш урок будет состоять из 4-ех частей. Поехали!

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

Нумерованные списки html используются для перечисления позиций (элементов) списка которые располагаются строго по порядку и каждый имеет свой уникальный номер.
Нумерованный список открывается с помощью тега <ol> и закрывается соответственно тегом </ol>. Каждая отдельная позиция (элемент) списка находится внутри тега <li>. Теперь давайте сами создадим нумерованный список, код будет выглядеть так:

Сохраняем внесенные изменения в Notepad и открываем файл в браузере:

По умолчанию нумерация списка всегда начинается с 1. Если Вам необходимо, чтобы нумерация начиналась, например, с 5, то для тега <ol> нужно задать атрибут start и дать ему значение 5.

* С этого момента, когда мне будет нужно продемонстрировать Вам запись html кода — на рисунке будет изображен не весь код со структурой страницы, а только рассматриваемая нами часть кода. Я считаю, что сейчас Вы уже должны понимать, что теги, входящие в структуру html страницы — это обязательная составляющая. Если Вы забыли — смотрите урок 4.

По умолчанию элементы списка нумеруются при помощи цифр, однако стиль нумерации можно изменить используя для тега <ol> атрибут type, которому можно задавать значения 1, A, a, I, i.

1 - 1, 2, 3, 4... (задается по умолчанию)
A - A, B, C, D... 
a - a, b, c, d... 
I - I, II, III, IV... 
i - i, ii, iii, iv...

К примеру, если мы хотим, чтобы наш список нумеровался при помощи маленьких латинских букв, то для тега <ol> нужно задать атрибут type со значением a. На практике это будет выглядеть так:

Маркированный список html.

Маркированные списки html используются для перечисления позиций (элементов) списка которые не требуют строгой нумерации и могут располагаться в произвольном порядке.

Маркированный список открывается с помощью тега <ul> и закрывается соответственно тегом </ul>. Каждая отдельная позиция (элемент) списка находится внутри тега <li>, так же, как и в случае с нумерованным списком.

По умолчанию элементы списка всегда маркируются черным кружком, стиль маркировки можно изменить используя для тега <ul> атрибут type, которому можно задавать значения disc, circle, square.

disc — ● (задается по умолчанию)

circle — ○

square — ■

Теперь давайте создадим список используя для маркировки черные квадратики (square).

Многоуровневый список html.

Многоуровневый список html — это список, который содержит в себе еще один или несколько списков. Многоуровневый список может состоять как из нумерованных, так и из маркированных списков. Чтобы его создать нужно один обычный список «вложить» в другой обычный.

Каждый отдельный элемент списка находиться между тегами

. Для создания многоуровневого списка нужно между этими тегами, помимо текста вставить еще один списокБез наглядного примера в этом сложно разобраться, так что все внимание на рисунок:

Мы сделали многоуровневый список из сочетания нумерованного и маркированного списка. Как видите в основе лежит нумерованный список, открывающийся тегом <ol> и закрывающийся тегом </ol>. Первый элемент нашего нумерованного списка открывается тегом <li>, затем, как обычно, идет текст, а далее вместо того чтобы закрыть элемент списка тегом </li>, мы вставляем еще один полноценный маркированный список. И только после этого мы закрываем элемент списка тегом </li>. Затем уже идут следующие элементы нашего основного нумерованного списка.

Список определений.

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

Список определений открывается тегом <dl> и закрывается тегом </dl>. Каждый отдельный термин заключается между <dt> и </dt>. Далее пишется определение к термину, оно находится между тегами <dd> и </dd>.

Сейчас мы сделаем список определений, состоящий из двух терминов. Код будет следующим:

Сохраняем изменения и смотрим результат в браузере:

* Вот мы и рассмотрели все варианты списков html. Из своего опыта могу сказать, что многоуровневые списки используются не часто, списки определений еще реже. Самое главное, что Вы должны из этого урока усвоить — это принцип составления списков. Настоятельно советую попрактиковаться с многоуровневыми списками.

Следующая страница Списки HTML.mp4