Россия, Краснотурьинск
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 14.07.2025 22:55
Лисюкова Юлия Владимровна
Учитель информатики и ИКТ
45 лет
383
115 984 
Местоположение
Специализация
Дополнительная образовательная программа "Космическая верстка"
Категория:
Информатика
24.06.2025 16:07
Учебник:
Информатика. Базовый уровень ООО «БИНОМ. Лаборатория знаний» Босова Л.Л., Босова А.Ю. 10 класс 2019
Просмотр содержимого документа
«Дополнительная образовательная программа "Космическая верстка"»
Раздел 1. ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
Актуальность программы
Сейчас уже вряд ли можно встретить человека, которому неизвестно такое слово, как интернет. Каждый день количество публикаций в социальных сетях растет. Создаются компании, магазины, проекты и соответственно странички и сайты в интернете. Сейчас веб-разработчики, тестировщики, верстальщики - самые востребованные профессии. Но далеко не каждый сможет освоить язык разметки HTML и CSS. Поэтому очень важно ещё в школе овладеть навыками разметки html. Чем раньше, тем больший запас знаний и технологий он получит к моменту выбора основного рода деятельности. Даже если в будущем карьерный путь ребенка не будет связан с веб-разработкой, умение разбираться в сложных системах и взаимодействовать с новыми технологиями ему пригодится в любой сфере. Это же цифровые технологии.
Курсы по овладению языком разметки html помогут ребенку в построении сайтов, в начальных знаниях создания и вёрстки страниц в интернете. Помимо того, что ребёнок изучает язык html, также затрагиваются другие научные области: логика, вычислительная математика, теория вероятности, а также и другие научные области: география, биология, физика, литература - в зависимости от интересов ребенка и выбора области развития собственного проекта.
Когда у ребенка сформирован необходимый набор знаний и умений, выполнен ряд задач и упражнений по разным темам, он может, используя их, работать над собственным проектом. Это позволяет развивать творческие способности, проводить собственные исследования, работать в команде, и, что немаловажно, видеть результат собственной работы, вносить в неё коррективы и развивать её.
Желание воспитать поколение не просто юзеров, а веб-разработчиков, которые подхватят текущие тенденции и смогут существенно развить их, позволило создать курс “Космическая вёрстка”. Это не просто занятия дополнительного образования по информатике, это возможность создания собственных сайтов, разработка проектов, а может определить свою будущую профессию. Обладать знаниями и навыками, необходимыми для ребёнка 21 века.
Каждый выпускник будет иметь по окончании готовый проект, который он сможет показывать друзьям и семье, а может сразу найти заказчика для вёрстки сайта.
Цель реализации программы - формирование у обучающихся компетенции применения знаний языков HTML и CSS для успешного решения практических задач программирования.
Задачи реализации программы:
Обучить верстке web-страниц с использованием технологий HTML и CSS.
Сложить для обучающегося целостное представление о технологической цепочке создания web-сайтов и сформировать понимание актуальных тенденций развития web-технологий.
Научить обучающегося выбирать наиболее подходящий способ для создания web-страниц.
Научить тестировать и проверять код web-страниц.
Организация курса:
Курс состоит из 18 уроков длительностью 90 минут. Также курс можно вести в течении 36 занятий по 45 минут. Каждый урок содержит методический материал для учителя, презентацию, доступную для учеников и преподавателей с теоретическим материалом. Доступ к платформе HTML Academy с теоретическим и практическим материалом языка html. Интерактивные задания в приложениях, таких как Kahoot и Learning Apps. Также подвижные игры на уроках на закрепление знаний, полученных на занятии. Урок продолжительностью 90 минут делится на 2 части по 45 минут с перерывом в 10 минут. 20 минут работа с классом и общий теоретический материал и 25 минут работа за компьютером, также организована работа после перерыва.
Планируемые результаты обучения по модулям:
Практическим результатом работы является два финальных проекта каждого ученика: вёрстка сайта по предложенному макету и вёрстка сайта по собственному макету.
Результаты изучения теоретического материала:
После успешного завершения обучения по программе обучающиеся получат знания в области проектирования и создания сайтов, научатся самостоятельно реализовывать проекты, связанные с версткой динамических сайтов при помощи технологий html и css.
По окончании курса слушатель будет:
знать и уметь применять основы HTML-теги, атрибуты и способы структурирования содержимого web-страниц для создания форматированных документов;
знать и уметь применять основы CSS-значения, списки, цвета, шрифты и другие метрики форматирования;
владеть навыками проверки и отладки кода web-документов;
владеть навыками быстрого и качественного форматирования сложных web-документов;
знать основы HTML и CSS
Основными формами организации программы «Космическая вёрстка» являются практические занятия с использованием онлайн-платформы «HTML Academy», платформы для написания кода «Brackets», прохождение опросов в приложениях Kahoot и Learning Apps, работа с графическим редактором GIMP. Практические занятия с использованием онлайн-платформы «HTML Academy» направлены на отработку базовых навыков языка разметки html и стилей css.
Категория обучающихся: ученики общеобразовательных школ от 12 до 18 лет в рамках дополнительного образования
Форма обучения: очная.
Режим занятий:Курс состоит из 18 уроков длительностью 90 минут. Также курс можно вести в течении 36 занятий по 45 минут. Важно отметить, что урок построен следующим образом - 20 минут работа на компьютере, 25 минут работа без компьютера, перерыв 10 минут и снова 20 минут на компьютер, 25 минут без него.
Срок освоения программы: в течение одного учебного года, в объеме 36 часов.
Раздел 2. Содержание программы
В данном курсе рассматриваются принципы работы сети интернет. Знакомство с языками HTML и CSS и их структурой. Изучение инструментов разработки веб-браузера. Регистрация на платформе HTML Academy и выполнение практической работы. Знакомство со стилями CSS и применение их на практике. Установка и знакомство с программой Gimp. Изучение основных инструментов программы. Знакомство с процедурой размещения сайта в интернете. Знакомство с крупнейшим веб-ресурсом для хостинга GitHub и публикация проекта на этом ресурсе
2.1. Учебный (тематический) план
| № | Название темы | Количество часов |
| 1 | Готовимся к полёту. Как работает интернет?
| 2 |
| 2 | Первый космический код. Работа с HTML | 2 |
| 3 | Знакомство с CSS. Украшаем HTML-код | 2 |
| 4 | Космическое пространство. Флексбоксы | 2 |
| 5 | Космический макет в графическом редакторе | 2 |
| 6 | Конструируем сайт. Готовим разметку | 2 |
| 7 | Конструируем сайт. Блоки и сетка
| 2 |
| 8 | Готовимся к полёту. Создаем сетку проекта | 2 |
| 9 | Готовимся к полёту. Стилизация элементов
| 2 |
| 10 | Последние приготовления перед запуском | 2 |
| 11 | 3-2-1... Поехали! Запуск сайта в интернете | 2 |
| 12 | Презентация космической вёрстки | 2 |
| 13
| Web профессии и где могут пригодится знания, полученные на курсе | 2 |
| 14 | 12 правил UI\UX. Создание лучшего макета для своего сайта | 2 |
| 15 | Верстаем сайт по собственному макету | 2 |
| 16 | Продолжение вёрстки и встраивание медиа и анимаций | 2 |
| 17 | Как сделать красивую презентацию для своего проекта. Доработка и оптимизация | 2 |
| 18 | Защита проекта | 2 |
2.2. Рабочая программа
| № | Название | Виды учебных занятий, учебных работ | Краткое описание |
| 1 | Готовимся к полёту. Как работает интернет?
| Интерактивные занятия | Знакомство с принципами работы сети интернет. Знакомство с языками HTML и CSS и их структурой. |
| Работа за компьютером | Изучение инструментов разработки веб-браузера. Регистрация на платформе HTML Academy и выполнение практической работы
| ||
| 2 | Первый космический код. Работа с HTML | Интерактивные занятия | Знакомство с программой Brackets. Знакомство с основными служебными тегами. |
|
| | Работа за компьютером | Установка программы Brackets. Попытки написать первый код в HTML Практическая работа с кодом и создание Дневника Белки Стрелки и практические задания в HTML Academy |
| 3 | Знакомство с CSS. Украшаем HTML-код | Интерактивные занятия | Знакомство со стилями CSS и применение их на практике. |
|
| | Работа за компьютером | Стилизация Дневника Белки Стрелки со стилями CSS. Знакомство с контейнерами div. Практические упражнения на стилизацию.
|
| 4 | Космическое пространство. Флексбоксы | Интерактивные занятия | Знакомство с флексбоксами и их применение на практике. Интерактивные упражнения в классе и на платформе. |
|
| | Работа за компьютером | продолжение написания кода, применение флексбоксов. Упражнения на закрепление флексбоксов |
| 5 | Космический макет в графическом редакторе | Интерактивные занятия | Изучение основных инструментов программы. Работа с макетом и подготовка этого макета для верстки сайта. |
|
| | Работа за компьютером | Установка и знакомство с программой Gimp. |
| 6 | Конструируем сайт. Готовим разметку | Интерактивные занятия | Повторение изученных ранее тегов, знакомство с новыми базовыми тегами. |
|
| | Работа за компьютером | Верстка сайта по готовому макету.
|
| 7 | Конструируем сайт. Блоки и сетка
| Интерактивные занятия | Знакомство с понятиями “поток” и “блочные модели”. Изучение размеров объектов на странице и величин отступов. Создание сетки на Flexbox. |
|
| | Работа за компьютером | Выполнение практической работы с изменением параметров объектов |
| 8 | Готовимся к полёту. Создаём сетку проекта | Интерактивные занятия | Верстка сетки с макета. Формирование стиля строчных и блочных элементов. |
|
| | Работа за компьютером | Перенос свойства из макета GIMP в код. Продолжение верстки своего сайта с макетом и его стилизация.
|
| 9 | Готовимся к полёту. Стилизация элементов
| Интерактивные занятия | Знакомство с псевдоклассами. Знакомство с добавлением форм и таблиц на страницу и их стилизация. |
|
| | Работа за компьютером | Завершение вёрстки страницы по стилю и наполнению.
|
| 10 | Последние приготовления перед запуском | Интерактивные занятия | Правки в соответствии с подготовленным чек-листом.. Подготовка проекта к публикации. |
|
| | Работа за компьютером | Добавление интерактивных элементов на страницу. Проверка страницы на соответствие и ошибки |
| 11 | 3-2-1... Поехали! Запуск сайта в интернете | Интерактивные занятия | Знакомство с процедурой размещения сайта в интернете. Знакомство с крупнейшим веб-ресурсом для хостинга GitHub. |
|
| | Работа за компьютером | Публикация проекта на GitHub |
| 12 | Презентация космической вёрстки | Интерактивные занятия | Повторение всего, что изучали в рамках курса.. Презентация своих работ. |
|
| | Работа за компьютером | Проведение небольшого турнира по скоростной верстке. Последние изменения макета |
| 13 | Web профессии и где могут пригодится знания, полученные на курсе | Интерактивные занятия | Популярные профессии 21 века и какими навыками надо обладать. Просмотр видео. Область применения полученных знаний на курсе |
|
| | Работа за компьютером | Выполнение упражнений по ТЗ от заказчика |
| 14 | 12 правил UI\UX. Создание лучшего макета для своего сайта | Интерактивные занятия | Чек-лист идеального макета. Обзоры худших и лучших работ веб-верстальщиков |
|
| | Работа за компьютером | Создание собственного макета по правилам хорошего оформления |
| 15 | Верстаем сайт по собственному макету | Интерактивные занятия | Вспомнить основы хорошей вёрстки. Основные требования и правила |
|
| | Работа за компьютером | Вёрстка сайта |
| 16 | Продолжение вёрстки и встраивание медиа и анимаций | Интерактивные занятия | Виды и форматы медиа, которые можно без проблем встраивать на сайт |
|
| | Работа за компьютером | Добавление медиа на сайт |
| 17 | Как сделать красивую презентацию для своего проекта. Доработка и оптимизация | Интерактивные занятия | Основные правила хорошей презентации. Как грамотно представить свой проект не используя при этом сотню слайдов и не нагромождать их информацией |
|
| | Работа за компьютером | Доработка сайта |
| 18 | Защита проекта | | Защита проекта |
2.3.Календарный учебный график (Приложение)
Раздел 3. Формы аттестации и оценочные материалы
Аттестация проводится в форме выполнения индивидуальных и групповых заданий по пройденному материалу. Контроль в указанной форме осуществляется как промежуточный, так и итоговый. Отметочная форма контроля отсутствуют. Оценка производится на основе критериального оценивания. Для уроков с выполнением заданий на онлайн-тренажёре указан необходимый минимум (для каждого задания свой), чтобы тема считалась выполненной. Для уроков с выполнением групповых и индивидуальных проектов предлагается таблица с доступными материалами
По итогам работы над групповыми и индивидуальными проектами проводится обсуждение результатов в коллективе с опорой на чек лист, исправление ошибок и, тем самым, коррекция и закрепление полученных знаний.
Сам проект считается выполненным, когда ученик/ученики сверстали сайт по представленному макету и также сверстали сайт по собственному макету сайта
Кроме того, планируется
Проведение открытых уроков-занятий для педагогов и родителей;
Создание проекта по образцу (24 часа) и создание своего проекта (12 часов) по завершении всего курса
Раздел 4. Организационно-педагогические условия реализации программы
4.1. Литература для педагога
Основная:
- Дакетт Джон HTML и CSS. Разработка и дизайн веб-сайтов. — Эксмо, 2017. Макфарланд Дэвид Сойер Новая большая книга CSS. — Питер, 2018
Дополнительная
- Мейер Эрик А. CSS. Карманный справочник. — Вильямс, 2017.
Купер Нейт Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress. — Манн, Иванов, Фербер, 2019.
Веру Лиа Секреты CSS. Идеальные решения ежедневных задач. — Питер, 2016Литература для обучающихся
Не предусмотрена
Электронные ресурсы
Электронные ресурсы
http://htmlbook.ru/
https://web-standards.ru/
https://css-live.ru/
https://css-tricks.com/
https://alistapart.com/
https://www.smashingmagazine.com
4.2. Материально-технические условия реализации программы
Обязательные
помещение (предпочтительно изолированное);
14 рабочих мест: стол, стул, розетка, колонки;
проектор;
wi-fi (15 Мбит/сек);
магнитно-маркерная доска или флипчарт;
качественное освещение и возможность проветривания;
санузел поблизости от аудитории.
Oпциональные
4G или другая подстраховка для поддержания on-line доступа к системе обучения;
компьютеры на каждое рабочее место*
* Требования к ПК, в случае предоставления их площадкой:
Обязательно: Колонки, Монитор не менее 15" 1366Х768;
Желательно: Наушники
Требования к ПO:
Операционная система Windows 7\ MacOS;
Google Chrome, Gimp, Brackets
| Приложение 1 Календарный учебный график |
| дополнительной общеразвивающей программы |
| «Космическая вёрстка» |
|
|
| 36 часов |
| с ________ по _______ 20__ г. |
| № п/п | Месяц | Число | Форма занятия | Кол-во часов | Тема занятия | ФИО преподавателя |
| 1 |
|
| Интерактивное занятие | 2 | Готовимся к полёту. Как работает интернет?
|
|
| 2 |
|
| Интерактивное занятие | 2 | Первый космический код. Работа с HTML |
|
| 3 |
|
| Интерактивное занятие | 2 | Знакомство с CSS. Украшаем HTML-код |
|
| 4 |
|
| Интерактивное занятие | 2 | Космическое пространство. Флексбоксы |
|
| 5 |
|
| Интерактивное занятие | 2 | Космический макет в графическом редакторе |
|
| 6 |
|
| Интерактивное занятие | 2 | Конструируем сайт. Готовим разметку |
|
| 7 |
|
| Интерактивное занятие | 2 | Конструируем сайт. Блоки и сетка
|
|
| 8 |
|
| Интерактивное занятие | 2 | Готовимся к полёту. Создаём сетку проекта |
|
| 9 |
|
| Интерактивное занятие | 2 | Готовимся к полёту. Стилизация элементов
|
|
| 10 |
|
| Интерактивное занятие | 2 | Последние приготовления перед запуском |
|
| 11 |
|
| Интерактивное занятие | 2 | 3-2-1... Поехали! Запуск сайта в интернете |
|
| 12 |
|
| Интерактивное занятие | 2 | Презентация космической вёрстки |
|
| 13 |
|
| Интерактивное занятие | 2 | Web профессии и где могут пригодится знания, полученные на курсе |
|
| 14 |
|
| Интерактивное занятие | 2 | 12 правил UI\UX. Создание лучшего макета для своего сайта |
|
| 15 |
|
| Интерактивное занятие | 2 | Верстаем сайт по собственному макету |
|
| 16 |
|
| Интерактивное занятие | 2 | Продолжение вёрстки и встраивание медиа и анимаций |
|
| 17 |
|
| Интерактивное занятие | 2 | Как сделать красивую презентацию для своего проекта. Доработка и оптимизация |
|
| 18 |
|
| Интерактивное занятие | 2 | Защита проекта |
|
Приложение 2
Поурочный план по модулям
| дополнительной общеразвивающей программы | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| «Космическая вёрстка» Урок 1:Готовимся к полёту. Как работает интернет?
Урок 2: Первый космический код. Работа с HTML
Урок 3: Знакомство с CSS. Украшаем HTML-код
Урок 4: Космическое пространство. Флексбоксы.
Урок 5: Космический макет в графическом редакторе
|
Урок 6: Конструируем сайт. Готовим разметку.
| № | Этап | Время этапа (мин.) |
| 1 | Игра. Вспомнить основы HTML | 10 мин |
| 2 | Знакомство с тегами HTML 5. Практика в HTML Academy | 15 мин |
| 3 | Принципы хорошей вёрстки. Алгоритм разметки. | 20 мин |
| 4 | Перерыв | 10 мин |
| 5 | Вёрстка документа в новом документе html | 15 мин |
| 6 | Игра. Создай свой макет | 10 мин |
| 7 | Доработка макета с добавлением элементов | 15 мин |
| 8 | Подведение итогов.Тест в Kahoot | 5 мин |
Урок 7: Конструируем сайт. Блоки и сетка
| № | Этап | Время |
| 1 | Игра | 10 мин |
| 2 | Что такое поток и блочные модели | 10 мин |
| 3 | Практика в HTML Academy | 10 мин |
| 4 | Игра | 5 мин |
| 5 | Размеры и величины. Внутренние (padding) и внешние (margin) отступы. | 10 мин |
| 6 | Перемена | 10 мин |
| 7 | Работа на платформе codepen.io. Изменение параметров | 5 мин |
| 8 | Практика в HTML Academy | 15 мин |
| 9 | Создание сетки на flexbox | 5 мин |
| 10 | Практика в HTML Academy | 15 мин |
| 11 | Итог | 5 мин |
Урок 8: Готовимся к полёту. Создаём сетку проекта
| № | Этап | Время |
| 1 | Игра | 10 мин |
| 2 | Верстаем страницу | 25 мин |
| 3 | Подведение итогов верстки | 10 мин |
| 4 | Перерыв | 10 мин |
| 5 | Стилизация элементов | 15 мин |
| 6 | Игра на запоминание | 5 мин |
| 7 | Верстка страницы. Продолжение | 15 мин |
| 8 | Сравнение результатов | 5 мин |
| 9 | Итоги | 5 мин |
Урок 9: Готовимся к полёту. Стилизация элементов
| № | Этап | Время |
| 1 | Игра kahoot | 10 мин |
| 2 | Позиционирование и псевдоклассы | 10 мин |
| 3 | Упражнения с академии | 10 мин |
| 4 | Практика в Brackets | 10 мин |
| 5 | Практика в HTML Academy | 5 мин |
| 4 | Перемена | 10 мин |
| 5 | Теория и практика в HTML Academy | 20 мин |
| 6 | Практика в Brackets | 20 мин |
| 7 | Итоги | 5 мин |
Урок 10: Последние приготовления перед запуском
| № | Этап | Время |
| 1 | Чек-лист готового проекта | 5 мин |
| 2 | Доработка проекта. 100% готовность | 20 мин |
| 3 | Интерактивные элементы | 20 мин |
| 4 | Перемена | 10 мин |
| 5 | Проверяем друг друга peer-assessment | 25 мин |
| 6 | Готовим проект к публикации | 15 мин |
| 7 | Итоги | 5 мин |
Урок 11: 3-2-1... Поехали! Запуск сайта в интернете
| № | Этап | Время |
| 1 | Игра на повторение | 10 мин |
| 2 | Теория (повторение 1 урока) | 10 мин |
| 3 | Регистрация на GitHub | 10 мин |
| 4 | Работа с GitHub | 15 минут |
| 5 | Перемена | 10 мин |
| 6 | Публикация сайта | 5 мин |
| 7 | Чек-лист по выступлению | 10 мин |
| 8 | Подготовка к выступлению на уроке 12 | 15 мин |
| 9 | Сравнение сайтов | 10 мин |
| 10 | Итоги | 5 мин |
Урок 12: Презентация космической вёрстки
| № | Этап | Время |
| 1 | Подготовка к игре | 5 мин |
| 2 | Игра верстка на скорость | 10 мин |
| 3 | Доделать макет, внести свои изменения | 25 мин |
| 4 | Выложить ссылку на макет | 5 мин |
| 5 | Перемена | 10 мин |
| 6 | Подготовиться к презентации своей работы | 5 мин |
| 7 | Выступления по 2 минуты | 25 мин |
| 8 | Подведение итогов, награждение | 10 мин |
Урок 13: Web профессии и где могут пригодится знания, полученные на курсе
| № | Этап | Время |
| 1 | Подготовка к игре | 5 мин |
| 2 | Игра на повторение | 10 мин |
| 3 | Профессии 21 века | 25 мин |
| 4 | Письмо себе в будущее | 5 мин |
| 5 | Перемена | 10 мин |
| 6 | Получение ТЗ от заказчика | 10 мин |
| 7 | Выполнение работы по ТЗ | 25 мин |
| 8 | Представление своей работы заказчику | 10 мин |
Урок 14: 12 правил UI\UX. Создание лучшего макета для своего сайта
| № | Этап | Время |
| 1 | Игра | 10 мин |
| 2 | Что такое UI\UX. 12 правил | 20 мин |
| 3 | Создание интерфейса приложения | 15 минут |
| 4 | Перемена | 10 мин |
| 5 | Подбор макета для своего сайта | 10 мин |
| 6 | Создание макета в GIMP | 25 мин |
| 7 | Итоги | 10 мин |
Урок 15: Верстаем сайт по собственному макету
| № | Этап | Время |
| 1 | Подвижная игра | 10 мин |
| 2 | Анализ макетов в классе. Сравнение | 15 мин |
| 3 | Повторение основ вёрстки. Главное | 20 мин |
| 4 | Перемена | 10 мин |
| 5 | Вёрстка своего сайта | 25 мин |
| 6 | Глобальные планы на сайт и доработка | 15 мин |
| 7 | Итоги | 5 мин |
Урок 16: Продолжение вёрстки и встраивание медиа и анимаций
| № | Этап | Время |
| 1 | Игра на повторение | 5 мин |
| 2 | Виды и форматы медиа на сайте | 15 мин |
| 3 | Добавление медиа и анимации на сайт | 20 мин |
| 4 | Дополнительные встраиваемые функции на сайт | 5 мин |
| 5 | Перемена | 10 мин |
| 6 | Индивидуальная работа. Продолжение вёрстки | 25 мин |
| 7 | Просмотр работ у других учащихся | 15 мин |
| 8 | Итоги | 5 мин |
Урок 17: Как сделать красивую презентацию для своего проекта. Доработка и оптимизация
| № | Этап | Время |
| 1 | Игра в плохого и хорошего дизайнера | 10 мин |
| 2 | Основы красивой презентации | 25 мин |
| 3 | Создание 2 слайдов по заданной теме | 10 мин |
| 5 | Перемена | 10 мин |
| 6 | Создание презентации | 10 мин |
| 7 | Доработка презентации | 10 мин |
| 8 | Оптимизация сайта. Проверка на ошибки | 15 мин |
| 9 | Размещение сайта | 10 мин |
Урок 18: Защита проекта
| № | Этап | Время |
| 1 | Подготовка к игре | 5 мин |
| 2 | Игра “Самый ужасный дизайн” | 10 мин |
| 3 | Доделать сайт, внести правки | 25 мин |
| 4 | Выложить ссылку на сайт | 5 мин |
| 5 | Перемена | 10 мин |
| 6 | Подготовиться к презентации своей работы | 5 мин |
| 7 | Выступления по 2 минуты | 25 мин |
| 8 | Подведение итогов, награждение | 10 мин |
Приложение 3
Пример методических указаний
| дополнительной общеразвивающей программы | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| «Первый космический код. Работа в HTML» Задачи урока: Установить и познакомиться с программой Brackets Начать работать с Дневником Белки Стрелки Познакомится с основными тегами и служебными Выполнить практическую работу в HTML Academy Материалы, демонстрируемые на проекторе: Презентация Опрос в Kahoot Опрос в Learning Apps
Материалы, необходимые для урока Скачать на каждый компьютер установочный файл Brackets либо установить, в случае, если установка учениками невозможна из-за администраторских органичений Иметь таблицу Excel с доступными ссылками для учеников для Урока 2 Подготовить материалы для игры HTML пазл (клей, нарезку из тегов, чистые листы)
План урока:
0. Подготовка к уроку
До начала урока преподавателю необходимо: Скопировать на свой Google Диск шаблон таблицы). Оставить ссылки только для урока 2. Установить настройки доступа - “комментировать могут все, у кого есть ссылка”. Именно через эту таблицу ученики будут получать все файлы и задания. Ссылки на задания учитель будет вставлять туда каждый раз перед уроком, при этом не надо давать ученикам новую ссылку, это будет одна и та же таблица. Для урока нужно скопировать таблицу и первые ссылки в ней, проверить, что работает Kahoot! (опрос-викторина) и задание в Learning Apps Открыть презентацию Установить на компьютеры программу для работы с кодом, если это невозможно сделать на уроке с учениками (если нужен пароль админа). 1. Повторение. Игра в Kahoot! (5 мин.) Готовый опрос в кахут - https://create.kahoot.it/k/68de18c4-2671-416b-bcf1-3ede604b5af1
2. HTML - теги. Одиночные и парные. Теория (10 мин.)
Скриншот экрана ученика:
Обсудите с учениками, почему некоторые теги закрываются, а где-то в этом нет необходимости
3. Создание рабочей папки Diary. Знакомство и работа в Brackets. Знакомство с Дневником Белки Стрелки. (15 мин.)
4. Служебные теги. Теория (10 мин.)
5. Перерыв (10 мин.)
6. Learning apps и практика (10 мин.)
7. Проверка в валидаторе кода с примером дневника Белки Стрелки (25 мин.)
Учитель: Сейчас мы выполним верстку сайта по образцу, используя те знания, которыми мы уже овладели.
Инструкции к заданию Учитель демонстрирует сайт, который к них должен получится. (Это страница дневник Белки Стрелки. Пример в документе - вот здесь) Обсуждают со всем классом какие теги точно они будут использовать Учитель: вам не придется писать вручную весь текст для страницы сайта. Просто перейдите по ссылке, которая записана на экране у учителя. ( ссылка ведёт на таблицу Excel, в которой будет текст, который надо будет скопировать в Brackets). Зайти в таблицу Еxcel Открыть ссылку с названием “Образец и текст для Белки и Стрелки” и открыть документ с текстом Учитель: С чего нужно начать? Давайте сейчас мы вместе напишем первый абзац и проверим его на ошибки Ребята выполняют практическую работу с Дневником Белки Стрелки.
8. Подводим итоги. Практика в HTML Academy (15 мин.)
Домашнее задание: В случае, если Дневник Белки Стрелки занял много времени выполнить практическое задание на платформе дома, в качестве домашнего задания Курс Основы HTML, глава 3 и 4. Разметка текста htmlacademy.ru/courses/38 Ссылки и изображения htmlacademy.ru/courses/40
|
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
