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

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

Неупорядоченные списки — один из фундаментальных элементов HTML для структурирования контента. Они используются повсюду: от простых перечислений до создания сложных навигационных меню. В этом тренажере вы на практике отработаете создание списков с помощью тегов `<ul>` и `<li>`. Задания построены от самых основ, где нужно создать простейший список, до более продвинутых техник, таких как вложенные списки и стилизация с помощью CSS-классов. Вам предстоит заполнять пропуски в HTML-коде, чтобы увидеть, как ваши изменения влияют на итоговый результат. Это позволит вам не только запомнить синтаксис, но и понять логику их применения в реальных задачах.",

Список тем

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

id: 37823_ul-li-01

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

CSS

/* Для этого задания CSS не требуется */
body {
  font-family: sans-serif;
  color: #333;
}

                     <input1>
  <input2>Яблоки</input2>
  <input2>Апельсины</input2>
  <input2>Бананы</input2>
</input1>

HTML

<input1>
  <input2>Яблоки</input2>
  <input2>Апельсины</input2>
  <input2>Бананы</input2>
</input1>

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

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

Результат

Сообщения

Выполнить

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

Список с классом для стилизации

id: 37823_ul-li-02

Теперь давайте применим к списку стили. В CSS уже подготовлен класс `fruit-list`, который добавляет рамку и отступы. Ваша задача — применить этот класс к списку, используя соответствующий HTML-атрибут.

CSS

.fruit-list {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  list-style-position: inside;
}

                     <ul input1="fruit-list">
  <li>Персики</li>
  <li>Сливы</li>
  <li>Виноград</li>
</ul>

HTML

<ul input1="fruit-list">
  <li>Персики</li>
  <li>Сливы</li>
  <li>Виноград</li>
</ul>

Чтобы применить CSS-класс к HTML-элементу, используется атрибут `class`. Вам нужно добавить этот атрибут в открывающий тег `<ul>` и присвоить ему значение `fruit-list`.

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

Результат

Сообщения

Выполнить

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

Изменение маркеров списка

id: 37823_ul-li-03

По умолчанию маркеры в неупорядоченном списке — это закрашенные кружки. С помощью CSS можно изменить их вид. В стилях уже есть классы `markers-circle` и `markers-square`. Примените класс `markers-square`, чтобы изменить маркеры на квадраты.

CSS

.markers-circle {
  list-style-type: circle;
}

.markers-square {
  list-style-type: square;
}

                     <ul class="input1">
  <li>Ноутбук</li>
  <li>Мышь</li>
  <li>Клавиатура</li>
</ul>

HTML

<ul class="input1">
  <li>Ноутбук</li>
  <li>Мышь</li>
  <li>Клавиатура</li>
</ul>

Вам нужно указать значение `markers-square` для атрибута `class` у тега `<ul>`. Не забудьте, что значение атрибута пишется в кавычках.

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

Результат

Сообщения

Выполнить

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

Создание вложенного списка

id: 37823_ul-li-04

Списки могут быть вложенными. Это полезно для создания иерархических структур. Создайте вложенный список внутри элемента 'Молочные продукты'. Вложенный список должен содержать два своих элемента.

CSS

ul {
  font-family: sans-serif;
  color: #333;
}

                     <ul>
  <li>Хлеб</li>
  <li>Молочные продукты
    <input1>
      <input2>Молоко</input2>
      <input2>Сыр</input2>
    </input1>
  </li>
  <li>Овощи</li>
</ul>

HTML

<ul>
  <li>Хлеб</li>
  <li>Молочные продукты
    <input1>
      <input2>Молоко</input2>
      <input2>Сыр</input2>
    </input1>
  </li>
  <li>Овощи</li>
</ul>

Чтобы создать вложенный список, нужно поместить новый тег `<ul>` внутрь одного из тегов `<li>` основного списка. Затем внутри этого нового `<ul>` добавьте элементы `<li>`.

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

Результат

Сообщения

Выполнить

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

Горизонтальное навигационное меню

id: 37823_ul-li-05

Неупорядоченные списки — стандартный способ создания навигационных меню. Примените к списку класс `nav-menu`, чтобы убрать маркеры и расположить элементы в одну строку, как в меню сайта.

CSS

.nav-menu {
  list-style-type: input1;
  padding: 0;
  margin: 0;
  background-color: #f2f2f2;
  border-radius: 5px;
  text-align: center;
}

.nav-menu li {
  display: inline-block;
}

.nav-menu li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

                     <ul class="input2">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Товары</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

HTML

<ul class="input2">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Товары</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

Добавьте к тегу `<ul>` атрибут `class` со значением `nav-menu`. CSS уже настроен так, чтобы превратить обычный список в горизонтальное меню.

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

Результат

Сообщения

Выполнить

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

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

id: 37823_ul-li-06

Иногда стандартных маркеров недостаточно. В CSS подготовлен класс `check-list`, который заменяет стандартные маркеры на иконку-галочку. Ваша задача — правильно создать структуру списка и применить к нему этот класс.

CSS

.check-list {
  list-style: none;
  padding-left: 0;
}

.check-list li {
  padding-left: 25px;
  background-image: url('https://naytikurs.ru/img/11s.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px;
  margin-bottom: 8px;
  line-height: 1.5;
}

                     <input1 class="input2">
  <li>Изучить HTML</li>
  <li>Создать список</li>
  <li>Применить стили</li>
</input1>

HTML

<input1 class="input2">
  <li>Изучить HTML</li>
  <li>Создать список</li>
  <li>Применить стили</li>
</input1>

Вам нужно создать контейнер `<ul>` с классом `check-list`. Внутри него разместите два элемента списка `<li>`. CSS сделает всё остальное.

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

Результат

Сообщения

Выполнить

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

Комбинированное задание

id: 37823_ul-li-07

Проверим все знания. Создайте структуру списка планет. У 'Газовые гиганты' должен быть вложенный список. К основному списку примените класс `planet-list-main`, а к вложенному — `planet-list-inner`.

CSS

ul {
  padding-left: 20px;
}

.planet-list-main {
  list-style-type: disc;
}

.planet-list-inner {
  list-style-type: circle;
  color: #555;
}

                     <ul input1="planet-list-main">
  <li>Земля</li>
  <li>Марс</li>
  <li>Газовые гиганты
    <ul class="input2">
      <input3>Юпитер</input3>
      <input3>Сатурн</input3>
    </ul>
  </li>
</ul>

HTML

<ul input1="planet-list-main">
  <li>Земля</li>
  <li>Марс</li>
  <li>Газовые гиганты
    <ul class="input2">
      <input3>Юпитер</input3>
      <input3>Сатурн</input3>
    </ul>
  </li>
</ul>

Основной список — это `<ul>` с классом `planet-list-main`. Вложенный список (`<ul>` с классом `planet-list-inner`) должен находиться внутри `<li>` 'Газовые гиганты'.

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

Результат

Сообщения

Выполнить

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