🧱

Модуль 1. Введение и HTML

Занятие 5
Списки

Сегодня мы соберём свой топ любимых книг, игр или фильмов с помощью нумерованных и маркированных списков.

👀

Сегодня сделаем вот такое

📋

Списки на каждом сайте

  • 🍔 Меню сайта
  • 🥞 Рецепты: продукты и шаги
  • 🏆 Рейтинги и топы
  • ✅ Инструкции и правила

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

🔘

<ul> — порядок не важен

  • ul = unordered list
  • Пункты отмечены точками
  • Что взять в поход, любимые цвета
<h3>Что взять в поход</h3>
<ul>
  <li>Палатка</li>
  <li>Фонарик</li>
  <li>Спальник</li>
</ul>
🔢

<ol> — порядок важен

  • ol = ordered list
  • Номера ставит браузер сам
  • Шаги инструкции, места в рейтинге
<h3>Как сделать бутерброд</h3>
<ol>
  <li>Отрезать хлеб</li>
  <li>Намазать масло</li>
  <li>Положить сыр</li>
</ol>
🧩

<li> — пункт списка

  • li живёт только внутри ul или ol
  • Внутри ul/ol — только li
  • А в li можно всё: текст, ссылки, картинки

Вопрос-подсказка: если перемешать пункты, смысл изменится? Да → ol, нет → ul.

🪜

Вложенные списки

Вложенный список пишем внутри li, до его закрытия.

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

<ul>
  <li>Еда
    <ul>
      <li>Бутерброды</li>
      <li>Яблоки</li>
    </ul>
  </li>
  <li>Фонарик</li>
</ul>
⚙️

Секретные атрибуты <ol>

  • start="5" — начать с 5
  • reversed — считать назад
  • type="A" — буквы, type="I" — римские цифры
<h3>Топ-3 игр</h3>
<ol reversed>
  <li>Шахматы</li>
  <li>Minecraft</li>
  <li>Футбол</li>
</ol>
<ol type="A">
  <li>Вариант A</li>
  <li>Вариант B</li>
</ol>
🐞

Найди ошибку

Почему «Бутерброды» и «Яблоки» оказались не на своём месте?

Подсказка: где стоит вложенный список?

<ul>
  <li>Еда</li>
  <ul>
    <li>Бутерброды</li>
    <li>Яблоки</li>
  </ul>
  <li>1. Фонарик</li>
</ul>
🃏

Запомни!

  • <ul>Маркированный список
  • <ol>Нумерованный список
  • <li>Пункт списка
  • <ol start="5">Нумерация с 5
  • <ol reversed>Обратная нумерация
⌨️

Практика: Список любимых книг, игр или фильмов

  1. Сделай нумерованный список «Мой топ-5 игр (книг, фильмов)».
  2. Сделай маркированный список «Что взять в поход».
  3. Во втором списке сделай вложенный список: «Еда» → бутерброды, яблоки, вода.
  4. Добавь к спискам заголовки h2.

🚀 Со звёздочкой: Сделай «рейтинг наоборот» с атрибутом reversed и нумерацию буквами с помощью type="A".

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Составь список из 5 фактов о своём хобби — пригодится для итогового проекта.