Создание комплексного информационного объекта в виде веб-страницы
Цели и задачи
- Цель по SMART: к концу урока каждый ученик создаст в конструкторе базовую веб-страницу по шаблону, разместит на ней заголовок, текстовый блок, графический объект и гиперссылку, проверит корректность отображения и сохранит результат.
- Научиться выбирать подходящий шаблон веб-страницы, редактировать его структуру и наполнять содержательным текстом.
- Освоить добавление, изменение размера и перемещение графического объекта с учётом его соответствия теме страницы.
- Развивать навыки планирования, пошагового выполнения практической работы и проверки результата по критериям.
- Формировать ответственное отношение к публикации информации в сети и снижать тревожность перед практическими заданиями формата ОГЭ за счёт работы по понятному алгоритму.
Планируемые результаты
Личностные
- Осознавать значение цифровых навыков для учебной и будущей профессиональной деятельности.
- Проявлять ответственное отношение к содержанию и внешнему виду публикуемой веб-страницы.
- Развивать уверенность в выполнении практических заданий по информатике по заданному алгоритму.
- Понимать, что качество цифрового продукта определяется не только оформлением, но и точностью, понятностью и уместностью информации.
Метапредметные
- Планировать последовательность создания веб-страницы и распределять время между этапами практической работы.
- Извлекать нужные сведения из инструкции интерфейса и использовать их для достижения результата.
- Сравнивать готовую страницу с критериями, находить недочёты и исправлять их.
- Осуществлять смысловое чтение задания, выделяя обязательные элементы информационного объекта.
Предметные
- Знать назначение конструктора и шаблона веб-страницы.
- Уметь создавать страницу на основе готового шаблона и изменять его содержимое.
- Уметь добавлять текстовый и графический блоки, изменять их размеры и положение.
- Уметь создавать гиперссылку, проверять предварительный просмотр и сохранять результат.
- Владеть базовым алгоритмом создания комплексного информационного объекта в виде веб-страницы.
Универсальные учебные действия (УУД)
Личностные УУД
- Определяют личную учебную цель: создать работающую и понятную веб-страницу.
- Осознают связь изучаемого умения с профессиями в сфере информационных технологий, дизайна и медиа.
- Соблюдают правила корректного использования изображений и уважительного представления информации.
- Оценивают собственную готовность выполнять практические задания самостоятельно.
Регулятивные УУД
- Принимают учебную задачу и формулируют ожидаемый результат практической работы.
- Планируют действия по алгоритму: шаблон — текст — изображение — ссылка — проверка — сохранение.
- Контролируют выполнение обязательных элементов по чек-листу.
- Находят ошибку в оформлении и самостоятельно корректируют страницу.
- Оценивают результат по заданным критериям и фиксируют, что удалось выполнить.
Познавательные УУД
- Выделяют из задания обязательные элементы веб-страницы.
- Сравнивают назначение текстового, графического и ссылочного блоков.
- Устанавливают соответствие между содержанием страницы и выбранным изображением.
- Моделируют структуру веб-страницы в виде последовательности информационных блоков.
- Используют экранный предварительный просмотр для анализа готового объекта.
Коммуникативные УУД
- Обсуждают в паре, какие элементы должны быть обязательными на веб-странице.
- Формулируют вопросы по работе с интерфейсом конструктора.
- Предоставляют однокласснику корректную обратную связь по чек-листу.
- Аргументируют выбор изображения и его соответствие теме страницы.
Подготовка учителя к уроку
- Подготовить компьютеры с доступом к выбранному конструктору веб-страниц или установить локальный редактор шаблонов; проверить вход в сервис и сохранение результата.
- Создать демонстрационный проект «Цифровая безопасность школьника» с заголовком, текстом, изображением и гиперссылкой.
- Подготовить резервную папку с двумя-тремя безопасными изображениями, доступными для учебного использования.
- Распечатать практическое задание и чек-лист оценивания — по одному комплекту на каждого ученика.
- Распечатать рабочие листы в двух вариантах — по одному варианту на каждого ученика.
- Вывести на доску или экран алгоритм: выбрать шаблон, изменить заголовок, добавить текст, вставить изображение, добавить ссылку, проверить, сохранить.
- Подготовить памятку с правилами: не публиковать персональные данные, проверять источник изображения, не использовать изображения с нарушением авторских прав.
- Проверить проектор, демонстрационный компьютер, подключение к сети и возможность открыть предварительный просмотр страницы.
- Подготовить таймер на 12 минут для самостоятельной практической работы и 3 минуты для взаимопроверки.
Ход урока
Этап 1. Организационный момент и мотивация (3 мин)
Цель этапа: включить учащихся в практическую деятельность и показать прикладное значение создания веб-страниц.
Время | Действие учителя | Действие учеников |
|---|---|---|
1 мин | Учитель приветствует класс и проверяет готовность компьютеров: "Здравствуйте, ребята. Сегодня мы будем создавать не отдельную картинку и не просто текстовый документ, а комплексный информационный объект — веб-страницу. Проверьте, что перед вами компьютер, тетрадь и ручка, а на экране открыт нужный конструктор. Работу начинаем только после моего сигнала." | Проверяют рабочее место, включают компьютер, открывают предложенный конструктор и не начинают работу без инструкции. |
2 мин | Учитель показывает готовую страницу: "Посмотрите на экран. Здесь есть заголовок, короткий текст, изображение и ссылка. Как вы думаете, почему это именно комплексный объект? Что изменится, если убрать изображение или ссылку? Такие элементы встречаются в сайтах, электронных портфолио и информационных проектах. Сегодня каждый из вас создаст собственную небольшую страницу." | Рассматривают демонстрационную страницу, называют элементы: "заголовок", "текст", "изображение", "ссылка"; формулируют предположение: "без одного элемента страница будет менее информативной". |
Завершение этапа: учитель подводит итог: "Мы увидели, что веб-страница объединяет разные виды информации. Сейчас вспомним, как отличить обязательные элементы хорошего информационного объекта и как подготовить их к созданию."
Этап 2. Актуализация знаний и инструктаж по безопасности (5 мин)
Цель этапа: актуализировать представления о структуре веб-страницы и правилах безопасной работы в сети.
Время | Действие учителя | Действие учеников |
|---|---|---|
3 мин | Учитель организует приём "Подумай — обсуди в паре — поделись": "За 30 секунд самостоятельно назовите элементы, которые могут входить в веб-страницу. Затем обсудите с соседом, какие из них обязательны для сегодняшней работы. После этого две-три пары предложат свой список. Я зафиксирую его на доске." | Сначала записывают индивидуальный список, затем обсуждают его в парах и предлагают варианты: "заголовок, текст, изображение, ссылка". |
2 мин | Учитель показывает памятку: "Перед началом практики вспомним правила. Не вводим фамилию, адрес, номер телефона и другие персональные данные. Изображение должно соответствовать теме и быть безопасным для использования. Если вы открываете ссылку, сначала проверяете её адрес. При непонятном действии не нажимаете случайные кнопки, а поднимаете руку." | Формулируют два правила безопасной работы, записывают в тетрадь краткую пометку: "Не публиковать персональные данные; проверять содержание и источник изображения". |
Завершение этапа: учитель подводит итог: "Мы определили состав страницы и правила безопасной работы. Теперь выясним, что именно должно быть готово к концу урока и по каким признакам мы поймём, что работа выполнена."
Этап 3. Постановка практической задачи и критериев успеха (4 мин)
Цель этапа: сформулировать конкретный результат практической работы и критерии его достижения.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель раздаёт карточку практической работы: "Прочитайте задание. На основе готового шаблона создайте страницу на тему «Полезный цифровой навык». На странице должны быть заголовок, текст из двух-трёх предложений, одно тематическое изображение и гиперссылка на надёжный образовательный ресурс. Содержание должно быть понятным ученику вашего возраста." | Читают условие, подчёркивают обязательные элементы и формулируют результат: "К концу работы у меня будет сохранённая веб-страница с четырьмя элементами". |
2 мин | Учитель показывает чек-лист: "Работа считается выполненной, если выбран шаблон, заголовок отражает тему, текст содержит два-три осмысленных предложения, изображение соответствует теме, ссылка открывается или имеет корректный адрес, а страница сохранена. Это не соревнование по скорости. Важнее выполнить все пункты и проверить результат." | Сверяют условие с чек-листом, задают уточняющие вопросы, выбирают тему навыка: создание надёжного пароля, поиск информации, резервное копирование или цифровая гигиена. |
Завершение этапа: учитель подводит итог: "Задача понятна: создать страницу и проверить её по чек-листу. Сначала я покажу последовательность действий, а затем вы повторите её самостоятельно на своих компьютерах."
Посмотрите план целиком
Зарегистрируйтесь — и откройте план урока по этой теме полностью: цели, ход урока и рефлексия по ФГОС.
Этап 4. Демонстрация алгоритма создания страницы (7 мин)
Цель этапа: показать безопасный и последовательный способ создания веб-страницы на основе шаблона.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель демонстрирует первый шаг: "На экране открыт конструктор. Я выбираю простой информационный шаблон, потому что в нём уже есть место для заголовка, текста и изображения. Не выбирайте шаблон только по яркому цвету: сначала проверьте, удобно ли читать информацию. После выбора открывается рабочая область страницы." | Наблюдают за демонстрацией, находят в своём интерфейсе кнопку выбора шаблона, не изменяют проект до окончания объяснения. |
2 мин | Учитель показывает редактирование текста: "Щёлкаю по заголовку и заменяю его на «Как создать надёжный пароль». Затем открываю текстовый блок и вводжу два предложения: «Надёжный пароль содержит разные типы символов и не связан с личными данными. Для разных сервисов следует использовать разные пароли». Обратите внимание: текст должен сообщать мысль, а не состоять из случайных слов." | Наблюдают, выделяют заголовок и текстовый блок, называют правило: "заголовок должен отражать содержание, а текст — объяснять тему". |
2 мин | Учитель добавляет графический объект: "Теперь выбираю команду добавления изображения. Можно использовать подготовленный файл или безопасное изображение из библиотеки конструктора. После вставки проверяю размер и положение: изображение не должно закрывать текст. Если есть поле описания, записываю краткую подпись, например «Пример надёжного пароля»." | Фиксируют последовательность действий: выбрать изображение, вставить, изменить размер, проверить положение и подпись. |
1 мин | Учитель показывает ссылку и сохранение: "Выделяю слова «Памятка по цифровой безопасности», выбираю команду ссылки и вставляю адрес проверенного образовательного ресурса. Затем открываю предварительный просмотр. Проверяю заголовок, текст, изображение и ссылку, после чего сохраняю проект с понятным именем. Именно такой порядок помогает не пропустить обязательный элемент." | Называют последовательность алгоритма, задают вопросы о расположении команд, записывают ключевые шаги в тетрадь. |
Запись в тетрадях
Алгоритм: 1) выбрать шаблон; 2) изменить заголовок; 3) добавить связный текст; 4) вставить и настроить изображение; 5) добавить гиперссылку; 6) открыть предварительный просмотр; 7) проверить и сохранить страницу.
Завершение этапа: учитель подводит итог: "Алгоритм состоит из семи последовательных действий. Во время практики держите его перед глазами и отмечайте выполненные пункты. Теперь вы переходите к созданию собственной страницы, а я буду помогать только там, где действительно возникнет затруднение."
Этап 5. Практическая работа базового уровня (12 мин)
Цель этапа: создать комплексную веб-страницу по шаблону, используя текстовый, графический и ссылочный блоки.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель раздаёт карточки практической работы: "Откройте карточку и выберите одну тему: «Надёжный пароль», «Поиск информации» или «Цифровая гигиена». Выберите шаблон с понятной структурой. Сначала создайте заголовок и не переходите к изображению, пока заголовок не будет связан с выбранной темой." | Выбирают тему, открывают новый проект, выбирают шаблон и вводят заголовок. |
4 мин | Учитель контролирует работу и напоминает: "Теперь добавьте текст из двух-трёх предложений. В первом предложении назовите главное правило или понятие, во втором объясните его значение, при необходимости добавьте пример. Не копируйте длинный текст: страница должна быть краткой и понятной. Если не знаете, что написать, используйте вопрос: «Что должен уметь школьник по этой теме?»." | Составляют и вводят связный текст, перечитывают его, исправляют пропуски и лишние слова. |
3 мин | Учитель обращается к классу: "Добавьте одно тематическое изображение. Проверьте, не искажено ли оно при изменении размера и не перекрывает ли текст. Подпись должна объяснять, что изображено. Если изображение не найдено, используйте один из подготовленных файлов." | Вставляют изображение, изменяют его размер, размещают рядом с текстом и добавляют подпись при наличии такой возможности. |
2 мин | Учитель даёт инструкцию: "Добавьте гиперссылку на надёжный образовательный ресурс. Не вставляйте случайный адрес из поисковой выдачи. После добавления ссылки откройте предварительный просмотр и проверьте, что все элементы видны, а текст читается." | Добавляют ссылку, открывают предварительный просмотр, проверяют расположение элементов и исправляют обнаруженные ошибки. |
1 мин | Учитель напоминает: "Сохраните проект под именем «Фамилия_ЦифровойНавык» или другим условным именем, если конструктор не требует фамилии. Поставьте отметку в чек-листе напротив каждого выполненного пункта и поднимите руку, если нужна помощь." | Сохраняют проект, отмечают выполненные пункты чек-листа, формулируют вопрос при затруднении. |
Эталон выполнения
Минимально успешная страница содержит: заголовок по выбранной теме; связный текст из двух-трёх предложений; одно тематическое изображение, не перекрывающее текст; гиперссылку с понятным названием; сохранённый проект, открывающийся в предварительном просмотре.
Завершение этапа: учитель подводит итог: "Основная часть страницы создана. Теперь важно не просто считать работу законченной, а проверить её как настоящий автор сайта. Проведём короткую взаимопроверку по критериям и найдём один пункт, который можно улучшить."
Этап 6. Проверка и взаимное оценивание (6 мин)
Цель этапа: проверить соответствие страницы заданию и выполнить коррекцию результата.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель объясняет приём "Две звезды и пожелание": "Объединитесь в пары и покажите соседу предварительный просмотр страницы. По чек-листу найдите две сильные стороны: например, понятный заголовок и удачное изображение. Затем назовите одно конкретное пожелание: сократить текст, изменить размер картинки, уточнить подпись или проверить ссылку." | В парах открывают страницы, сверяют их с пятью пунктами чек-листа, называют автору две сильные стороны и одно конкретное улучшение. |
3 мин | Учитель задаёт вопросы для самопроверки: "Есть ли на странице все обязательные элементы? Соответствует ли изображение теме? Можно ли понять содержание, не объясняя его устно? Не содержит ли страница персональных данных? Открывается ли ссылка? Исправьте один найденный недочёт сейчас." | Проверяют страницу, исправляют минимум один недочёт, повторно открывают предварительный просмотр и сохраняют изменения. |
1 мин | Учитель проводит быстрый приём "Светофор": "Покажите зелёную карточку, если все пункты выполнены, жёлтую — если остался один вопрос, красную — если нужна помощь. Это не оценка личности, а сигнал, какая поддержка вам нужна." | Показывают карточку, называют конкретное затруднение или подтверждают: "Все пункты выполнены". |
Завершение этапа: учитель подводит итог: "Мы проверили страницу глазами автора и пользователя. Вы увидели, что исправление одного небольшого элемента делает информационный объект понятнее. Осталось зафиксировать результат и проверить, чему научились."
Этап 7. Рефлексия и домашнее задание (8 мин)
Цель этапа: обобщить алгоритм создания веб-страницы, оценить результат и закрепить практический навык.
Время | Действие учителя | Действие учеников |
|---|---|---|
3 мин | Учитель раздаёт рабочий лист: "Выполните одно задание своего варианта. В нём нужно восстановить алгоритм и объяснить назначение элементов веб-страницы. Работайте самостоятельно, затем сверим ответы." | Выполняют задание рабочего листа, восстанавливают последовательность действий и соотносят элементы с их назначением. |
2 мин | Учитель организует устную проверку: "Назовите первый и последний шаг алгоритма. Почему нельзя сразу вставлять случайное изображение? Зачем нужен предварительный просмотр?" | Отвечают: "Сначала выбираем шаблон, в конце сохраняем проверенный проект"; "изображение должно соответствовать теме"; "предварительный просмотр помогает найти ошибки отображения". |
3 мин | Учитель проводит рефлексию: "Закончите три фразы: «Сегодня я научился…», «Самым сложным было…», «Чтобы улучшить страницу, я…». В конце оцените себя по чек-листу: все пункты, большая часть пунктов или нужна помощь." | Заполняют рефлексивные фразы и самооценку, сдают рабочий лист или показывают его учителю. |
Завершение этапа: учитель подводит итог: "Сегодня вы создали комплексный информационный объект и проверили его по критериям. Вы работали с теми же умениями, которые важны при выполнении практических заданий: внимательно читать условие, соблюдать последовательность действий и проверять результат. На следующем уроке мы рассмотрим более сложное оформление и способы улучшения структуры веб-страницы."
Критерии оценивания практической работы
- "5" — создана и сохранена веб-страница с корректным шаблоном, содержательным заголовком, связным текстом из двух-трёх предложений, тематическим изображением и работающей или корректно указанной гиперссылкой; ученик самостоятельно выполнил проверку и исправил недочёт.
- "4" — выполнены все основные элементы задания, но допущена одна неточность в оформлении, размере изображения, подписи или размещении ссылки; после подсказки учителя ошибка исправлена.
- "3" — создана страница с заголовком, текстом и изображением, но отсутствует гиперссылка либо нарушена структура; сохранение и проверка выполнены частично, ученик нуждался в существенной помощи.
- Ниже базового уровня — страница не сохранена или отсутствуют два и более обязательных элемента; работу необходимо завершить с учителем на следующем занятии.
Рефлексия
Вопрос для ученика | Цель вопроса |
|---|---|
Какие обязательные элементы должны быть на комплексной веб-странице? | Проверка понимания структуры информационного объекта. |
Какой шаг алгоритма помог вам избежать ошибки? | Выявление осознанности последовательности действий и регулятивных умений. |
Что оказалось самым сложным: текст, изображение, ссылка или сохранение? | Выявление точек затруднения в практическом навыке. |
Что вы улучшили после взаимопроверки? | Фиксация опыта самоконтроля, коррекции и конструктивной обратной связи. |
Завершающее слово учителя
"Сегодня вы создали веб-страницу, объединив текст, изображение и ссылку в один информационный объект. Важно помнить типичную ошибку: красивый шаблон сам по себе не делает страницу качественной, если содержание непонятно или элементы не соответствуют теме. При выполнении практических заданий ОГЭ особенно полезно читать условие по шагам и проверять каждый обязательный пункт. На следующем уроке мы научимся улучшать структуру и оформление веб-страницы."
Домашнее задание
Уровень | Что задать | Зачем |
|---|---|---|
Базовый (обязательный) | Составить на бумаге или в текстовом редакторе структуру веб-страницы на тему «Безопасное поведение в интернете»: заголовок, три коротких предложения, описание подходящего изображения и название гиперссылки. | Закрепляет структуру комплексного информационного объекта; при проверке обратить внимание на соответствие текста, изображения и ссылки одной теме. |
Средний (повышающий) | Создать или доработать страницу по теме урока, добавив второй текстовый блок или список из трёх правил цифровой безопасности; проверить читаемость и расположение элементов. | Развивает умение расширять шаблон и структурировать информацию; при проверке смотреть на логичность блоков и отсутствие перегруженности. |
Продвинутый (дополнительный) | Разработать план мини-сайта из двух взаимосвязанных страниц: главной и страницы с подробными рекомендациями; указать заголовки, содержание, изображения и ссылки для каждой страницы. | Формирует навыки проектирования информационной структуры; при проверке оценить последовательность переходов и соответствие элементов целям страниц. |
Контрольные вопросы перед выходом: «Какие четыре элемента были обязательными на странице?», «Зачем нужен шаблон?», «Почему изображение должно соответствовать теме?», «Какой шаг выполняется перед сохранением проекта?», «Какие данные нельзя публиковать на учебной веб-странице?»
Рабочий лист по теме. Вариант 1
Задание 1. Восстановите алгоритм
Расположите действия в правильной последовательности, пронумеровав их от 1 до 7: добавить гиперссылку; выбрать шаблон; сохранить проект; вставить изображение; открыть предварительный просмотр; изменить заголовок; добавить связный текст. Затем запишите, зачем нужен предварительный просмотр.
Рабочий лист по теме. Вариант 2
Задание 1. Проверьте проект
Представьте, что на веб-странице есть заголовок «Интернет», текст из двух предложений, изображение автомобиля и ссылка на развлекательный сайт. Укажите два несоответствия заданию «Цифровая безопасность школьника» и предложите исправления. Затем перечислите четыре обязательных элемента, которые нужно проверить перед сохранением страницы.
