Создание веб-сайта (код в Блокноте)

Автор: Галкина Инна Владимировна

Организация: МБОУ Школа №16

Населенный пункт: Нижегородская область, г. Саров

Урок: Создание веб-сайта (код в Блокноте)

Предмет: Информатика

Класс: 11 класс (углубленный уровень)

Номер урока: № 91 в рабочей программе

Тип урока: урок закрепления знаний и формирования умений и навыков.

Ученики уже знакомы с основными HTML-тегами и структурой составления сайта.

Цель урока:

Развить у учащихся навыки создания простых веб-страниц с использованием HTML и CSS, работая исключительно в текстовых редакторах.

Задачи урока:

  1. Разработка структуры и дизайна веб-сайта.
  2. Написание кода в Блокноте.
  3. Заполнение сайта контентом.
  4. Презентация готового продукта и обсуждение результатов.
  5. Проведение рефлексии и анализа проделанной работы.

Оборудование и материалы:

  1. Компьютеры с установленным Блокнотом (Notepad) или другим простым текстовым редактором.
  2. Браузер для просмотра созданных страниц.
  3. Проектор и экран для демонстрации презентаций.

 

Виды универсальных учебных действий, задействованных на уроке:

Личностные УУД:

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

Целеустремленность и настойчивость. Ученик ставит перед собой цель завершить проект и прилагает усилия для её достижения.

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

Регулятивные УУД:

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

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

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

Познавательные УУД:

Поиск и обработка информации. Учителю следует научить школьников находить нужную информацию для заполнения сайта (текст, фото, видео) и обрабатывать её соответствующим образом.

Моделирование. Создание модели будущего сайта, включая его структуру, дизайн и содержание.

Логические операции. Анализ и синтез информации, сравнение разных вариантов реализации проекта.

Коммуникативные УУД:

Сотрудничество. Работа в группе требует умения слушать друг друга, договариваться и приходить к общему решению.

Презентационные навыки. Навык представления своей работы перед аудиторией, объяснение ключевых моментов и ответов на вопросы.

Обратная связь. Умению давать и получать обратную связь от одноклассников и учителя.

 

 

ХОД УРОКА.

 

Этап 1: Постановка задачи (10 минут)

  1. Введение темы.

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

  1. Выбор темы.

Предлагается тема для создания сайта, например, "Кабинет 245". Учитель объясняет, что сайт должен содержать информацию о кабинете информатики т.п.

  1. Формирование групп.

Класс делится на группы по 3-4 человека. Каждый ученик выбирает направление работы: дизайн, программирование, контент.

Этап 2: Планирование (15 минут)

  1. Определение структуры сайта.

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

  1. Распределение ролей.

Внутри каждой группы определяются ответственные за различные аспекты работы: кто будет заниматься дизайном, кто кодированием, кто наполнением контента.

  1. Инструктаж по использованию Блокнота.

Учитель показывает, как открыть Блокнот, сохранить файл с расширением .html и открыть его в браузере.

Этап 3: Реализация (30 минут)

  1. Работа над проектом.

Ученики приступают к созданию своего сайта. Дизайнеры рисуют макеты страниц, программисты пишут код в Блокноте, контент-менеджеры собирают и оформляют информацию.

  1. Помощь учителя.

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

Этап 4: Презентация (20 минут)

  1. Демонстрация проектов.

Каждая группа представляет свой готовый сайт перед классом. Участники рассказывают о структуре сайта, используемых инструментах и трудностях, с которыми столкнулись.

  1. Обсуждение.

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

Этап 5: Рефлексия (10 минут)

  1. Анализ результатов

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

  1. Оценивание.

Учитель оценивает каждую группу по критериям: оригинальность идеи, качество исполнения, умение работать в команде, презентация проекта.

Шкала оценивания:

Отлично (5): Все критерии выполнены на высоком уровне; проект выделяется оригинальностью, качественным исполнением и презентабельностью.

Хорошо (4): Большинство критериев выполнено хорошо; возможны незначительные недочеты, которые не влияют на общую оценку.

Удовлетворительно (3): Проект выполнен на среднем уровне; имеются заметные недочеты в некоторых аспектах (например, дизайн, функциональность).

Неудовлетворительно (2): Значительное количество недостатков; проект требует серьезной доработки.

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

Задать домашнее задание, связанное с доработкой сайта или созданием новых элементов (например, добавить интерактивные карты или фотогалерею).

 

Примечания:

  • Для упрощения процесса написания кода можно использовать простые шаблоны HTML и CSS, которые ученики могут копировать и изменять под свои нужды.
  • Важно напомнить ученикам сохранять файлы с правильным расширением (.html) и открывать их в браузерах для проверки результата.
  • Если есть возможность, стоит заранее установить на компьютеры расширение для подсветки синтаксиса в Блокноте (например, Notepad++), чтобы облегчить чтение и редактирование кода.

Такой подход позволит ученикам получить базовые навыки работы с HTML и CSS даже без использования специализированных редакторов, что сделает процесс обучения доступным и понятным.

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

Преимущества использования технологии творческих мастерских на уроках информатики:

  • Развитие критического и творческого мышления.
  • Формирование навыков самостоятельного поиска решений.
  • Повышение мотивации к обучению за счет возможности проявить себя.
  • Улучшение коммуникативных навыков благодаря групповой работе.
  • Практическое применение теоретических знаний.

Таким образом, использование технологии творческих мастерских делает уроки информатики более интересными и эффективными, помогая ученикам развивать важные навыки, необходимые в современном мире.

 

Опубликовано: 05.11.2024