Создание web-страницы языком HTML
Цели и задачи
- Цель по SMART: к концу урока создать и сохранить простую web-страницу с заголовком, абзацем, маркированным списком и гиперссылкой, используя базовые HTML-теги, а также объяснить назначение каждого использованного элемента.
- Сформировать представление о HTML как языке разметки гипертекста и научить различать открывающий и закрывающий теги.
- Научить применять теги , , , ,
,,
- ,
- и при создании страницы.
- Развивать алгоритмическое мышление, умение находить ошибки в коде и проверять результат в браузере.
- Снизить тревожность перед заданиями ОГЭ по информатике через выполнение практического задания в формате «код — результат — исправление».
Планируемые результаты
Личностные
- Осознают практическую ценность HTML для создания информационных ресурсов и профессионального самоопределения.
- Проявляют интерес к самостоятельному созданию цифрового продукта.
- Понимают, что ошибка в коде является этапом отладки, а не причиной отказа от работы.
- Соблюдают правила цифровой безопасности и корректного использования материалов сети.
Метапредметные
- Планируют последовательность создания web-страницы и контролируют соответствие результата поставленной цели.
- Читают и анализируют фрагменты HTML-кода, выделяя структуру документа и назначение тегов.
- Сотрудничают в парах, аргументируют выбор исправления и используют предметную терминологию.
- Применяют навыки поиска ошибки, проверки гипотезы и корректировки результата.
Предметные
- Знать назначение HTML, тега, атрибута, открывающего и закрывающего тегов.
- Уметь создавать каркас HTML-документа и размещать в нём заголовок и текстовый абзац.
- Уметь создавать маркированный список и гиперссылку с помощью тегов
- ,
- и .
- Уметь сохранять HTML-файл и просматривать результат в браузере.
- Уметь находить простые ошибки в парных тегах и значении атрибута href.
Универсальные учебные действия (УУД)
Личностные УУД
- Определяют личную значимость создания web-страниц для учёбы, общения и будущей профессии.
- Проявляют ответственное отношение к размещаемой в сети информации.
- Оценивают собственную готовность выполнять практические задания по информатике.
- Формируют установку на последовательную проверку и исправление ошибок.
Регулятивные УУД
- Формулируют цель практической работы и составляют план создания страницы.
- Работают по алгоритму: создать файл, ввести код, сохранить, открыть, проверить, исправить.
- Сопоставляют ожидаемый и фактический результат отображения страницы.
- Осуществляют самоконтроль по чек-листу и корректируют HTML-код.
Познавательные УУД
- Выделяют в HTML-документе структурные элементы и устанавливают их назначение.
- Сравнивают правильный и ошибочный фрагменты кода.
- Моделируют структуру страницы с помощью вложенных элементов.
- Используют знаковую систему HTML для представления информации.
Коммуникативные УУД
- Обсуждают в паре назначение тегов и формулируют общий вывод.
- Задают уточняющие вопросы о структуре документа и способах исправления ошибок.
- Аргументированно объясняют партнёру найденную ошибку.
- Распределяют роли: разработчик, проверяющий, консультант.
Подготовка учителя к уроку
- Подготовить 15 компьютеров с текстовым редактором и браузером, проверить возможность сохранения файлов с расширением .html.
- Создать на каждом компьютере папку «HTML_9 класс» или подготовить инструкцию по созданию личной папки.
- Распечатать карточки с правильным и ошибочными фрагментами HTML-кода — по одной на пару.
- Распечатать чек-лист практической работы — по одному на каждого ученика.
- Подготовить презентацию с изображением структуры HTML-документа и примерами отображения кода в браузере.
- Вывести на доску или слайд памятку: «тег — элемент — атрибут — значение атрибута».
- Подготовить файл-заготовку с пустым HTML-каркасом для учеников, которым требуется поддержка.
- Подготовить три варианта практической карточки: минимальный, базовый и повышенный.
- Проверить, что для демонстрации доступен локальный пример готовой страницы без использования внешних ссылок.
- Подготовить таймер на 6 минут для самостоятельной практической работы.
Ход урока
Этап 1. Организационный момент и мотивация (3 мин)
Цель этапа: включить учащихся в работу и показать практическую ценность HTML.
Время | Действие учителя | Действие учеников |
|---|---|---|
1 мин | Учитель приветствует класс и проверяет готовность: "Здравствуйте, ребята. Сегодня мы не просто познакомимся с новым языком, а создадим собственную web-страницу. Проверьте, что перед вами тетрадь, ручка и компьютер, а на экране открыт рабочий стол. Сегодня каждый получит готовый результат, который можно открыть в браузере." | Проверяют оборудование, открывают тетради, садятся за рабочие места. |
2 мин | Учитель показывает на экране небольшую страницу и спрашивает: "Как вы думаете, что превращает обычный текст в страницу сайта? Можно ли создать такую страницу без сложного графического редактора? Где подобное умение может пригодиться и почему базовые задания ОГЭ не требуют страха перед кодом?" | Рассматривают пример, выдвигают предположения: "Нужен специальный язык", "структура и команды", "HTML используется на сайтах". Формулируют практическую ценность темы. |
Завершение этапа: учитель подводит итог: "Сегодня мы проверим на практике, как несколько понятных команд превращаются в страницу. Будем действовать спокойно и последовательно: код написали — результат проверили — ошибку исправили."
Этап 2. Актуализация знаний (5 мин)
Цель этапа: актуализировать знания о файлах, расширениях, алгоритмах и знаковых системах.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель проводит приём «Подумай — обсуди в паре — поделись»: "Сначала за 30 секунд самостоятельно ответьте, чем текстовый документ отличается от программы и почему расширение файла важно. Затем обсудите ответ с соседом. После этого две пары поделятся формулировками." | Записывают по одному предположению, обсуждают его в парах, формулируют ответы: "Расширение помогает системе понять тип файла", "браузер обрабатывает HTML по своим правилам". |
3 мин | Учитель показывает карточку с фрагментами «текст», «команда», «файл», «браузер» и спрашивает: "Как выстроить последовательность действий, чтобы увидеть результат на экране? Что произойдёт, если сохранить файл не с тем расширением?" Учитель фиксирует алгоритм на доске. | Располагают действия в последовательности: создать файл — записать данные — сохранить — открыть в браузере — проверить. Объясняют, что неверное расширение может привести к открытию файла как обычного текста. |
Завершение этапа: учитель подводит итог: "Мы вспомнили, что компьютер выполняет действия по правилам, а файл должен иметь подходящий формат. Теперь выясним, какие правила задаёт HTML и из каких частей состоит web-документ."
Этап 3. Постановка проблемы и целеполагание (4 мин)
Цель этапа: выявить затруднение и сформулировать цель практической работы.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель выводит на экран строку: "Моя страница Новости Ссылки" и тот же материал в виде структурированной страницы. Реплика: "Перед нами одинаковая информация, но отображается она по-разному. Почему браузер понимает, где заголовок, где абзац, а где список? Чего не хватает первому варианту?" | Сравнивают два изображения и отвечают: "Не хватает разметки", "нужно указать назначение частей", "браузеру нужны специальные обозначения". |
2 мин | Учитель организует приём «Снежный ком»: "Сформулируйте цель сначала индивидуально, затем объединитесь в пары и выберите общую формулировку. Цель должна начинаться с глагола и описывать конечный результат." | Формулируют цель: "Создать HTML-страницу с заголовком, текстом, списком и ссылкой". Записывают тему и цель в тетрадь. |
Завершение этапа: учитель подводит итог: "Затруднение найдено: мы пока не умеем сообщать браузеру структуру текста. Наша цель — освоить основные теги и применить их в собственной странице."
Посмотрите план целиком
Зарегистрируйтесь — и откройте план урока по этой теме полностью: цели, ход урока и рефлексия по ФГОС.
Этап 4. Открытие нового знания (10 мин)
Цель этапа: открыть назначение базовых HTML-тегов и структуру документа через анализ примера.
Время | Действие учителя | Действие учеников |
|---|---|---|
3 мин | Учитель показывает на экране код: "Моя страница Мой проект Это первая web-страница. " и говорит: "Рассмотрим код как каркас. Тег обычно записывается в угловых скобках. Парный тег имеет открывающую и закрывающую части. Найдите границы html, head, body и объясните, что находится внутри каждой области." | Выделяют цветом в распечатке или тетради парные теги, отвечают: "html содержит весь документ", "head содержит служебную информацию", "body содержит видимое содержимое", "h1 задаёт крупный заголовок", "p задаёт абзац". |
3 мин | Учитель демонстрирует приём «Шпаргалка-напоминание»: "Запишите в таблицу: тег, назначение, пример. Тег создаёт основной заголовок, — абзац,
| Заполняют таблицу в тетради, составляют схему: html → head и body; body → h1, p, ul. |
2 мин | Учитель показывает код ссылки: "Полезный ресурс" и поясняет: "Здесь href — атрибут, а его значение задаёт адрес перехода. Текст между тегами становится видимой ссылкой. Не путайте имя атрибута и его значение." | Находят тег a, атрибут href, адрес и видимый текст. Объясняют назначение каждого фрагмента. |
2 мин | Учитель предлагает мини-проверку в формате ОГЭ: "Определите, какой тег отвечает за абзац, какой фрагмент создаёт список и где допущена ошибка:
| Отвечают: "За абзац отвечает ", "список создают
|
Запись в тетрадях
HTML — язык разметки гипертекста. Тег задаёт назначение элемента страницы. Парный тег состоит из открывающего и закрывающего тегов. Атрибут уточняет свойства элемента. Основное содержимое страницы располагается внутри .
Завершение этапа: учитель подводит итог: "Мы открыли принцип HTML: браузер читает структуру, заданную тегами. Теперь применим это знание и соберём страницу по алгоритму, а затем проверим её в браузере."
Этап 5. Первичное закрепление по образцу (6 мин)
Цель этапа: отработать создание базового каркаса HTML-документа с проговариванием действий.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель открывает текстовый редактор и проговаривает алгоритм: "Создаём новый текстовый файл. Вводим каркас документа. Сохраняем его с именем index.html, выбирая тип «Все файлы», если редактор предлагает тип файла. Затем открываем файл браузером. Не торопимся: сначала проверяем парные теги." | Повторяют алгоритм в тетради, создают файл index.html в рабочей папке. |
4 мин | Учитель демонстрирует код на экране и комментирует каждую строку: "В body добавим заголовок, абзац и список. Используйте такой фрагмент: Моя первая страница Я изучаю создание web-страниц.
| Вводят код, сохраняют файл, открывают его браузером, проверяют наличие заголовка, абзаца и трёх пунктов списка. Сообщают партнёру результат: "Заголовок отображается крупнее, список имеет маркеры". |
Эталон решения
1. Создать файл с расширением .html. 2. Ввести обязательные области , , . 3. Внутри разместить
,
,
,
- и парные
- . 4. Сохранить файл и открыть его в браузере. 5. Если элемент не отображается, проверить закрывающий тег и сохранение файла.
Завершение этапа: учитель подводит итог: "Образец страницы уже работает. Теперь каждый создаст собственный вариант, а проверяющий в паре поможет заметить типичные ошибки до итоговой проверки."
Этап 6. Самостоятельная практическая работа с взаимопроверкой (10 мин)
Цель этапа: самостоятельно создать web-страницу и проверить её по критериям.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель раздаёт карточки трёх уровней и объясняет выбор: "Обязательный минимум выполняют все: заголовок, абзац и список. Базовый уровень добавляет ссылку. Повышенный уровень включает второй заголовок и отдельный список интересов. Выберите уровень, который позволит вам уверенно показать результат, а затем при наличии времени переходите выше." | Выбирают уровень, записывают название своей страницы: «Моё хобби», «Мой будущий проект» или «Информационная страница». |
6 мин | Учитель напоминает: "Работаем по алгоритму и используем таймер. Я проверяю не красоту оформления, а структуру и корректность тегов. Если возникла ошибка, сначала проверьте парность тегов, затем сохранение файла и только после этого обращайтесь за помощью." Учитель консультирует, задавая вопросы, а не исправляя код за ученика. | Создают собственную страницу. Минимум: , ,
|
2 мин | Учитель организует взаимопроверку по чек-листу: "Поменяйтесь местами с партнёром. Проверьте пять пунктов: файл открывается, заголовок есть, абзац есть, список отображается, ссылка содержит href. Запишите партнёру две сильные стороны и одно пожелание." | Открывают файл партнёра в браузере, отмечают пункты чек-листа, находят одну возможную ошибку и формулируют рекомендацию. |
Эталон решения
Минимальный рабочий фрагмент: Моя страница
Моё хобби
Моё хобби
Я изучаю HTML и создаю web-страницы.
- Первый интерес
- Второй интерес
Завершение этапа: учитель подводит итог: "Вы прошли полный цикл разработки: написали код, получили результат и выполнили проверку. Сейчас разберём, какие ошибки встречаются чаще всего и как быстро обнаружить их самостоятельно."
Этап 7. Анализ ошибок и включение в систему знаний (4 мин)
Цель этапа: закрепить алгоритм поиска ошибок и связать практику с типичными заданиями ОГЭ.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель показывает три ошибочных фрагмента: " Заголовок ", "Сайт", "
| Находят ошибки: повторён открывающий тег вместо закрывающего, отсутствует href, не закрыт li. Формулируют правило: "Сначала проверяем парность тегов, затем атрибуты и вложенность". |
2 мин | Учитель предлагает вопрос в формате ОГЭ: "Если в коде отсутствует закрывающий тег , что может произойти с отображением последующего текста? Почему браузер иногда всё равно показывает страницу?" | Обсуждают в парах, отвечают: "Границы элемента определяются неверно", "браузер старается восстановить структуру, но результат может отличаться от ожидаемого". |
Завершение этапа: учитель подводит итог: "Сегодня мы не только создали страницу, но и научились читать код как алгоритм. Умение увидеть лишний, пропущенный или неправильно закрытый элемент пригодится и в практической работе, и при решении заданий ОГЭ."
Этап 8. Рефлексия и домашнее задание (3 мин)
Цель этапа: оценить достижение цели, зафиксировать затруднения и определить дальнейшую практику.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель раздаёт стикеры для приёма «Билет на выход»: "Закончите три фразы: «HTML нужен для...», «Сегодня я научился...», «При проверке кода сначала нужно...». На обратной стороне поставьте цвет светофора: зелёный — могу создать страницу сам, жёлтый — нужна небольшая подсказка, красный — требуется повторное объяснение." | Заполняют билет на выход, оценивают собственную готовность, прикрепляют стикер к соответствующей зоне доски. |
1 мин | Учитель сообщает домашнее задание: "Выберите уровень по таблице. Не переписывайте код механически: объясните назначение каждого использованного тега. На следующем уроке мы добавим оформление и новые элементы страницы." | Записывают домашнее задание, задают уточняющие вопросы, сохраняют рабочий файл в своей папке. |
Завершение этапа: учитель подводит итог: "Сегодня каждый из вас сделал первый шаг к созданию собственного сайта. Если страница получилась не сразу, это нормальная часть программирования: ошибка показывает, что именно нужно проверить. На следующем уроке мы научимся изменять оформление страницы и управлять её внешним видом."
Критерии оценивания практической работы
- «5» — создан и сохранён HTML-файл, корректно отображаются заголовок, абзац и маркированный список; для базового или повышенного уровня правильно оформлена гиперссылка или дополнительный список; ученик может объяснить назначение основных тегов.
- «4» — страница открывается, обязательные элементы созданы, но допущена одна несущественная ошибка в структуре, оформлении или атрибуте, которую ученик исправляет после подсказки.
- «3» — создан файл и отображается хотя бы часть обязательной структуры, но отсутствует один из основных элементов или допущены две и более ошибки в парности тегов; ученик понимает общий принцип после разбора.
- Ниже «3» — файл не сохранён в формате .html или ученик не может воспроизвести каркас страницы даже с опорой на памятку.
Рефлексия
Вопрос для ученика | Цель вопроса |
|---|---|
Что нового вы узнали о назначении HTML-тегов? | Проверка осознания основных понятий и предметного результата. |
Какой элемент страницы вы создали самостоятельно? | Выявление степени самостоятельности и практического результата. |
Какую ошибку в коде вы теперь сможете найти быстрее всего? | Диагностика сформированности навыка отладки. |
Что вызвало затруднение: структура документа, сохранение файла или проверка в браузере? | Выявление точек затруднения для коррекции на следующем уроке. |
Завершающее слово учителя
"Сегодня мы увидели, что web-страница начинается не с готового дизайна, а с точной структуры. Вы научились использовать основные теги, сохранять HTML-файл и проверять результат в браузере. Типичная ошибка — забыть закрывающий тег или перепутать адрес ссылки, поэтому всегда выполняйте проверку по алгоритму. На следующем уроке мы продолжим работу и узнаем, как изменять оформление страницы."
Домашнее задание
Уровень | Что задать | Зачем |
|---|---|---|
Базовый (обязательный) | Создать HTML-страницу «Моё увлечение» с каркасом html, head, title, body, одним заголовком, одним абзацем и маркированным списком из 3–4 пунктов. | Закрепляет структуру документа и применение тегов h1, p, ul, li; при проверке смотреть на парность тегов и корректное сохранение файла. |
Средний (повышающий) | Добавить к странице одну гиперссылку с атрибутом href, второй заголовок и второй абзац; проверить страницу в браузере и исправить найденные ошибки. | Закрепляет использование атрибутов и вложение нескольких элементов в body; при проверке смотреть на наличие адреса и видимого текста ссылки. |
Продвинутый (дополнительный) | Создать мини-сайт из двух HTML-файлов: главной страницы и страницы «О проекте», связав их гиперссылками; на каждой странице разместить заголовок, абзац и список. | Развивает самостоятельное проектирование и понимание гипертекстовой связи; при проверке смотреть на правильность имён файлов и адресов перехода. |
Контрольные вопросы перед выходом из класса: «Что такое HTML? Для чего нужен тег ? Чем тег отличается от атрибута? Какие теги создают маркированный список? Что нужно проверить, если ссылка или элемент страницы не отображается?»
