Сценарий урока по информатике и ИКТ с использованием авторского медиапродукта «Создание WEB – страниц с помощью языка разметки HTML»
Преподаватель – Демина Евгения Викторовна, учитель информатики и ИКТ.
Образовательное учреждение – Муниципальное образовательное учреждение г. Северск «СОШ № 89» Томской области.
Предмет – Информатика и ИКТ. Предпрофильная подготовка «Создание WEB – страниц с помощью языка разметки HTML»
Класс – восьмой
Тема - Структура HTML-документа. Цвет фона и текста.
Цель урока: Овладеть основными приемами создания WEB - страниц на языке HTML
Задачи урока:
Познакомиться с основными возможностями языка HTML для создания Web-страниц.
Использовать медиапособие при изучении нового материала (просмотреть пособие по темам «Структура HTML-документа», «Цвет фона и текста», а также видео-уроки по этим темам – Video-урок 1, Video-урок 2);
Воспитывать самостоятельность учащихся – умение планировать свою деятельность, разрабатывать стратегию и план рассуждений (Индивидуальная работа).
Создать на компьютере собственную Web -страницу по теме урока с использованием основных тегов языка HTML.
Продолжительность занятия – 80 минут (2 урока по 40 мин.)
Авторский медиапродукт – мультимедийное пособие «Создание WEB – страниц с помощью языка разметки HTML»
Медиапродукт «Создание WEB – страниц с помощью языка разметки HTML»
1. Среда: программа Adobe Captivate3. Продукт представлен в виде файлов типа EXE (исполняемые файлы). Программа медиапродукта запускается щелчком мыши на файл ЗАПУСК. Дополнительных подключений не требуется. Объем медиапродукта – 59,0 Мб.
2. Вид мадиапродукта: Электронное (мультимедийное) пособие.
3. Технологический сценарий - подробное описание медиапродукта:
Краткое описание содержания интерактивных учебных кадров- экранов.
Главное меню (Приложение 1).
Знакомство с медиапособием. Кнопки: КАРТА и ОБЗОР. Левый верхний угол программы. (Приложение 1)
Модуль «Пособие» (Приложение 2). Глава I «Введение. Структура HTML-документа»: структурные теги (название и назначение), HTML- код. (Приложение 3)
Модуль «Пособие». Глава II «Цвет фона и текста»: атрибуты тега: bgcolor, text.(Приложение 4)
Видео-уроки: Видео-урок 1 (Приложение 5) и Видео-урок 2. (Приложение 6)
Структура медиапродукта <Рисунок>.
Описание медиаприложений.
Прежде чем приступить к работе, учитель знакомит учащихся с картой медиапособия, а также учащимся предлагается просмотреть и прослушать краткую характеристику медиапособия, описание работы и инструкцию по выполнению контрольного теста. (Левый верхний угол программы: КАРТА и ОБЗОР) (Приложение 1).
Учебный материал программы условно делится на четыре модуля:
Модуль I. Video-уроки.
Модуль Video-уроки содержит 8 video-уроков, представлен в виде желтых яблок (Приложение 1) и предназначен для изучающих тему «Создание Web-страниц с помощью языка разметки HTML» «с нуля».
Модуль II. Пособие (Теоретическая часть).
Состоит из восьми разделов (тем) и содержит описание основных понятий, практических алгоритмов и шаблонов для создания Web-документов, а также необходим для систематизации полученных знаний и закрепления навыков работы в HTML-редакторе (Приложение 2)
Модуль III. Кроссворд.
Модуль «Кроссворд» является формой итогового контроля, необязательной для выполнения. В качестве подготовки к контрольному тесту учащимся рекомендуется разгадать кроссворд, так как некоторые вопросы дублируются в тестовом задании. Кроссворд содержит 14 вопросов по горизонтали и 11 по вертикали (Приложение 8). Недостатком является невозможность выполнения кроссворда в интерактивном режиме, так как для установки требуется специальная программа (PikOCross 2), в которой разработан кроссворд. По желанию заказчика возможно подключение программы PikOCross 2.
Модуль IV. Контрольный тест.
«Контрольный тест» (Приложение 1) является обязательной формой итогового контроля. Программа теста содержит 15 вопросов вида «Да – Нет», а также множественный выбор (учащийся выбирает один вариант ответа или несколько вариантов). В случае выбора одного варианта ответа, список выбора ответов обозначается «кружком» (Приложение 9), а при выборе нескольких вариантов ответа – «квадратиком» (Приложение 10). Преимуществом программы контрольного теста является возможность интерактивного режима выполнения тестовых заданий. В конце, программа теста автоматически подсчитывает баллы учащегося в процентном соотношении (Приложение 11). Время прохождения теста не учитывается, за каждый правильный ответ дается по 1 баллу.
Целесообразность использования медиапродукта на занятии:
Недостаточное количество информационного материала в существующих учебно-методических пособиях (в учебниках нет определенных иллюстраций, кодов, видео изображений).
Повышение эффективности усвоения учебного материала за счет одновременного изложения учителем необходимых сведений, показа демонстрационных фрагментов, а также самостоятельной работы учащихся во время просмотра видео-уроков.
Эффективность индивидуального подхода к работе учащихся на этапе работы с видеофрагментами урока (продуктивная самостоятельная творческая деятельность, развитие способностей, индивидуальная траектория освоения материала, индивидуальное время освоения, уровневая дифференциация при подготовке контрольных заданий).
Развитие наглядно-образного мышления за счет повышения уровня наглядности (виртуальный эксперимент- визуализация процессов, которые трудно или невозможно рассмотреть в реальных условиях).
Оборудование и материалы: проектор, компьютер, наушники, пакеты с заданиями (Приложение 7), авторское медиапособие.
Карта занятия:
Комментарий хода урока
|
Время
(мин)
|
№ слайдов
|
Развитие личностных качеств и психических процессов
|
Репродуктивные формы деятельности
|
Продуктивные формы деятельности
|
Сообщение темы и постановка цели и задач урока. (На начало урока используется проектор, где на экране представляется главное окно медиапособия).
|
3
|
1
|
Внимание
|
|
Прежде чем приступить к работе, учитель знакомит учащихся с картой медиапособия, а также учащимся предлагается просмотреть и прослушать краткую характеристику медиапособия, описание работы и инструкцию по выполнению контрольного теста.
|
7
|
2
3
|
|
|
Актуализация опорных знаний. Повторение основных понятий: Web-страница, Web-сайт, Web-сервер, гиперссылка, протокол передачи гипертекста, Web-браузер.
Вопросы учителя:
Подумайте над вопросами:
Приходилось ли вам работать в системе Интернет? Знаете ли вы, что такое Web-браузер? Назовите примеры Web-браузеров? Что такое Web-страница и Web-сайт? Знаете ли вы, что такое гиперссылка? Назовите примеры ссылок? Знакомы ли вы с форматами графических файлов? Назовите их? Знакомы ли вы с HTML-кодом? Что такое теги?
|
5
|
4.2
|
|
Рефлексивность
Точность речи
Активность
|
Введение новых понятий на уроке.
Учитель предлагает посмотреть на экран, где представлен HTML -код Web-страницы, структурные теги (название и назначение), атрибуты тегов: bgcolor=blue text=red.
|
5
|
4.3
4.3.1
| |
|
Используя проектор, учащиеся вместе с учителем смотрят и анализируют первую и вторую главы модуля «Пособие» «Введение. Структура HTML-документа» и «Цвет фона и текста». Учащиеся фиксируют в тетрадь основные моменты первой главы: структурные теги (название и назначение), HTML- код, а также основные моменты второй главы: атрибуты тега: bgcolor, text.
Учитель: Ребята, в каком редакторе можно создавать Web-страницы, используя HTML-код?
Выдвижение гипотезы построения кода Web-страницы учащихся: Home-site, Front Page, DreamWaver.
Выявление решающей гипотезы (подготовка Web-страницы заключается в «ручном» способе создания HTML- кода в редакторе Блокнот).
|
10
|
4.3
4.3.1
4.3.2
|
Внимание
Память
Мышление (логичность, ясность речи, понимание материала)
|
Глубина рассуждений
Аргументированность
Аналитичность
Рефлексивность
Точность, уместность, выразительность речи
|
Используя медиапособие учитель предлагает учащимся надеть наушники и самостоятельно просмотреть, прослушать модуль «Видео-уроки»: Video-урок 1, Video-урок 2. (Во время прослушивания видео-уроков, учащиеся могут фиксировать в тетрадь основные моменты).
После видео-уроков учитель задает вопросы учащимся: Что было не понятно при просмотре? Как вы думаете, трудоемкий ли процесс написание HTML-кода? Где располагается заголовок Web-страницы, каким тегом он обрамляется? Где находится тело программы, каким тегом оно обрамляется? Что означают атрибуты bgcolor=blue text=red? Атрибутами какого тега они являются? Назовите парные теги?
Далее учитель предлагает учащимся попытаться самим построить в редакторе Блокнот структурный код Web-страницы, следуя указаниям видео-уроков.
|
10
10
|
5
5.1
5.2
|
|
Рефлексивность
Самостоятель-
ность
Организованность
Аргументированность
Ясность речи
Активность
Коммуник. культура
Культура эмоций
|
После того, как учащиеся попробовали самостоятельно создать первую Web-страницу, учитель подводит итог и предлагает обсудить проблему сложности создания Web-страницы в редакторе Блокнот.
Примерные ответы учащихся:
сложно запомнить написание основных структурных тегов;
затраты времени на написание HTML-кода;
невозможность визуализации тегов, как, например, в программе HomeSite ;
невозможность мгновенно просмотреть Web-страницу, только с помощью браузера.
Вопрос учителя: для чего же нужно уметь создавать Web-страницу с помощью языка разметки гипертекста HTML, используя редактор Блокнот.
Вывод (должны сделать учащиеся): Редактор Блокнот позволяет создавать Web-страницу в «ручную» с помощью HTML-кода – языка разметки гипертекста. Все страницы в Интернете представлены, с помощью HTML-кода. Любой желающий, который хочет научиться создавать правильно и структурировано Web-страницу, должен научиться делать это в «ручную». Только так можно познать основы HTML-кода, осознать насколько это трудоемкий процесс для разработчиков.
|
8
|
5.1
5.2
К
о
н
е
ч
н
ы
е
к
а
д
р
ы
|
|
Рефлексивность
Самостоятель-
ность
Организованность
Аргументированность
Ясность речи
Активность
Коммуник. культура
Культура эмоций
|
Исследовательская, самостоятельная работа по созданию собственной Web-страницы в рамках темы урока.
Учитель сообщает план исследовательской работы и раздает пакеты с заданиями. (Приложение 7)
|
20
|
Приложение 7
|
|
ность
Аргументирован-ность
Системность
Аналитичность
Рефлексивность
|
В заключении урока учитель проводит рефлексию, предлагая определить ценность урока, его полезность Выставление оценок.
|
2
|
|
|
Рефлексивность
Аргументированность
Ясность речи
|
Список использованной литературы
Быстро и легко создаем, программируем, шлифуем и раскручиваем web-сайт +КОМПАКТ-ДИСК: Учеб. пособ./Под ред. Алексеева Ю.М. – М.: Лучшие книги. – 2003. – 432с.
Информатика. 7-9 класс. Базовый курс. Практикум по информационным технологиям/Под ред. Макаровой Н.В. – СПб.: Питер. – 2002. – 288с.
Практикум по информатике: Учеб. пособие/Сост. Могилев А,В., Пак Н.И., Хеннера Е.К.: Под ред. Хеннера Е.К.– М.: ACADEMA. – 2002.– 608 с.
HTML 4.0/ Матросов А.В., Сергеев А.О., Чаунин М.П. – СПб.: БХВ-Петербург. – 2001. – 672с.
Web-дизайн / Под ред. Кирсанов Д. – СПб.: Символ-Плюс – 1999. – 267с.
Режим электронного доступа: //www.citforum.ru
|
