Упорядоченные списки (ol, li) и их атрибуты [Модуль 5: Списки]: Тренажер HTML

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

В этом блоке заданий мы сосредоточимся на упорядоченных (нумерованных) списках. Это фундаментальный элемент HTML, используемый для перечисления элементов, где их последовательность имеет значение, например, в инструкциях, рецептах или рейтингах. Вы научитесь создавать списки с помощью тегов `<ol>` и `<li>`, а также управлять их отображением с помощью атрибутов: изменять тип нумерации (цифры, буквы, римские цифры), устанавливать начальное значение и даже создавать списки с обратным отсчетом. Эти упражнения помогут закрепить синтаксис и понять, как гибко можно настраивать списки под разные задачи.

Список тем

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

id: 37824_ol-li-basic-creation

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

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  background-color: #f9f9f9;
}
ol {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 20px 40px;
  margin: 0;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}
li:last-child {
  margin-bottom: 0;
}

                     <input1>
  <input2>Вскипятить воду</input2>
  <input2>Положить чайный пакетик в чашку</input2>
  <input2>Залить кипятком</input2>
</input1>

HTML

<input1>
  <input2>Вскипятить воду</input2>
  <input2>Положить чайный пакетик в чашку</input2>
  <input2>Залить кипятком</input2>
</input1>

Для создания упорядоченного списка используется тег-контейнер `<ol>`. Каждый элемент списка необходимо обернуть в тег `<li>`. В итоге должна получиться структура: `<ol><li>...</li><li>...</li></ol>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Правильное закрытие тегов

id: 37824_ol-li-closing-tags

В этом коде пропущены закрывающие теги для списка и его элементов. Допишите их, чтобы список отображался корректно. Правильная структура - ключ к валидному коду.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  background-color: #f9f9f9;
}
ol {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 20px 40px;
  margin: 0;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}
li:last-child {
  margin-bottom: 0;
}

                     <ol>
  <li>Первый пункт<input1>
  <li>Второй пункт<input1>
  <li>Третий пункт<input1>
<input2>

HTML

<ol>
  <li>Первый пункт<input1>
  <li>Второй пункт<input1>
  <li>Третий пункт<input1>
<input2>

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

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Нумерация заглавными буквами

id: 37824_ol-li-type-attribute-alpha

Измените стандартную нумерацию списка с цифр на заглавные латинские буквы (A, B, C). Для этого нужно добавить к тегу `<ol>` специальный атрибут, отвечающий за тип маркера.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  background-color: #f9f9f9;
}
ol {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 20px 40px;
  margin: 0;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}
li:last-child {
  margin-bottom: 0;
}

                     <ol input1="A">
  <li>Яблоки</li>
  <li>Апельсины</li>
  <li>Груши</li>
</ol>

HTML

<ol input1="A">
  <li>Яблоки</li>
  <li>Апельсины</li>
  <li>Груши</li>
</ol>

Чтобы изменить стиль нумерации, используйте атрибут `type` у тега `<ol>`. Для нумерации заглавными буквами присвойте этому атрибуту значение 'A'. Пример: `<ol type="A">`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Нумерация строчными римскими цифрами

id: 37824_ol-li-type-attribute-roman

Теперь давайте создадим список, который будет нумероваться строчными римскими цифрами (i, ii, iii). Задание аналогично предыдущему, нужно лишь указать другое значение для атрибута типа.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  background-color: #f9f9f9;
}
ol {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 20px 40px;
  margin: 0;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}
li:last-child {
  margin-bottom: 0;
}

                     <ol type="input1">
  <li>Введение</li>
  <li>Основная часть</li>
  <li>Заключение</li>
</ol>

HTML

<ol type="input1">
  <li>Введение</li>
  <li>Основная часть</li>
  <li>Заключение</li>
</ol>

Используйте уже знакомый вам атрибут `type` у тега `<ol>`. Чтобы включить нумерацию строчными римскими цифрами, присвойте ему значение 'i'.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Начало списка с другой цифры

id: 37824_ol-li-start-attribute

Иногда нужно, чтобы нумерация списка начиналась не с 1, а с другого числа. Создайте список, нумерация которого начнется с цифры 5. Для этого понадобится еще один полезный атрибут тега `<ol>`.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  background-color: #f9f9f9;
}
ol {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 20px 40px;
  margin: 0;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}
li:last-child {
  margin-bottom: 0;
}

                     <ol input1="5">
  <li>Пятый элемент</li>
  <li>Шестой элемент</li>
  <li>Седьмой элемент</li>
</ol>

HTML

<ol input1="5">
  <li>Пятый элемент</li>
  <li>Шестой элемент</li>
  <li>Седьмой элемент</li>
</ol>

Для указания начального значения нумерации используется атрибут `start`. Присвойте ему число, с которого должен начинаться отсчет. Например: `<ol start="5">`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Обратный отсчет в списке

id: 37824_ol-li-reversed-attribute

Создайте список, который ведет обратный отсчет (3, 2, 1). Это делается с помощью специального 'логического' атрибута, который не требует значения. Просто добавьте его в тег `<ol>`.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  background-color: #f9f9f9;
}
ol {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 20px 40px;
  margin: 0;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}
li:last-child {
  margin-bottom: 0;
}

                     <ol input1>
  <li>Три</li>
  <li>Два</li>
  <li>Один</li>
</ol>

HTML

<ol input1>
  <li>Три</li>
  <li>Два</li>
  <li>Один</li>
</ol>

Чтобы список нумеровался в обратном порядке, добавьте к тегу `<ol>` атрибут `reversed`. Это булевый атрибут, ему не нужно присваивать значение. Просто напишите его имя.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Комбинация атрибутов: тип и начало

id: 37824_ol-li-type-start-combo

Усложним задачу. Создайте список, который нумеруется строчными латинскими буквами и начинается с буквы 'c'. Вам потребуется использовать два атрибута одновременно в теге `<ol>`.

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  background-color: #f9f9f9;
}
ol {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 20px 40px;
  margin: 0;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}
li:last-child {
  margin-bottom: 0;
}

                     <ol input1="a" input2="3">
  <li>Пункт 'c'</li>
  <li>Пункт 'd'</li>
  <li>Пункт 'e'</li>
</ol>

HTML

<ol input1="a" input2="3">
  <li>Пункт 'c'</li>
  <li>Пункт 'd'</li>
  <li>Пункт 'e'</li>
</ol>

Для этой задачи нужно скомбинировать атрибуты `type` и `start`. Атрибуту `type` присвойте значение 'a' (строчные буквы), а атрибуту `start` — числовое значение, соответствующее порядковому номеру буквы 'c' в алфавите (a=1, b=2, c=3).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Полный контроль: обратный список с римскими цифрами

id: 37824_ol-li-type-start-reversed-combo

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

CSS

body {
  font-family: sans-serif;
  color: #333;
  padding: 10px;
  background-color: #f9f9f9;
}
ol {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 20px 20px 40px;
  margin: 0;
}
li {
  margin-bottom: 8px;
  line-height: 1.5;
}
li:last-child {
  margin-bottom: 0;
}

                     <ol input1="I" input2="10" input3>
  <li>Десять (X)</li>
  <li>Девять (IX)</li>
  <li>Восемь (VIII)</li>
</ol>

HTML

<ol input1="I" input2="10" input3>
  <li>Десять (X)</li>
  <li>Девять (IX)</li>
  <li>Восемь (VIII)</li>
</ol>

Здесь нужно использовать сразу три атрибута в теге `<ol>`: `type` со значением 'I' для заглавных римских цифр, `start` со значением '10' для начала отсчета с X, и логический атрибут `reversed` для обратного порядка.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку