Технологическая карта урока по Информационным технологиям на тему Создание Web — страницы

ТЕХНОЛОГИЧЕСКАЯ КАРТА УРОКА
"Создание Web-страницы"
ФИО(полностью) Андреева Елена Григорьевна
Место работы ГБПОУ РМ «Зубово-Полянский колледж»
Должность преподаватель информатики
Предмет Информационные технологии
Группа 251
Специальность 09.02.03 Программирование в компьютерных системах
Тема Создание Web-страницы.
Цель: Овладение учащимися основными приемами создания Web-страниц на языке HTML
Задачи урока:
Познакомить с основными возможностями языка HTML для создания Web-страниц, структурой Web-страницы.
Воспитывать самостоятельность учащихся – умение планировать свою деятельность, разрабатывать стратегию и план рассуждений (Индивидуальная работа, Тест).
Способствовать развитию элементов логического мышления, памяти, внимания.
Организовать деятельность учащихся по созданию собственной Web-страницу с использованием основных тегов языка HTML.
Формировать творческий подход при создании собственной Web -страницы.
Продолжить формирование коммуникативной культуры, информационной культуры, внимательности, аккуратности, дисциплинированности
Знания, умения, навыки и качества, которые актуализируют/приобретут/закрепят/др. студенты в ходе урока:
Основные знания
Студент должен знать/ понимать:
набор необходимых инструментов для создания Web-страницы;
типичную структуру Web -страницы;
структурные теги (название и назначение), HTML- код.
Основные умения
Студент должен уметь:
самостоятельно составлять и планировать технологическую последовательность операций;
уметь самостоятельно находить и использовать нужную информацию;
пользоваться средствами языка HTML для написания страницы: создавать страницу, редактировать и форматировать Web-страницу.
Развитие навыков:
Студент должен:
приобрести навыки применения средств ИКТ в повседневной жизни, при выполнении индивидуальных и коллективных проектов в учебной деятельности, при дальнейшем освоении профессий, востребованных на рынке труда;
приобрести навыки работы c HTML.
Развитие личностных качеств и психических процессов:
Продуктивные формы деятельности: рефлексивность; активность; глубина рассуждений; аргументированность; аналитичность; точность, уместность, выразительность, ясность речи; самостоятельность; организованность; коммуникативная культура; культура эмоций; гибкость; любознательность; систематизация полученных знаний. Репродуктивные формы деятельности: внимание; память; мышление (логичность, ясность речи, понимание материала).Тип урока: комбинированный урок
Необходимое оборудование:
персональный компьютер (ПК) преподавателя, ПК студентов.
карточки с заданиями;
Программа Блокнот
Браузер Google ChromeПланируемые образовательные результаты:
Предметные – умение работать с программой-браузером, знать правила записи тегов, знать структуру Web-страницы
Метапредметные – умение применять знания в жизни
Личностные – способность применять теоретические знания для решения практических задач.
Необходимое оборудование и материалы:
проектор, компьютер, пакеты с заданиями (тест, карточки со справочным материалом), электронная презентация.
СТРУКТУРА И ХОД УРОКА
№ Этап урока Название используемых ЭОР
Деятельность преподавателя
(с указанием действий с ЭОР, например, демонстрация) Деятельность студента Время
(в мин.)
1 2 3 5 6 7
1 Организационный момент
Цель этапа: обеспечить нормальную обстановку для работы, подготовить учащихся к предстоящему уроку.
-Здравствуйте, ребята! Садитесь. Кто сегодня отсутствует?
(отмечает отсутствующих.) Приветствуют учителя, проверяют свою готовность к уроку 2
2 Актуализа ция знаний Презентация по теме урока Цель этапа: мотивация изучения учащимися новой темы, постановка цели урока
Древнегреческий философ Аристотель сказал:
«Ум заключается не только в знании, но и в умении прилагать знание на деле».
Пусть эти слова, сказанные в 4 веке до нашей эры, станут девизом нашего сегодняшнего урока
-Для того, чтобы узнать тему урока, предлагаю отгадать кроссворд, который нам и подскажет ее (слайд2).
Вопросы:
Параллельные беседы в Интернете или целый мир виртуального общения.
Всемирная система компьютерных сетей или глобальная сеть.
Один из российских поисковых указателей в сети Интернет.
Электронная почта.
- Какое слово мы получили после того как отгадали кроссворд?
-Хорошо. Сегодня мы с вами познакомимся с языком гипертекстовой разметки документов HTML.
- И так тема урока «Создание Web – страницы» (слайд 3).
-Сегодня мы познакомимся с понятиями «гипертекст», «HTML»,узнаем особенности языка HTML и будем пробовать создавать свои веб- страницы.
-У кого-нибудь есть вопросы по предстоящей работе?
Тема «Создание Web-страницы» – одна из наиболее практически значимых, востребованных, так как умение создавать web-сайты становится все более актуальным навыком пользователя интернета. Смотрят на экран. Отвечают на вопросы.

Предполагаемые ответы:
(chat)
(Internet)
(rambler)
(e-mail)
Выделены цветом буквы по горизонтали
H T M L
Формулируют тему урока, цель и задачи урока.
Внимательно слушают преподавателя, записывают дату и тему урока в тетрадь
4
3
4.
Объяснение нового материала
Первичное закрепление полученных знаний
Техноло гия WWW
Презентация «Структу ра Web-страницы» Цель этапа: формировать знания учащихся по теме «Основы языка HTML».
Как вы понимаете что такое HTML?
HTML Hyper Text Markup Language – язык разметки гипертекста
представляющий собой простой набор команд, описывающих структуру документа.
HTML страница - это обычный текстовый файл имеющий расширение .html или .htm. (слайд 4).
Гипертекст- система взаимосвязанных текстов.
Запишем определение: гипертекст- это текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и прочее (слайд 5).
Из чего состоит Web-сайт?
-Запишем: (слайд 5)Web-страницы — это обычные текстовые файлы, в которых с помощью специальных команд задается оформление страницы и расположение материала. Все рисунки, анимация и т.п. должны быть записаны в виде отдельных файлов.
Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются:- малый информационный объем;- возможность просмотра в различных операционных системах.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").
Web-страницы можно разделить на две группы(слайд 6)
статические (они чаще всего имеют расширения *.htm или *.html) — те страницы, которые записаны на диск в готовом виде и не меняются;
динамические (с расширениями *.shtml, *.asp, *.php, *.pl) — полностью или частично создаются на сервере в момент запроса (например, выбирают нужную информацию из базы данных и передают ее по каналам Интернет в виде Web-страницы).
Мы будем рассматривать только статические Web-страницы, которые создаются на языке HTML (Hypertext Markup Language — язык разметки гипертекста).
Для создания HTML страницы не требуется никаких специальных программ. Подойдет любой текстовый редактор умеющий сохранять файлы в обычном текстовом формате. Таким редактором, например, являются Notepad (Блокнот), входящий в стандартные средства Windows. Итак, давайте рассмотрим основные элементы из которых состоит любая HTML страница. Для начала необходимо дать определение тега.
(слайд 7)HTML Тег:
Это специальное указание того как нужно отображать элемент (текст, картинка и т.п.) на странице. Можно рассматривать тег как команду содержащую название и параметры.
Тег выглядит следующим образом:
<ТЕГ>элемент страницы</ТЕГ>
(слайд8) Тэгов много, и они разные. Существуют обязательные и необязательные тэги, парные и одиночные (пояснения на примере) .Запишем замечание: если есть открывающий тэг, то должен быть и закрывающий (такая пара тэгов называется контейнером).
Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы сайта.(рисунок и текст на распечатках)
3993515262255Структура Web-страницы.
(слайд 9,10,11) Рассмотрим структуру HTML(раздает карточки с теоретическим материалом)
<html><head><title>Мой первый шаг </title></head><body> Здравствуйте, это моя первая страница. Добро пожаловать! :)</body></html>
<html> -небоЭтот тэг должен открывать документ. </html> - земля
<head> </head> - голова документа
<body> </body> - тело документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Например <title>- заголовок. Все тэги, расположенные между <body> </body> - непосредственное содержание документа, в котором можно менять цвет текста, фона, как делать текст крупнее-мельче, вставлять картинки, таблицы и многое другое<тэг> </тэг> - не просто тэг, это контейнер - тэг, который может содержать внутри себя другие тэги (и текст).
2774950397510Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY> <HTML><HEAD><ТITLE>Компьютер</ТITLE> </HEAD><BODY>Компьютер и ПО</BODY></HTML>
(слайд 12)Обратите внимание: (под запись)<тэг1><тэг2><тэг3> ... </тэг3></тэг2></тэг1> Только такая очередность закрывающих тэгов верна(подзапись как замечание) (слайд 13) тэг, который мы открыли первым - закрываем последним, второй – предпоследним и т.д.
-Верна ли очередность тэгов в данном примере?Доброе утро! 
-А как нужно расставить тэги, чтобы верна их последовательность?
(Слайд 13) (Показывает как выглядит страница сайта в IE и как выглядит этаже страница в редакторе)
(Слайд 14) Теги и атрибуты
Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы. Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров)
<body bgcolor = “red”>
(Слайд 15) Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “). Тег со всеми атрибутами желательно располагать на одной строке.
(Слайд 16) Параметры тега <body>
Bgcolor – изменяет цвет фона.
Цвет задается словом или кодом RGB
<body bgcolor = “red”>
<body bgcolor = “#FF0000”>
Text – задает цвет текста.
<body bgcolor = “red” text=“blue”>
Background – помещает в качестве фона изображение из файла с картинкой.
<body background = “dog.gif”>
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
Прежде чем приступить к практической работе, давайте с вами заполним таблицу
Вопрос Ответ
Что такое тег? Какие бывают теги? Что такое парный тег? Что такое атрибут? Какое должно быть имя главной страницы? Как должны располагаться файлы проекта? Какие программы нужны, чтобы создать weв-страницу? Внимательно слушают преподавателя, отвечают на его вопросы, по ходу делают записи в тетради
Работа студентов с карточками.
10
3
5 Практическая работа Создание простейшей Web-страницы Проведение практической Создание Web-страницы в текстовом редакторе Блокнот.
Цель этапа: учить применять полученные знания на практике.
-Теперь я вам предлагаю самим попробовать создать страничку сайта, используя тэги которые уже вам известны: создайте Web – страницу, задайте цвет фона и напишите приветствующие слова на ней.
-Давайте приступим к созданию Web-страницы.
Создание Web-страницы можно разбить на несколько этапов.(этапы на распечатках)
1. С помощью текстового редактора Блокнот создаем текстовый файл, содержащий команды языка HTML. Здесь можно использовать Блокнот. Обратите внимание, что файл должен быть сохранен в виде простого текстового документа (без оформления) и иметь расширение *.htm или *.html. Русские буквы должны быть набраны в кодировке Windows.
Все странички сайта сохраняются в одной специально созданной папке.
2. Открыть файл в браузере. Для этого можно использовать два способа
Открыть браузер, выбрать пункт меню Файл-Открыть и найти файл на диске.
Найти файл в Проводнике (или через Мой компьютер) и «открыть» его, щелкнув дважды по значку. При этом запускается браузер, установленный по умолчанию.
3.Чтобы внести изменения в страницу, можно выбрать команду Просмотр источника (или Просмотр в виде HTML) из меню Вид или контекстного меню, которое появляется при нажатии на правую кнопку мыши. При этом исходный файл откроется в Блокноте или WordPad-е (для браузера Opera). После изменения файл необходимо сохранить, перейти в окно браузера (с помощью панели задач) и обновить документ (нажав на F5 или кнопку обновления).
Выполняют практическую работу 20
6 Закрепление пройденного материала Цель этапа: закрепить полученные знания.
А теперь закрепим знания, полученные на уроке (используется ЭОР Создание простейшей Web-страницы)
Студенты работают с модулем 3
7 Рефлексия Цель этапа: подвести итоги урока.
Ребята, сегодня мы с вами познакомились с созданием простейших web-страниц. Возникали ли у Вас трудности при работе?
Учащимся раздаются таблицы для индивидуальной рефлексии:
Я Сейчас Хочу в будущем
Знаю (знать) Умею (уметь) Использую (использовать) Говорят, что нового узнали на уроке; высказываются о трудностях, возникших по ходу работы. 1
8 Оценочное суждение, домашнее задание Выставление оценок, задание на дом.
Учащиеся в классе делятся на четыре-пять групп (примерно по 3 ученика в каждой), дают название своей команды, выбирают тему проектного задания; Для эффективной работы в проектной группе предлагается распределить роли примерно следующим образом: руководитель группы – ответственный за рекламу, web-дизайнер, web-мастер; Перед каждой группой ставится задача – согласно полученному заданию необходимо определить функции веб- страницы, спроектировать карту веб-страницы, разработать внешний вид страниц, создать Web-страницу, используя выбранные инструментальные средства.
Паспорт проекта
Тема вашего проекта Срок реализации Авторы проекта Цель вашей веб-страницы (для чего?) Идеи вашей веб страницы (чем интересена?) Структура вашей веб- страницы (Разделы Ваших страниц) Этапы проекта Ожидаемый результат Слушают преподавателя, записывают домашнее задание 1