Тема 3. Комментарии и списки в HTML

Тип занятия: Комбинированное занятие.

Цель занятия: Сформировать у обучающихся знания и практические навыки работы с комментариями и списками в HTML, необходимые для структурирования и документирования кода веб‑страниц.

Задачи занятия:

1. Обучающие:

 Познакомить учащихся с синтаксисом и назначением HTML‑комментариев (<!-- ... -->), объяснить их роль в документировании кода и отладке.

Изучить виды HTML‑списков:

маркированные (<ul> и <li>);

нумерованные (<ol> и <li>);

списки определений (<dl>, <dt>, <dd>).

Разобрать атрибуты, влияющие на оформление списков (например, type для <ol>).

Отработать навыки написания HTML‑кода с использованием комментариев и разных типов списков на практических примерах.

Научить сохра нять HTML‑документы и просматривать результат в браузере.

2. Развивающие:

Развивать алгоритмическое и логическое мышление через составление структурированного кода.

Совершенствовать навыки анализа и интерпретации HTML‑разметки: умение «читать» код и понимать, как он отображается в браузере.

Развивать способность к самостоятельной работе и поиску решений при выполнении практических заданий.

Укреплять информационную культуру и грамотность в области веб‑технологий.

3. Воспитательные:

Воспитывать самостоятельность и усидчивость при выполнении практических задач за компьютером.

Повышать мотивацию к изучению информационных технологий и веб-разработки через создание видимого продукта (собственной веб-страницы).

Формулировать культуру аккуратного оформления цифрового пространства и написания чистого кода.

Формировать ответственное отношение к документированию кода (значение комментариев для командной работы и поддержки проектов).

План занятия:

Домашнее задание: Заполнение рабочего листа по теме

Рабочий лист «Комментарии и списки в HTML»

Задание 1. Комментарии в HTML (письменно)

Допиши правило:
Комментарий в HTML начинается с символов <!-- и заканчивается символами __________.
Текст комментария ______________ (виден / не виден) на веб-странице, но остаётся в ______________ коде.

Напиши комментарий к строке кода:

<p>Важный абзац</p>

Закомментируй этот абзац, чтобы он временно не отображался в браузере.

Горячие клавиши в VS Code:
Чтобы быстро закомментировать строку, нужно выделить её и нажать ____________________.

Задание 2. Виды списков

Заполни таблицу:

Задание 3. Теги элементов списка

Элементы маркированного и нумерованного списка обозначаются тегом ____________________.

В списке определений:

термин обозначается тегом __________,

описание термина — тегом __________.

Задание 4. Вложенные списки

Дан HTML-код:

<ol>

<li>Разогреть сковороду</li>

<li>Добавить масло</li>

<li>Выложить продукты

<ul>

<li>Помидор</li>

<li>Лук</li>

</ul>

</li>

</ol>

Вопросы:

Какой внешний список используется? ____________________

Какой список вложен внутрь третьего пункта? ____________________

Сколько всего пунктов во внешнем списке? ____________________

Задание 5. Атрибуты списков

5.1. Для нумерованного списка (<ol>)

Соедини стрелками атрибут и его действие:

5.2. Для маркированного списка (<ul>)

Напиши, какой тип маркера задаёт атрибут type:

type="disc" → __________

type="circle" → __________

type="square" → __________

Задание 6. Список определений (<dl>)

Дан код:

<dl>

<dt>HTML</dt>

<dd>Язык гипертекстовой разметки</dd>

<dt>CSS</dt>

<dd>Каскадные таблицы стилей</dd>

</dl>

Задание:

Сколько терминов в этом списке? __________

Сколько определений? __________

Что будет, если одному <dt> добавить два <dd>?

Задание 7. Практическое задание (выполняется в редакторе кода)

Создай HTML-страницу, которая содержит:

Заголовок <h1>: «Мои любимые рецепты»

Маркированный список продуктов для салата (не менее 3 пунктов).

Нумерованный список шагов приготовления (не менее 3 шагов), внутри одного из шагов сделай вложенный маркированный список (например, варианты добавок).

Список определений для 3 кулинарных терминов (например: «Аль денте», «Пассеровка», «Бланшировать»).

Комментарий перед списком определений с текстом: «Словарик начинающего повара».

Результат: покажи готовую страницу преподавателю или сохрани как recipes.html.

Задание 8. Вопросы для самопроверки (устно или письменно)

Можно ли вложить нумерованный список внутрь маркированного?

Что будет, если написать <ol start="5"> — с какого номера начнётся первый пункт?

Зачем нужны комментарии, если они не видны на странице?

Какой атрибут делает нумерацию римскими цифрами?

Критерии оценки (для учителя):

Задания 1–6 — по 1 баллу за верный ответ.

Задание 7 — до 5 баллов (корректный HTML, наличие всех элементов, вложенность, комментарий).

Задание 8 — 1 балл за полный ответ на каждый вопрос (устно).

Максимум: 15 баллов

Материал для объяснения:

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

Практически во всех языках программирования есть такое понятие, как комментарии. Комментарии — это такой текст, который будет проигнорирован браузером. На экране он будет не виден, но останется в исходном коде страницы.

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

Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса, то есть <!--, потом текст комментария, а потом два дефиса и уголок: -->.

В VS Code быстро поставить или снять комментарий можно, выделив нужный текст или находясь в нужной строке нажать Ctrl+/.

Как видим, комментарий в браузере не виден

Списки

Наряду с абзацами и заголовками существует еще один важный элемент страницы — это списки. Такие элементы наверняка знакомы всем пользователям Интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется «маркер списка»).

Для оформления перечисления каких-то элементов или этапов используют списки. Итак, списки могут быть:

1. Неупорядоченными или маркированными. Для обозначения элемента списка используется какой-то графический символ.

2. Упорядоченными или нумерованными. Для обозначения элемента списка используются арабские или римские цифры.

Тип списка указываем с помощью тегов: <ol></ol> для нумерованных и <ul></ul> для маркированных.

При этом элементы списка и в том и в другом случае обозначаются тегом <li></li>.

Часто нам необходимо выстроить в виде списка гораздо более сложную структуру. Так вот, элементы <ul> и <ol> могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между <ol> и <ul> без ограничений.

Результат:

Для нумерованных списков можно указать обратный вывод нумерации:

Добавим атрибут нумерованному списку:

И посмотрим результат:

Также можно определить с какой цифры начать нумерацию:

Для маркированного списка можно определить тип маркера:

Списки определений (описаний)

Элемент dl представляет собой список определений. Он включает в себя перечень групп, состоящих из терминов (заданных с помощью элемента dt) и описаний (элемент dd).

Обычно такие списки используют для реализации глоссария или отображения метаданных (списков пар ключ-значение).

При этом одному термину может соответствовать несколько определений и наоборот.

Термины и описания имеют особые настройки внешнего вида.

Содержимое элементов dt выровнено по левому краю, а для элементов dd по умолчанию установлен отступ слева размером 40px.

Никаких особых атрибутов элементы не имеют.

Далее выполнение практической работы.

Материал для практической работы:

Практическая работа 2. Создание HTML-страницы: списки, комментарии.

Цель практической работы:

закрепить навыки создания структурированных HTML-документов с использованием различных типов списков (маркированных, нумерованных, списков определений) и комментариев для документирования кода.

​​​​​​​ Ход выполнения практической работы:

Задание 1.

Создайте файл lists.html. Добавьте в него:

Маркированный список любимых фильмов (3-4 пункта).

Нумерованный список топ-3 книг (с атрибутом type="I").

Список определений из 3 IT-терминов.

Задание 2.

Создайте структуру «Планета → Материк → Страна → Город»:

Используйте вложенные <ul>.

Добавьте комментарий перед каждым уровнем.

Пример (не показывать готовый, только описание):

Земля

- Евразия

- Франция

- Париж

- Германия

- Африка

Задание 3.

Возьмите готовый HTML-файл (или код из упр.1) и:

Закомментируйте второй пункт списка.

Напишите комментарий, объясняющий, зачем вы используете тот или иной тип списка.

Временно скройте весь список определений с помощью комментария.

Задание 4.

Создайте страницу рецепта любого блюда с такой структурой:

Заголовок h1.

Маркированный список ингредиентов.

Нумерованный список шагов приготовления.

Список определений: «Ккал», «Время готовки», «Сложность».

В конце добавьте комментарий с датой создания и автором.

Задание 5.

Создайте страницу, содержащую следующую информацию: