Сценарий 2 уроков по созданию web-странички с помощью HTML
методическая разработка по информатике и икт (8 класс) на тему

Урок в 8 классе (45 мин)

Тема:  «HTML – язык для создания Web-сайтов. Практическая работа: «Создание Web-странички»»

Цель:

• Научить технологии создания Web-странички.

Задачи

•  Сформировать понятие HTML как языка создания Web-сайтов.
• Сформировать понятие «тега», структуры странички.
• Формировать навык работы в программах «Блокнот» и «Internet Explorer»
• Формировать умение оформлять практические работы.

Методы:  Беседа, объяснение, самостоятельная практическая работа.

Оборудование: Тетрадь, письменные принадлежности, учебник, раздаточный материал (в электронном виде), ПК с необходимым ПО, графопроектор.

Тип урока:   Изучение нового материала, практическая работа.

Технологии: компьютерная, коллективного сотрудничества.

Структура урока

1. Орг. момент –  1 - 2 мин.
2. Актуализация знаний  – 2 – 3 мин.
3. Новый материал – 13 – 16 мин.
4. Практическая часть – 18 - 22  мин.
5. Заключительная часть – 1  – 2 мин.

Ход урока

Орг. момент:

Приветствие учащихся. Знакомство с планом урока.

Постановка целей урока. Запись темы в рабочую тетрадь. Запись домашнего задания в дневник (§ 3.7  прочитать, ответить на вопросы после параграфа, завершить оформление практической работы)

Актуализация знаний.

Проведение беседы с целью повторения и контроля усвоения  основных терминов  по теме «Коммуникационные технологии».

Новый материал.

Плавно перейти к объяснению нового материала и рассказать о языке HTML, его создателе, структуре web-странички тегах. В процессе объяснения предложить учащимся записать простейший код web-странички: «

Hello!! World!

» .

Практическая часть.

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

Практическая работа № 13(диктует учитель)

Создание Web-странички. (диктует учитель)

Цель работы: создать Web-страничку  (озвучивается и записывается учащимися самостоятельно)

Ход работы: (диктует учитель)

1. В папке  8 класс создать папку со своей фамилией.
2. В этой папке создать текстовый документ (расширение  - *.txt)
3. Открыть файл в программе «Блокнот» и вписать код странички, внесенный в тетрадь.
4. Сохранить файл, выполнив команду Файл→Сохранить.
5. Сохранить файл с расширением htm, выполнив команду Файл→Сохранить как…  (использовать раздаточный материал)

1. Выбрать в поле Тип фала – Все
2. В поле Имя файла заменить расширение txt на htm)
3. Кликнуть Сохранить

6. Закрыть файл.
7. Открыть файл в программе «Internet Explorer»
8. Проанализировать результат.

Выводы: Web-страничка создана. Файл с Web-страничку находится в …. (возможный вариант вывода – записывается учащимися самостоятельно)

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

Заключительная часть.

Рефлексия. Что получилось/не получилось. Что показалось трудным/интересным на уроке.

Запись домашнего задания в дневник (§ 3.7  прочитать, ответить на вопросы после параграфа, завершить оформление практической работы, подготовить  и принести к следующему уроку файлы с картинкой и музыкой схожей тематики для создания оформленной Web-странички). Учитель проверяет подготовленные для сдачи работы и выставляет оценки. Учащиеся не успевшие оформить работу, оформляют ее дома, оценка в этом случае выставляется позднее. В конце урока поблагодарить учащихся за  работу.

Урок в 8 классе (45 мин)

Тема: Практическая работа: «Web-страничка с мультимедийным наполнением»»

Цель:

• Научить использовать атрибуты тегов для оформления Web-странички.

Задачи

•  Сформировать понятие «атрибута тега».
• Формировать навык применения атрибутов различных тегов для оформления текста и фона.
• Формировать навык использования тегов для добавления рисунков, музыки, активных ссылок на страничку.
• Формировать умение оформлять практические работы.

Методы:  Беседа, объяснение, самостоятельная практическая работа.

Оборудование: Тетрадь, письменные принадлежности, учебник, раздаточный материал (в печатном и  электронном виде), ПК с необходимым ПО, графопроектор.

Тип урока:   Совершенствование и углубление изученного материала, практическая работа.

Технологии: компьютерная, коллективного сотрудничества.

Структура урока

1. Орг. момент –  1 - 2 мин.
2. Актуализация знаний  – 2 – 3 мин.
3. Новый материал – 13 – 16 мин.
4. Практическая часть – 18 - 22  мин.
5. Заключительная часть – 1  – 2 мин.

Ход урока

Орг. момент:

Приветствие учащихся. Знакомство с планом урока.

Постановка целей урока. Запись темы в рабочую тетрадь. Запись домашнего задания в дневник (повторить § 3.7,  прочитать практическую работу 3.7, завершить  создание Web-странички  с мультимедийным наполнением и оформление практической работы)

Актуализация знаний.

Проведение беседы с целью повторения и контроля усвоения  основных терминов  по теме «Коммуникационные технологии».

Новый материал.

Плавно перейти к объяснению нового материала и рассказать об атрибутах тегов в  языке HTML. Особое внимание уделить атрибутам тегов BODY и FONT

Практическая часть.

Для закрепления и углубления  изученного материала проводится творческая практическая работа, выполняемая индивидуально каждым учащимся.  Творческая работа заключается в создании  Web-странички содержащей текст нестандартного оформления, нестандартный фон, музыку, изображение, активную ссылку на электронный адрес. В первой части практической работы учащиеся проводят дооформление практической работы  (раздаточный материал) в тетради  самостоятельно и изучают ход работы совместно с учителем. Текст практической работы (курсив):

Практическая работа № 14

Web-страничка с мультимедийным наполнением.

Цель работы: создать Web-страничку   с мультимедийным наполнением (озвучивается и записывается учащимися самостоятельно)

Ход работы: (изучается совместно с  учителем)

1. В папке  8 класс создать папку со своей фамилией.
2. В эту папку скопировать файл с изображением и файл с музыкой, подготовленные к уроку.
3. В той же папке создать текстовый документ (расширение  - *.txt)
4. Открыть файл в программе «Блокнот» и вписать код странички - шаблон, из раздаточного материала.
5. Сохранить файл, выполнив команду Файл→Сохранить.
6. Заменить URL на имя музыкального файла с его  расширением в теге, отвечающем за добавление музыки.
7. Изменить адрес электронной почты на свой в теге активной ссылки на адрес электронной почты.
8. Добавить тег для добавления изображения с именем и расширением своего файла с изображением.
9. Добавить текст и оформит его с помощью атрибутов тега FONT.
10. Создать нестандартное оформление фона с помощью атрибутов тега BODY.
11. Сохранить файл с расширением htm.
12. Просмотреть свою страниц в браузере Internet Explorer
13. Проанализировать результат.
14. При необходимости произвести необходимые изменения в коде страницы через программу «Блокнот»

Выводы: Web-страничка создана. Файл с Web-страничку находится в …. (возможный вариант вывода – записывается учащимися самостоятельно)

Учащиеся переходят за ПК и выполняют практическую работу самостоятельно. Для работы с тегами и атрибутами раздается в печатном или электронном виде раздаточный материал. Для подбора кода цвета можно использовать  Интернет-ресурс, например:

http://html-color-codes.info/Cvetovye-kody-HTML/  (Рекомендовать учащимся)

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

Заключительная часть.

Рефлексия. Что получилось/не получилось. Что показалось трудным/интересным на уроке.

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

Практическая работа № 14

Web-страничка с мультимедийным наполнением.

Цель работы: ______________________________________________

 __________________________________________________________

 __________________________________________________________

Ход работы: (диктует учитель)

1. В папке  8 класс создать папку со своей фамилией.
2. В эту папку скопировать файл с изображением и файл с музыкой, подготовленные к уроку.
3. В той же папке создать текстовый документ (расширение  - *.txt)
4. Открыть файл в программе «Блокнот» и вписать код странички - шаблон, из раздаточного материала.
5. Сохранить файл, выполнив команду Файл→Сохранить.
6. Заменить URL на имя музыкального файла с его  расширением в теге, отвечающем за добавление музыки.
7. Изменить адрес электронной почты на свой в теге активной ссылки на адрес электронной почты.
8. Добавить тег для добавления изображения с именем и расширением своего файла с изображением.
9. Добавить текст и оформит его с помощью атрибутов тега FONT.
10. Создать нестандартное оформление фона с помощью атрибутов тега BODY.
11. Сохранить файл с расширением htm.
12. Просмотреть свою страниц в браузере Internet Explorer
13. Проанализировать результат.
14. При необходимости произвести необходимые изменения в коде страницы через программу «Блокнот»

Выводы: ___________________________________________________

___________________________________________________________

 __________________________________________________________

Практическая работа № 14

Web-страничка с мультимедийным наполнением.

Цель работы: ______________________________________________

 __________________________________________________________

 __________________________________________________________

Ход работы: (диктует учитель)

1. В папке  8 класс создать папку со своей фамилией.
2. В эту папку скопировать файл с изображением и файл с музыкой, подготовленные к уроку.
3. В той же папке создать текстовый документ (расширение  - *.txt)
4. Открыть файл в программе «Блокнот» и вписать код странички - шаблон, из раздаточного материала.
5. Сохранить файл, выполнив команду Файл→Сохранить.
6. Заменить URL на имя музыкального файла с его  расширением в теге, отвечающем за добавление музыки.
7. Изменить адрес электронной почты на свой в теге активной ссылки на адрес электронной почты.
8. Добавить тег для добавления изображения с именем и расширением своего файла с изображением.
9. Добавить текст и оформит его с помощью атрибутов тега FONT.
10. Создать нестандартное оформление фона с помощью атрибутов тега BODY.
11. Сохранить файл с расширением htm.
12. Просмотреть свою страниц в браузере Internet Explorer
13. Проанализировать результат.
14. При необходимости произвести необходимые изменения в коде страницы через программу «Блокнот»

Выводы: ___________________________________________________

___________________________________________________________

 __________________________________________________________

Основные тэги HTML

Теги для вставки адреса электронной почты и музыки:

…

<A HREF=&quot;URL&quot;> </A> <BGSOUND SRC=&quot;URL&quot; AUTOSTART=TRUE LOOP=INFINITE>