Технологическая карта урока 11 класс " «Веб-сайт. Веб-страница. Взаимодействие браузера с веб-сервером. Динамические страницы. Разработка интернет-приложений (сайтов)»
план-конспект урока по информатике и икт (11 класс)
«Веб-сайт. Веб-страница. Взаимодействие браузера с веб-сервером. Динамические страницы. Разработка интернет-приложений (сайтов)»
Технологическая карта
Скачать:
Вложение | Размер |
---|---|
tk_veb-sayt.docx | 260.94 КБ |
Предварительный просмотр:
Технологическая карта урока
Предмет: Информатика и ИКТ
Класс: 11 класс
Тема урока: «Веб-сайт. Веб-страница. Взаимодействие браузера с веб-сервером. Динамические страницы. Разработка интернет-приложений (сайтов)».
Тип урока: Урок применения знаний, умений и навыков.
Форма урока: фронтальная работа с классом, компьютерный практикум.
Цели урока:
Формирование у обучающихся знания о Веб-сайтах, Веб-страницах, об основных правилах Веб-дизайна, закрепление и развитие знаний, умений и навыков создания простейшего Веб-сайта с использованием языка разметки гипертекста HTML
Задачи урока:
Обучающие: ввести понятие языка разметки гипертекста HTML; ввести понятие тэга, рассмотреть основные тэги языка разметки; сформировать представление о структуре web-страницы.
Развивающие: развивать навыки применения изученного материала на практике; развивать творческие способности обучающихся; развивать умение работать в малых группах.
Воспитательные: воспитывать интерес к предмету, учению; формировать представление обучающихся о профессиональной деятельности web-программистов; воспитывать доброжелательное отношение к чужому мнению.
Планируемые результаты:
Основные знания
Ученик должен знать/ понимать:
- набор необходимых инструментов для создания Web-страницы;
- структурные теги (название и назначение), HTML-код, гипертекст, web-страница.
Основные умения
Ученик должен уметь:
- самостоятельно составлять и планировать технологическую последовательность операций;
- уметь самостоятельно находить и использовать нужную информацию;
- пользоваться средствами языка HTML для написания страницы: создавать страницу, редактировать и форматировать Web-страницу.
Развитие навыков:
Ученик должен:
- приобрести навыки применения средств ИКТ в повседневной жизни, при выполнении индивидуальных и коллективных проектов в учебной деятельности, при дальнейшем освоении профессий, востребованных на рынке труда;
- приобрести навыки работы c HTML.
Развитие личностных качеств и психических процессов:
- Продуктивные формы деятельности: рефлексивность, активность, глубина рассуждений, аргументированность, аналитичность, точность, уместность, выразительность, самостоятельность, организованность, коммуникативная культура, культура эмоций, гибкость, любознательность, систематизация полученных знаний.
- Репродуктивные формы деятельности: внимание, память, мышление (логичность, понимание материала).
Технологии: Информационно – коммуникационная технология, технология критического мышления, технология проблемного обучения.
Приемы: работа за компьютером.
Оборудование: ноутбуки, ПК, тетрадь, учебник.
Описание этапов урока
Этапы урока | Время, мин | Задачи этапа | Деятельность учителя | Деятельность учащихся | Формируемые УУД | ||||||||||||
#1054;рганизационный этап. | 2 | Создание благоприятного климата на уроке. | Приветствую учащихся, проверяю готовность к учебному занятию, организую внимание детей. | Приветствуют учителя, проверяют наличие учебного материала на столах, организует свое рабочее место. | Коммуникативные: планирование учебного сотрудничества со сверстниками. Личностные: психологическая готовность учащихся к уроку, самоопределение. | ||||||||||||
2. Актуализация знаний. | 5 | Актуализация опорных знаний и способов действий. Формулирование темы и цели урока. | - Чтобы вспомнить основные определения с прошлых уроков по теме «Информационные ресурсы и сервисы Интернета» 1. Отгадайте кроссворд, сделанный в Google таблицах. Слово, получившееся в выделенных зеленым цветом ячейках, подскажет вам тему нашего урока. Google диск, таблица или файл Кроссворд.xlsx 2. Найдите определение этого слова в Интернете и перепишите его в тетрадь. 3. Попробуйте сформулировать тему урока и цели. Вопросы:
- Давайте проверим ответы - Какое слово мы получили после того как отгадали кроссворд? - прочитайте определение этого слова, которое вы нашли в Интернете. -Хорошо. Сегодня мы с вами познакомимся с языком гипертекстовой разметки документов HTML. - Исходя из определения, попробуйте сформулировать тему сегодняшнего урока. - И так тема урока «Веб-сайт. Веб-страница. Создание web-сайта» - Попробуйте сформулировать цель и задачи на урок. - У кого-нибудь есть вопросы по предстоящей работе? - Тема «Создание Web-страницы» – одна из наиболее практически значимых, востребованных, так как умение создавать web-сайты становится все более актуальным навыком пользователя Интернета. | Работают за компьютерами в Google таблицах. Отвечают на вопросы. Находят в Интернете определение слова “Html”. Формулируют тему урока и цели устно. Предполагаемый ответ: html Предполагаемый ответ: HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. (из Википедии) Формулируют тему урока, Смотрят на слайд, записывают дату и тему в тетрадь Формулируют цель и задачи урока. | Коммуникативные: - умение слушать, вступать в диалог. Регулятивные: - планирование своей деятельности, целеполагание. | ||||||||||||
3. Введение нового материала. | 20 | Объяснение нового материала | Цель этапа: формировать знания учащихся по теме «Основы языка HTML». - Вы уже выписали определение «html», давайте посмотрим еще на несколько терминов относящихся к теме нашего занятия :
Из чего состоит Web-сайт? Давайте посмотрим видеоролик - Обратите внимание, какое слово повторяется практически в каждом определении? - То есть специальный команды, которые делают обычный текст веб-страничкой. - Выпишите из учебника (стр. 165) определение «тега» и запишите в виде схемы «Способы создания сайтов». Тег выглядит следующим образом: <ТЕГ>элемент страницыТЕГ> Тэгов много, и они разные. Существуют обязательные и необязательные тэги, парные (контейнер) и одиночные (пояснения на примере). Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы сайта. Структура Web-страницы.- Рассмотрим структуру HTML.
-небо - голова документа - тело документа Все тэги, расположенные между , это что-то вроде служебной информации. Например, Обратите внимание: <тэг1><тэг2><тэг3> ... тэг3>тэг2>тэг1> Разбиение текста на абзацы, как это делается в обычном текстовом редакторе, не характерно для web-страниц, в результате текст будет выглядеть как один абзац. В HTML перед началом каждого нового абзаца ставится тэг <р>, он является парным. Для тэга абзаца характерен атрибут выравнивания ALIGN: по центру (CENTER); по левому краю (LEFT); по правому краю (RIGHT); по ширине (JUSTIFY). Тэг <р align=”left”> обеспечит выравнивание текста абзаца по левому краю. Его используют для оформления коротких заголовков. Заголовки (Headings) Обозначаются прописной или строчной латинской буквой h. Цифра после буквы показывает уровень заголовка (всего их может быть шесть). Как и любой текст, заголовки можно выравнивать по левому или правому краю, по центру, по ширие. Например:
Я живу в Оренбурге
Я учусь в «Школе»
Мои увлечения – музыка, спорт
Мои друзья учатся со мной в классе р> Текст (Шрифт) Как и в текстовом редакторе, текст можно отформатировать, задать размер, цвет, тип шрифта. Для форматирования шрифта текст заключается в тэги и . Атрибутами тэга фонт являются: FACE – тип шрифта. Например, FACE=”Times New Roman” SIZE – размер. Размер шрифта измеряется в диапазоне 1-7, где 7 – самый крупный шрифт Color – цвет. Цвет может быть задан одним из двух способов: 1. Указанием цвета на английском языке, например, red, blue, yellow, tomato. 2. Указанием 16-ричного кода цвета в формате RGB, например, Тэгом можно выделять произвольные фрагменты текста: одно слово в абзаце, весь абзац целиком. Порядок тэгов и можно менять местами. Так, например, если необходимо применить одинаковое форматирование шрифта для нескольких абзацев, то рациональнее открыть тэг перед первым абзацем, а закрыть после последнего. Фрагмент текста можно выделить полужирным шрифтом (Bold). Отдельные слова можно подчеркнуть (Underline). Часто для выделения используют курсивный шрифт (Italic). жирный курсив подчеркнутый жирный курсивный текст | Слушают внимательно учителя и конспектируют важные моменты. Отвечают на вопросы, спрашивают, если что-то не понятно. Смотрят видеоролик | Познавательные: извлечение необходимой информации из сказанного учителем. Регулятивные: планирование своей деятельности для решения поставленной задачи, контроль полученного результата, коррекция полученного результата Личностные: развитие внимания, зрительной и слуховой памяти, возможность самостоятельно осуществлять деятельность | ||||||||||||
4. Первичное закрепление (практическая работа) | 12 | Закрепить полученный материал | Проведение практической Создание Web-страницы в текстовом редакторе Блокнот. Цель этапа: научить применять полученные знания на практике. - Теперь я вам предлагаю самим попробовать создать страничку сайта о себе, используя тэги, которые уже вам известны. Создание Web-страницы можно разбить на несколько этапов. 1. С помощью текстового редактора Блокнот создаем текстовый файл, содержащий команды языка HTML. Обратите внимание, что файл должен быть сохранен в виде простого текстового документа (без оформления) и иметь расширение *.html. Все странички сайта сохраняются в одной специально созданной папке. 2. Открыть файл в браузере. ЩПКМ открыть с помощью … Google Chrome. 3. Чтобы внести изменения в страницу ЩПКМ открыть с помощью … Блокнота. После изменения файл необходимо сохранить, перейти в окно браузера (с помощью панели задач) и обновить документ (нажав на F5 или кнопку обновления).
- Давайте приступим к созданию Web-страницы (раздаю «Ход практической работы «Создание web-сайта» ) (дать пояснения, помогать учащимся). Разместите на главной страничке фотографию, текст приветствие и ссылку на вашу страничку в любой соц. Сети . Сохраните папку с сайтом на рабочем столе и к себе на флэшки, на след. Уроке мы продолжим работать с этим сайтом. | Выполняют практическую работу | Познавательные: выбор наиболее эффективных способов выполнения практической работы Личностные: формирование умений внедрять таблицы, списки в текст, создавать простые веб-страницы | ||||||||||||
5. Итог урока, рефлексия | 4 | информация о домашнем задании.
| Цель этапа: подвести итоги урока. Ребята, сегодня мы с вами познакомились с созданием простейших web-страниц. Возникали ли у Вас трудности при работе? Какое задание понравилось выполнять больше? - Является ли данная тема для вас полезной? - Как в дальнейшем вы можете применить полученные знания? Учащиеся выборочно отвечают
| Подводят итог урока, отвечают на вопросы. Говорят, что нового узнали на уроке; высказываются о трудностях, возникших по ходу работы. | Познавательные: контроль и оценка процесса и результатов деятельности. Личностные: умение подвести итог, оценить свою работу. | ||||||||||||
6. Оценочное суждение, домашнее задание | 2 | Самооценка | Выставление оценок, задание на дом. - В Google таблице «Кроссворд.xlsx» перейдите на лист «Оценки» и напротив своей фамилии в первую колонку (Как я оцениваю свою работу на уроке) поставьте себе оценку. Затем я оценю вашу работу и среднюю оценку поставлю в журнал.
Домашнее задание
Принести на следующий урок разработанную структуру сайта и шаблон своей страницы (на листе А4), а также весь необходимый материал на флэшке (текст, изображения и т.д.) | Слушают преподавателя, оценивают свою работу на уроке, записывают домашнее задание | Личностные: самосознание, рефлексия. Коммуникативные: оформление своих мыслей в письменной речи. Регулятивные: извлекать информацию, ориентироваться в своей системе знаний. Познавательные: уметь передать содержание в сжатом, выборочном виде. |
По теме: методические разработки, презентации и конспекты
Технологическая карта урока как современная форма планирования педагогического взаимодействия учителя и учащихся
Технологическая карта урока - это новый вид методической продукции, обеспечивающей эффективное и качественное преподавание учебных курсов в школе и возможност...
Технологическая карта урока, как современная форма планирования педагогического взаимодействия учителя и ученика, в соответствии с требованиями ФГОС.
С 1 сентября 2011 года образование в России перешло на Федеральный государственный образовательный стандарт второго поколения. Высказывание А. Дистервега о том, что «Развитие и образование ни од...
К Урок Класс Пресмыкающиеся, или Рептилии. Технологическая карта урока Класс Пресмыкающиеся, или Рептилии. Общая характеристика, образ жизни, значение.doc
Урок Класс Пресмыкающиеся, или Рептилии. Технологическая карта урока Класс Пресмыкающиеся, или Рептилии. Общая характеристика, образ жизни, значение.doc...
Технологическая карта урока "Класс Двудольные. Семейство Пасленовые" 6 класс
Класс6Тип урокаУрок открытия нового знанияТехнология построения урокаУрок-исследованиеТемаСемейство Пасленовые....
ТЕХНОЛОГИЧЕСКАЯ КАРТА УРОКА Класс: 7 Тема: «Was nennen wir unsere Heimat?» / «Что мы называем Родиной?»
формирование коммуникативной компетенции учащихся на основе изученных лексических единиц, речевых и грамматических структур по теме «Что мы называем своей Родиной» («Was nennen wir u...
Технологическая карта урока " Класс Млекопитающие, или Звери. Отряды: Однопроходные, Сумчатые, Насекомоядные, Рукокрылые" (7 класс)
Технологическая карта урока " Класс Млекопитающие, или Звери. Отряды: Однопроходные, Сумчатые, Насекомоядные, Рукокрылые" (7 класс).УМК :Биология. Животные. 7 класс: учебник для общеобразова...