Атрибуты start и reversed в OL [Модуль 5: Списки]: Тренажер HTML

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

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

Список тем

Создание простого упорядоченного списка

id: 37830_ol-attributes-base-1

Для начала давайте создадим базовый упорядоченный список планет Солнечной системы. Ваша задача — правильно указать тег для создания упорядоченного списка.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ol {
  background-color: #f4f7f9;
  border-left: 4px solid #5c9ce5;
  padding: 15px 15px 15px 40px;
  border-radius: 5px;
}
li {
  margin-bottom: 5px;
}

                     <h3>Планеты Солнечной системы:</h3>
<input1>
  <li>Меркурий</li>
  <li>Венера</li>
  <li>Земля</li>
</input1>

HTML

<h3>Планеты Солнечной системы:</h3>
<input1>
  <li>Меркурий</li>
  <li>Венера</li>
  <li>Земля</li>
</input1>

Упорядоченные списки создаются с помощью тега `<ol>` (Ordered List). Внутрь этого тега помещаются элементы списка `<li>`.

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

Результат

Сообщения

Выполнить

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

Начало нумерации с определенного числа

id: 37830_ol-attributes-start-2

Представьте, что это продолжение списка. Первая часть закончилась на 4-м пункте. Вам нужно, чтобы этот список начинался с цифры 5. Добавьте необходимый атрибут и его значение к тегу `<ol>`.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ol {
  background-color: #f4f7f9;
  border-left: 4px solid #5c9ce5;
  padding: 15px 15px 15px 40px;
  border-radius: 5px;
}
li {
  margin-bottom: 5px;
}

                     <h3>Продолжение инструкции:</h3>
<ol input1="5">
  <li>Шаг пятый</li>
  <li>Шаг шестой</li>
  <li>Шаг седьмой</li>
</ol>

HTML

<h3>Продолжение инструкции:</h3>
<ol input1="5">
  <li>Шаг пятый</li>
  <li>Шаг шестой</li>
  <li>Шаг седьмой</li>
</ol>

Чтобы начать нумерацию с определенного числа, используется атрибут `start`. Например, `start="5"` начнет нумерацию с 5.

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

Результат

Сообщения

Выполнить

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

Указание значения для атрибута start

id: 37830_ol-attributes-start-value-3

Теперь наоборот. Атрибут для старта нумерации уже есть, но нужно указать правильное значение, чтобы список этапов строительства начинался с цифры 10.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ol {
  background-color: #fff8e1;
  border-left: 4px solid #ffc107;
  padding: 15px 15px 15px 40px;
  border-radius: 5px;
}
li {
  margin-bottom: 5px;
}

                     <h3>Этапы строительства (часть 3):</h3>
<ol start="input1">
  <li>Закладка коммуникаций</li>
  <li>Внутренняя отделка</li>
  <li>Внешняя отделка</li>
</ol>

HTML

<h3>Этапы строительства (часть 3):</h3>
<ol start="input1">
  <li>Закладка коммуникаций</li>
  <li>Внутренняя отделка</li>
  <li>Внешняя отделка</li>
</ol>

Атрибуту `start` нужно присвоить число, с которого должна начаться нумерация. В данном случае это будет 10.

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

Результат

Сообщения

Выполнить

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

Список в обратном порядке

id: 37830_ol-attributes-reversed-4

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

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ol {
  background-color: #ffebee;
  border-left: 4px solid #f44336;
  padding: 15px 15px 15px 40px;
  border-radius: 5px;
  font-weight: bold;
}
li {
  margin-bottom: 5px;
}

                     <h3>Приготовьтесь к старту:</h3>
<ol input1>
  <li>Три</li>
  <li>Два</li>
  <li>Один</li>
</ol>

HTML

<h3>Приготовьтесь к старту:</h3>
<ol input1>
  <li>Три</li>
  <li>Два</li>
  <li>Один</li>
</ol>

Для создания обратной нумерации используется булев атрибут `reversed`. Его достаточно просто добавить в тег `<ol>`.

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

Результат

Сообщения

Выполнить

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

Обратный отсчет с указанной цифры

id: 37830_ol-attributes-start-reversed-5

Теперь объединим знания. Создайте рейтинг "Топ-3 моих любимых фрукта", который будет идти в обратном порядке, начиная с 3-го места. Вам нужно добавить два атрибута.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ol {
  background-color: #e8f5e9;
  border-left: 4px solid #4caf50;
  padding: 15px 15px 15px 40px;
  border-radius: 5px;
}
li {
  margin-bottom: 5px;
}

                     <h3>Топ-3 моих любимых фрукта:</h3>
<ol input1="3" input2>
  <li>Апельсин</li>
  <li>Яблоко</li>
  <li>Банан</li>
</ol>

HTML

<h3>Топ-3 моих любимых фрукта:</h3>
<ol input1="3" input2>
  <li>Апельсин</li>
  <li>Яблоко</li>
  <li>Банан</li>
</ol>

Используйте атрибут `start="3"` чтобы начать с тройки, и атрибут `reversed` чтобы нумерация шла на убывание (3, 2, 1).

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

Результат

Сообщения

Выполнить

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

Полная конструкция: тег и атрибуты

id: 37830_ol-attributes-full-6

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

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ol {
  background-color: #f3e5f5;
  border-left: 4px solid #9c27b0;
  padding: 15px 15px 15px 40px;
  border-radius: 5px;
}
li {
  font-style: italic;
  margin-bottom: 5px;
}

                     <h3>Победители (места с 5 по 3):</h3>
<input1 input2="5" input3>
  <li>Команда 'Гамма'</li>
  <li>Команда 'Бета'</li>
  <li>Команда 'Альфа'</li>
</input1>

HTML

<h3>Победители (места с 5 по 3):</h3>
<input1 input2="5" input3>
  <li>Команда 'Гамма'</li>
  <li>Команда 'Бета'</li>
  <li>Команда 'Альфа'</li>
</input1>

Начните с открывающего тега `<ol>`, затем добавьте атрибут `start` со значением `5` и булев атрибут `reversed`. Не забудьте закрывающий тег `</ol>`.

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

Результат

Сообщения

Выполнить

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

Нумерация с отрицательных чисел

id: 37830_ol-attributes-negative-start-7

Атрибут `start` может принимать и отрицательные значения. Создайте список, нумерация которого начинается с -2. Это может быть полезно для отображения событий до нулевой отметки.

CSS

body {
  font-family: sans-serif;
  padding: 15px;
  color: #333;
}
ol {
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
  padding: 15px 15px 15px 40px;
  border-radius: 5px;
}
li {
  margin-bottom: 5px;
}

                     <h3>Температурная шкала:</h3>
<ol start="input1">
  <li>Замерзание антифриза</li>
  <li>Замерзание морской воды</li>
  <li>Замерзание пресной воды</li>
</ol>

HTML

<h3>Температурная шкала:</h3>
<ol start="input1">
  <li>Замерзание антифриза</li>
  <li>Замерзание морской воды</li>
  <li>Замерзание пресной воды</li>
</ol>

Используйте атрибут `start` и присвойте ему отрицательное значение, например `start="-2"`.

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

Результат

Сообщения

Выполнить

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