Автор конспекта:
Автор(ы): — Демина Евгения Викторовна

Место работы, должность: — Муниципальное образовательное учреждение «Средняя общеобразовательная школа №89″ г. Северск

Регион: — Томская область

Характеристика конспекта:
Уровни образования: — основное общее образование
Уровни образования: — среднее (полное) общее образование

Класс(ы): — 8 класс
Класс(ы): — 9 класс

Предмет(ы): — Информатика и ИКТ

Целевая аудитория: — Учитель (преподаватель)

Ресурс для профильной школы: — Ресурс для профильной школы

Тип ресурса: — сценарий урока (занятия)

Краткое описание ресурса: — Сценарий урока по информатике и ИКТ с использованием авторского медиапродукта «Создание WEB – страниц с помощью языка разметки HTML»

Подробный конспект урока

Организационная информация
Тема урока
— Структура HTML-документа. Цвет фона и текста.
Предмет
Информатика и ИКТ. Элективный курс «Создание WEB – страниц».
Класс
Девятый
Автор урока (ФИО, должность)
Демина Евгения Викторовна, учитель информатики и ИКТ.
Образовательное учреждение
Муниципальное образовательное учреждение г. Северск «СОШ № 89».
Республика/край, город/поселение
Томская область, г. Северск.
Методическая информация
Тип урока
Урок изучения нового материала (комбинированный, учебный практикум, исследовательская работа, тестирование).
Цели урока
— Овладеть основными приемами созданияWEBстраницна языке HTML.
Задачи урока
— 1) Познакомиться с основными возможностями языкаHTMLдля создания Web-страниц.
2) Использовать медиапособие при изучении нового материала (просмотреть пособие по темам «Структура HTML-документа», «Цвет фона и текста», а также видео-уроки по этим темам – Урок 1, Урок 2).
3) Воспитывать самостоятельность учащихся – умение планировать свою деятельность, разрабатывать стратегию и план рассуждений (Индивидуальная работа, Тест).
4) Создать на компьютере собственную Web-страницу по теме урока с использованием основных тегов языка HTML.
5) Формировать творческий подход при создании собственной Web -страницы.
Знания, умения, навыки и качества, которые актуализируют/приобретут/закрепят/др. ученики в ходе урока
Основные знания
В результате изучения темы «Структура HTML-документа. Цвет фона и текста» ученик должен знать/ понимать:
· набор необходимых инструментов для создания веб-страницы /сайта;
· принципы работы с веб-редакторами;
· основные средства редактирования веб-страниц;
· типичную структуру веб-страницы и принципы проектирования сайта;
· основные принципы веб-дизайна;
· атрибуты тега:bgcolor, text;
· структурные теги (название и назначение), HTML- код.

Основныеумения
В результате изучения темы «Структура HTML-документа. Цвет фона и текста»ученик должен уметь:
· самостоятельно составлять и планировать технологическую последовательность операций;
· уметь самостоятельно находить и использовать нужную информацию;
· готовить текст и иллюстрированный материал для сайта;
· пользоваться средствами Web-редактора для написания страницы: создавать страницу, редактировать и форматировать текст и Web-страницу. — — Развитие навыков:
В результате изучения темы «Структура HTML-документа. Цвет фона и текста»ученикдолжен:
· приобрести навыки применения средств ИКТ в повседневной жизни, при выполнении индивидуальных и коллективных проектов в учебной деятельности, при дальнейшем освоении профессий,востребованных на рынке труда;
· закрепить навыки работы в HTML-редакторе.

Развитие личностных качеств и психических процессов (Prilojenie1):
· Продуктивные формы деятельности: рефлексивность; активность; глубина рассуждений; аргументированность; аналитичность; точность, уместность, выразительность, ясность речи; самостоятельность; организованность;коммуникативная культура; культура эмоций; гибкость; любознательность; систематизация полученных знаний.
· Репродуктивные формы деятельности: внимание; память; мышление (логичность, ясность речи, понимание материала); дисциплина.
Необходимое оборудование и материалы
проектор, компьютер, наушники, пакеты с заданиями, авторское мультимедийное (электронное) образовательное пособие.
Подробный конспект урока
Мотивация учащихся
— Создание учащимися собственных WEB-ресурсов приобретает все большую актуальность. В настоящее время медиапособиеявляется ключевым дидактическим звеном информационно-коммуникационной технологии обучения в процессе подготовки конкурентоспособных учащихся (выпускников) XXI века. Медиапособие как дидактическое средство в процессе предпрофильной подготовки учащихся разработано с целью повышения информационной и коммуникативной компетенции учащихся, выработки навыков применения средств ИКТ в повседневной жизни, при выполнении индивидуальных и коллективных проектов в учебной деятельности, при дальнейшем освоении профессий,востребованных на рынке труда.
Для того чтобы создать собственную Web-страницу, ученик может воспользоваться специальными программами редактирования документов Всемирной паутины. Следует отметить, что эти программы часто ограничены в своих возможностях, содержат ошибки, иногда создают избыточный код, который поддерживается не всеми браузерами, хотя, по мнению учеников, они более просты в использовании, так как являются визуализированными. Написание HTML-кодадля Web-страницы является трудоемким процессом и заключается в «ручном» способе создания кода документов Всемирной паутины на языке HTML- HyperText Markup Language (языка разметки гипертекста).В процессе предпрофильной подготовки ученик должен придти к выводу: для того, чтобынаучиться создавать, программировать, «шлифовать» и раскручивать собственную Web-страницу, необходимо научиться делать это в «ручную». Только так можно познать основы HTML-кода, его возможности, преимущества перед визуализированными готовыми программами-редакторами, осознать насколько это трудоемкий процесс для разработчиков. — Ход
и содержание урока
1.Этап. Сообщение темы и постановка цели изадач урока. (На начало урока используется проектор, где на экране представляется главное окно медиапособия) (DeminaEV_MediaPosobie/menu.exe/Cлайд-кадр №1).
2. Этап. Знакомство учащихся с картой медиапособия. Прежде чем приступить к работе, учитель знакомит учащихся с картой медиапособия, а также учащимся предлагается просмотреть и прослушать краткую характеристику медиапособия, описание работы и инструкцию по выполнению контрольного теста (Слайд-кадр №2, Слайд-кадр №3).
Примечание: В виду того, что объем мультимедийного пособия имеет значительный объем, электронный модуль Обзор (Слайд-кадр №3) отключен.
3. Этап. Актуализация опорных знаний (Слайд-кадр №4, Слайд-кадр №4.2).
Повторение основных понятий: Web-страница, Web-сайт, Web-сервер, гиперссылка, протокол передачи гипертекста, Web-браузер.
Вопросы учителя:
Подумайте над вопросами:
Приходилось ли вам работать в системе Интернет? Знаете ли вы, что такое Web-браузер? Назовите примеры Web-браузеров? Что такое Web-страница иWeb-сайт? Знаете ли вы, что такое гиперссылка? Назовите примеры ссылок? Знакомы ли вы с форматами графических файлов? Назовите их? Знакомы ли вы с HTML-кодом? Что такое теги?
4. Этап. Введение новых понятий на уроке (Слайд-кадр 4.3,
Слайд-кадр № 4.3.1, Слайд-кадр № 4.3.1.а, Слайд-кадр № 4.3.1.б).
Учитель предлагает посмотреть на экран, где представлен HTML -код Web-страницы, структурные теги (название и назначение), атрибуты тегов:bgcolor=blue text=red.
Используя проектор, учащиеся вместе с учителем смотрят и анализируютпервую и вторую главы модуля (Слайд-кадр № 4.3) «Пособие» «Введение. Структура HTML-документа» и«Цвет фона и текста» (Слайд-кадр № 4.3.1, Слайд-кадр № 4.3.2). Учащиеся фиксируют в тетрадь основные моменты первой главы: структурные теги (название и назначение), HTML- код, а также основные моменты второй главы: атрибуты тега:bgcolor, text.
Учитель: Ребята, в каком редакторе можно создавать Web-страницы, используя HTML-код?
Выдвижение гипотезы построения кода Web-страницы учащихся: Home-site, Front Page, DreamWaver.
Выявление решающей гипотезы (подготовка Web-страницы заключается в «ручном» способе создания HTML- кода в редакторе Блокнот).
5.Этап. Самостоятельная работа учащихся, учебный практикум используя медиапособие учитель предлагает учащимся надеть наушники и самостоятельно просмотреть, прослушать модуль «Видео-уроки»: Урок 1, Урок 2 (На главном меню пособия представлен в виде желтых яблок). Во время прослушивания видео-уроков, учащиеся могут фиксировать в тетрадь основные моменты.
Примечание: В виду того, что объем мультимедийного пособия имеет значительный объем, и остальные видео-уроки не используются на данном уроке, электронные модули Уроки 3,4,5,6,7,8 отключены.
— После видео-уроков учитель задает вопросы учащимся: Что было не понятно при просмотре? Как вы думаете, трудоемкий ли процесс написание HTML-кода? Где располагается заголовок Web-страницы, каким тегом он обрамляется? Где находится тело программы, каким тегом оно обрамляется? Что означают атрибуты bgcolor=blue text=red? Атрибутами какого тега они являются? Назовите парные теги?
Далее учитель предлагает учащимся попытаться самим построить в редакторе Блокнот структурный код Web-страницы, следуя указаниям видео-уроков.
6. Этап. Подведение итогов, обсуждение проблемы. После того, как учащиеся попробовали самостоятельно создать первую Web-страницу, учитель подводит итог и предлагает обсудить проблему сложности создания Web-страницы в редакторе Блокнот.
Примерные ответы учащихся:
· сложно запомнить написание основных структурных тегов;
· затраты времени на написание HTML-кода;
· невозможность визуализации тегов, как, например, в программе HomeSite ;
· невозможность мгновенно просмотреть Web-страницу, только с помощью браузера.
Вопрос учителя: для чего же нужно уметь создавать Web-страницу с помощью языка разметки гипертекста HTML, используя редактор Блокнот.
Вывод (должны сделать учащиеся): Редактор Блокнот позволяет создавать Web-страницу в «ручную»с помощью HTML-кода – языка разметки гипертекста. Все страницы в Интернете представлены, с помощью HTML-кода. Любой желающий, который хочет научиться создавать правильно и структурировано Web-страницу, должен научиться делать это в «ручную». Только так можно познать основы HTML-кода, осознать насколько это трудоемкий процесс для разработчиков. — 7. Этап. Исследовательская, самостоятельная, индивидуальная работа (Prilojenie.doc)по созданию собственной Web-страницы в рамках темы урока. Учитель сообщаетплан исследовательской работы и раздает пакеты с заданиями.
После того, как выполнено индивидуальное задание, учащимся предлагается выполнить Тест с помощью тестовой программы мультимедийного пособия (DeminaEV_MediaPosobie/menu.exe/Слайд-кадр №7) на знание теоретического материала урока.
8 Этап. Подведение итогов: учитель проводит рефлексию. В заключении урока учитель проводит рефлексию, предлагая определить ценность урока, его полезность. Выставление оценок.
Проверка и оценивание ЗУНКов
— Результатом данного урока являются устная работана уроке,готовые Web-страницы учащихся в рамках темы урока,тестирование по теме урока. В конце, программа теста автоматически подсчитывает баллы учащегося в процентном соотношении. Результаты теста выводятся на экран и анализируются учащимся самостоятельно.
1) Исследовательская, самостоятельная работа по созданию собственной Web-страницы в рамках темы урока.Учитель сообщаетплан исследовательской работы и раздает пакеты с заданиями. (Prilojenie.doc).
2) Тест (DeminaEV_MediaPosobie/menu.exe/Слайд-кадр №7).
Рефлексия деятельности на уроке
— Тестовое задание в конце урока позволило осуществить контроль, провести рефлексию.(DeminaEV_MediaPosobie/menu.exe/Слайд-кадр№7). Интерактивный режим выполнения тестовых заданий позволяет учащимся самостоятельно определить уровень полученных теоретических знаний на уроке в процентном соотношении, а также проанализировать допущенные ошибки.
Домашнее задание
— Подготовить тему для будущего Web-ресурса. Определить тип ресурса (проект, сайт, личная страничка), дизайн проекта,соответствие критериям технологичности, функциональности и экологичности.
Дополнительная необходимая информация
На уроке мною были использованы следующие методы и формы работы с учащимися:
Методы: словесный, метод практического применения знаний, метод самостоятельной работы и работы под руководством учителя, метод презентационных технологий, метод программированного обучения – с помощью обучающего устройства (программируемый электронный учебник (пособие), тестирующие, контролирующиепрограммы).
Формы:

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

В помощь учителю
Использованные источники и литература (если имеются)
Список использованной литературы

1. Быстро и легко создаем, программируем, шлифуем и раскручиваем web-сайт +КОМПАКТ-ДИСК: Учеб. пособ./Под ред. Алексеева Ю.М. – М.: Лучшие книги. – 2003. – 432с.
2. Информатика. 7-9 класс. Базовый курс. Практикум по информационным технологиям/Под ред. Макаровой Н.В. – СПб.: Питер. – 2002. – 288с.
3. Практикум по информатике: Учеб. пособие/Сост.Могилев А,В., Пак Н.И., Хеннера Е.К.:Под ред. Хеннера Е.К.– М.: ACADEMA. –2002.– 608 с.
4. HTML 4.0/ Матросов А.В., Сергеев А.О., Чаунин М.П. – СПб.: БХВ-Петербург. – 2001. – 672с.
5. Web-дизайн / Под ред. Кирсанов Д. – СПб.:Символ-Плюс – 1999. – 267с.
6. Режим электронного доступа: //www.citforum.ru
— Обоснование, почему данную тему оптимально изучать с использованием медиа-, мультимедиа, каким образом осуществить
Целесообразность использования
медиапродукта на занятии:

1. Недостаточное количество информационного материала в существующих учебно-методических пособиях (в учебниках нет определенных иллюстраций, кодов Web-страниц, видео изображений).
2. Повышение эффективности усвоения учебного материала за счет одновременного изложения учителем необходимых сведений, показа демонстрационных фрагментов, а также самостоятельной работы учащихся во время просмотра видео-уроков.
3. Эффективность индивидуального подхода к работе учащихся на этапеработы с видеофрагментами урока (продуктивная самостоятельная творческая деятельность, развитие способностей, индивидуальная траектория освоения материала, индивидуальное время освоения, уровневая дифференциация при подготовке контрольных заданий).
4. Развитие наглядно-образного мышления за счет повышения уровня наглядности (виртуальный эксперимент- визуализация процессов, которые трудно или невозможно рассмотреть в реальных условиях).
— Советы по логическому переходу от данного урока к последующим
Логический переход от данного урока к последующим я вижу таким образом:
· в целях формирования интереса и положительной мотивации к выбранному профилю основная форма контроля за уровнем достижений учащихся в рамках элективного курса «Создание Web-сайтов» -Student/ s Portfolio”. Эта форма используется в образовательной практике для составления и пополнения коллекции самостоятельно выполненных учебных и профессиональных продуктов.
Такая форма оценивания достижений учащихся выбрана для поддержания неформального интереса к курсу, повышения учебной мотивации, проявления учебной инициативы, снятию психологического барьера перед отметкой.
Ученик получает зачет (оценку не ниже 4) при условии выполнения работы в установленный срок с учетом стандартных требований к их оформлению.
В качестве предполагаемых результатов могут быть:
· WEB-ресурсы ипроекты, созданные учащимися по различным темам;
· результатом совместной деятельности учащихся может быть также организация и проведение презентаций сайтов (как школьных, так и городских);
· содержание предпрофильной подготовки включает участие в городских, областных, региональных и Всероссийских конкурсах.
Другое
Медиапродукт
«Создание WEB – страниц с помощью языка разметки HTML»
— 1. Среда:программа Adobe Captivate3. Продукт представлен в виде файлов типа EXE (исполняемые файлы).
2. Вид мадиапродукта: Электронное (мультимедийное) образовательное пособие.
3. Технологический сценарий — подробное описание медиапродукта:
I. Краткое описание содержания интерактивных учебных кадров- экранов.

1. Главное меню (Слайд кадр №1).
2. Знакомство с медиапособием. Кнопки: КАРТА и ОБЗОР. Левый верхний угол программы. (Слайд кадр №1)
3. Модуль «Пособие» (Слайд кадр №4). Глава I «Введение. Структура HTML-документа»: структурные теги (название и назначение), HTML- код (Слайд-кадр № 4.3.1).
Модуль «Пособие». Глава II «Цвет фона и текста»: атрибуты тега:bgcolor, text (Слайд-кадр № 4.3.2).Видео-уроки: Урок 1 (Слайд-кадр № 5.1) и Урок 2 (Слайд-кадр № 5.2).
II. Структура медиапродукта(Mape2.jpeg).

III.Описание медиаприложений.

Прежде чем приступить к работе, учитель знакомит учащихся с картой медиапособия, а также учащимся предлагается просмотреть и прослушать краткую характеристику медиапособия, описание работы и инструкцию по выполнению контрольного теста. (Левый верхний угол программы: КАРТА и ОБЗОР).
Учебный материал программы условно делится на четыре модуля:
Модуль I.Video-уроки.
МодульVideo-уроки содержит8 video-уроков, представлен в виде желтых яблоки предназначен для изучающих тему «Создание Web-страниц с помощью языка разметки HTML»«с нуля».
Модуль II. Пособие (Теоретическая часть).
Состоит из восьми разделов (тем) и содержит описание основных понятий, практических алгоритмов и шаблонов для создания Web-документов, а также необходим длясистематизации полученных знаний и закрепления навыков работы в HTML-редакторе.
Модуль III. Кроссворд.
Модуль «Кроссворд» является формой итогового контроля,необязательной для выполнения. В качестве подготовки к контрольному тесту учащимся рекомендуется разгадать кроссворд, так какнекоторые вопросы дублируются в тестовом задании. Кроссворд содержит 14 вопросов по горизонтали и 11 по вертикали. Недостаткомявляется невозможность выполнения кроссворда в интерактивном режиме, так как для установки требуется специальная программа (PikOCross 2), в которой разработан кроссворд. По желанию заказчика возможно подключение программы PikOCross 2.

Модуль IV. Контрольный тест.
«Контрольный тест» является обязательной формой итогового контроля. Программа теста содержит 15 вопросов вида «Да – Нет», а также множественный выбор (учащийся выбирает один вариант ответа или несколько вариантов). В случае выбора одного варианта ответа, список выбора ответов обозначается «кружком», а при выборе нескольких вариантов ответа – «квадратиком». Преимуществом программы контрольного теста является возможность интерактивного режима выполнения тестовых заданий. В конце, программа теста автоматически подсчитывает баллы учащегося в процентном соотношении. Время прохождения теста не учитывается, за каждый правильный ответ дается по 1 баллу. Каждый пропущенный вопрос программа теста воспринимает как ошибка.


Файлы: Prilojenie1.doc
Размер файла: 60416 байт.

( план – конспект урока 1 класс 5 класс. 6 класс 7 класс 8 класс 9 класс 10 класс Английский язык Литературное чтение Математика Музыка ОБЖ Окружающий мир Оренбургская область Физика ЦОР алгебра биология викторина внеклассное мероприятие география геометрия здоровье игра информатика история классный час конкурс конспект урока краеведение кроссворд литература начальная школа обществознание презентация программа проект рабочая программа русский язык тест технология урок химия экология