Списки на веб-странице

Списки на веб-странице

Собери страницу с двумя видами списков и одним вложенным списком; открой её в браузере.

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

Результат урока

Создашь в папке ListsPage_10 файл lists.html с неупорядоченным списком ul и упорядоченным ol (пункты — li); вложишь один список внутрь пункта другого без пересечения тегов; откроешь файл в браузере; объяснишь, когда выбрать ul, а когда ol.

Перед началом

Работай в своей папке и соблюдай правила кабинета. При неисправности остановись и обратись к учителю. Нужны простой текстовый редактор (Блокнот или Notepad++) и браузер. Интернет для работы не нужен.

На учебной странице размещай только учебный текст: без домашнего адреса, телефона и личных фотографий.

Вспомни: каркас документа (html, head, body), парные теги и правило «закрываем в обратном порядке» уже знакомы. Новое — списки.

Основа — § 7 учебника (списки). Атрибут type сегодня в резерве. CSS, гиперссылки и изображения — следующие уроки.

Зачем нужны списки

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

Вопрос выбора простой: важен ли порядок для смысла? Если нет — неупорядоченный список. Если да — упорядоченный.

Неупорядоченный список: ul

ul (unordered list) — неупорядоченный список. Порядок пунктов не задаёт смысл: список хобби, состав набора, перечень тем.

<ul>
  <li>Чтение</li>
  <li>Спорт</li>
  <li>Музыка</li>
</ul>

Контейнер ul открывается и закрывается. Внутри — элементы списка.

Элемент списка: li

li (list item) — один пункт. Текст пункта — содержание элемента li. Без li перечень не станет списком: пункты должны жить внутри ul или ol.

Упорядоченный список: ol

ol (ordered list) — упорядоченный список. Порядок важен: шаги инструкции, план, алгоритм.

<ol>
  <li>Открыть редактор</li>
  <li>Набрать разметку</li>
  <li>Сохранить файл</li>
  <li>Открыть в браузере</li>
</ol>

Номера ставит браузер. Писать «1», «2», «3» вручную в тексте не нужно: при перестановке пунктов номера обновятся сами.

Структура списка

Снаружи — контейнер ul или ol. Внутри — один или несколько li. Закрываем теги в обратном порядке: сначала пункты, потом контейнер.

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

Отдельного тега «многоуровневый список» нет. Подпункты получают, вкладывая новый ul или ol внутрь элемента li.

<ul>
  <li>Хобби
    <ol>
      <li>Выбрать тему</li>
      <li>Найти материалы</li>
      <li>Попробовать</li>
    </ol>
  </li>
  <li>Учёба</li>
</ul>

Внутренний список целиком лежит внутри одного li.

Ошибка: пересечение тегов

Теги вкладываются, но не пересекаются. Сначала закрываем внутренний контейнер, затем внешний.

<!-- верно -->
<li>Тема
  <ol>
    <li>Шаг</li>
  </ol>
</li>

<!-- ошибка -->
<li>Тема
  <ol>
    <li>Шаг</li>
</li>
  </ol>

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

Чек-лист: найди причину

Сохранение и просмотр

Сохрани файл с расширением .html (тип «Все файлы», кодировка UTF-8).

Открой файл из своей папки. Интернет не нужен. Держи редактор и браузер в двух окнах: правишь код, сохраняешь, обновляешь страницу клавишей F5.

Пауза перед практикой

На минуту отведи взгляд от экрана, расслабь кисти и проверь посадку. Затем переходи к своей папке.

Практика: ListsPage_10

Создай папку ListsPage_10 (10 — номер места) в своей рабочей папке.

В title и h1 напиши свои тексты. CSS и гиперссылки сегодня не нужны.

Лист проверки

Критерии готовности

Шесть диагностических баллов: папка с файлом .html; ul с ≥ 3 li; ol с ≥ 3 li; одно корректное вложение; правка видна после обновления; объяснён выбор ul или ol. Баллы — обратная связь, не автоматическая отметка.

Если остаётся время: атрибут type у ol (резерв учебника); третий список; свой сюжет страницы.

Если результат отличается

Объясни самостоятельно

1. Чем ul отличается от ol? Приведи по одному примеру.
2. Куда кладут вложенный список и почему нельзя пересекать теги?
3. Что покажет браузер, если пункты написать без ul/ol?

Показать ответ после выполнения

Домашнее задание

§ 7, вопросы о списках. Письменно: 1) когда выбрать ul, а когда ol; 2) как правильно вложить список в пункт; 3) чем опасны пересекающиеся теги. По желанию — дописать третий список на ListsPage. Гиперссылки, изображения и CSS не задаются: это следующие уроки раздела. Установка программ дома не требуется.

Источники

Котов В. М. и др. «Информатика. 11 класс», 2021: глава 2 «Основы веб-конструирования», § 7 «Создание веб-страниц» (списки). Содержание главы. Электронное приложение.

MDN Web Docs: ul, ol, li.

ListsPage, чек-лист симптомов, листы и критерии — авторская адаптация; одиннадцать иллюстраций условные и не являются снимками браузера или редактора.