Технологическая карта урока по теме «Основы HTML»

Технологическая карта урока

«Основы языка разметки гипертекста HTML»

Цели	Образовательные: дать представление о технологии создания сайта с использованием языка разметки гипертекста, активизировать познавательную активность, выработать умение использовать язык разметки гипертекста для представления данных различного типа. Развитие логического мышления: умений сравнивать, сопоставлять, анализировать, делать вывод. Способствовать развитию памяти, произвольного внимания. Воспитательные:  вовлечь в активную практическую деятельность. Формировать УУД: - Личностные: способность к самооценке на основе критерия успешности учебной деятельности. - Регулятивные УУД: умение определять и формулировать цель, воспитывать у учащихся самостоятельность, активность, интерес к предмету, способствовать формированию мотивации к изучению информатики. - Коммуникативные УУД: продолжить формирование навыков участия в учебном диалоге, сотрудничества в совместном решении проблемы, планирования (определение цели, функций участников, способов взаимодействия). - Познавательные УУД: умение ориентироваться в своей системе знаний: отличать новое от уже известного, продолжить формирование навыков обсуждения проблемных вопросов, применения обобщений.
Планируемый результат	Предметные: знания о технологии создания сайта с использованием HTML; навыки выбора способа представления данных в зависимости от постановленной задачи, умение использовать готовые прикладные компьютерные программы и сервисы в выбранной специализации. Личностные: уметь проводить самооценку на основе критерия успешности учебной деятельности, формирование ответственного отношения к учению, готовности и способности обучающихся к саморазвитию и самообразованию на основе мотивации к обучению и познанию. Метапредметные: Уметь определять и формулировать цель на уроке с помощью учителя, владение основами принятия решений и осуществления осознанного выбора в учебной и познавательной деятельности (Регулятивные УУД). Уметь оформлять свои мысли в устной форме; слушать и понимать речь других (Коммуникативные УУД). Уметь ориентироваться в своей системе знаний: отличать новое от уже известного; развивать мотивы и интересы своей познавательной деятельности (Познавательные УУД). Формирование и развитие компетентности в области ИКТ-компетенции.
Основные понятия	Web-сайт, Web-страница, HTML, тэг, контейнер, атрибут тэга, значение атрибута тэга
Ресурсы:	- Угринович Н. Д.,  Информатика и ИКТ: Учебник для 8-го класса; - персональные компьютеры на рабочих местах учащихся; - программное обеспечение Текстовый редактор  Блокнот - программное обеспечение Браузер (Internet Explorer, Mozilla Firefox, Opera, Google Chrome – на выбор учащихся) - система управления классом iTalc; - мультимедийный проектор, экран; - справочный материал о тегах HTML (текстовый документ в рабочих папках учащихся) - презентация по теме урока.
Организация пространства	Фронтальная и индивидуальная работа.
Тип урока	Урок первичного предъявления новых знаний.

Карта   урока

Деятельность учителя	Деятельность учащегося	УУД	Действия по достижению запланированных результатов
1.                  Организационный этап. Цели и задачи этапа: - введение в атмосферу урока; - создание условий для возникновения у учеников внутренней потребности включения в учебную деятельность на личностно-значимом уровне.
Мотивирует класс к активной деятельности на уроке	Организация  своего рабочего  места. Эмоционально настраиваются  на работу	РУУД: Психологическая готовность учащихся к уроку, создание благоприятного микроклимата	Здравствуйте! Как называлась тема, которую мы изучали? (Коммуникационные технологии) •        Какие сервисы сети Интернет вы знаете? •        Назовите одну из самых популярных услуг Интернет? (WWW – всемирная паутина, которая позволяет просматривать Web - страницы)
2. Постановка цели и задач урока. Мотивация учебной деятельности учащихся. Цели и задачи этапа: - сформулировать задачи урока; - организовать и направить к цели познавательную деятельность учащихся.
Организует учебную деятельность, ставит  задачу урока.	Воспринимают деятельностную учебную задачу.	ПУУД - Применение  обобщения для осмысления понятий HTML, активизация мыслительной деятельности. ЛУУД - Развитие внимания, мышления.	В настоящее время любой пользователь должен уметь представлять свою информацию в Интернет. Можно воспользоваться сервисами, например Ucoz, заполнить шаблоны web-страниц и не владея навыками web-конструирования получить web-сайт. Но этот сайт будет похож на множество других. Чтобы создавать оригинальные сайты, необходимо освоить навыки web-конструирования.  Тема следующего раздела, с которым мы познакомимся, – «Web– конструирование». Сегодня на уроке мы  с вами рассмотрим, как создаются web-страницы, каждый из вас создаст свою собственную web-страницу, пока простенькую, но затем мы узнаем больше секретов создания сайтов и будем их применять на своей странице.
3. Актуализация знаний. Цели и задачи этапа: - организовать и направить к цели познавательную деятельность учащихся; - обеспечить актуализацию субъектного опыта; - повторение изученного материала и выявление затруднений учащегося.
Организует беседу по уточнению и конкретизации знаний. Побуждает к высказыванию своего мнения. Отвечает на вопросы учащихся. Отмечает степень вовлеченности учащихся в работу на уроке.	Отвечают на вопросы учителя. Рассказывают о сервисе World Wide Web.	ПУУД - Применение  обобщения для осмысления понятия World Wide Web, активизация мыслительной деятельности. КУУД - высказывание своего мнения. ЛУУД - Развитие внимания, мышления.	Давайте рассмотрим структурную схему: 1)      На основе какой технологии работает World Wide Web? (Клиент-сервер) Web-сервер – компьютер в сети Internet, хранящий Web-страницы и соответствующее программное обеспечение для работы с ними. 2)      В виде чего информация представлена на web-серверах? (В виде web-сайта) 3)      Что такое web-сайт? (Web-страницы, объединенные одной темой) 4)      Какие виды информации могут содержаться на web-странице? (Текстовая, графическая, звуковая, видео). Web-страницы являются мультимедийными. 5)      Как на web-сайте связаны web-страницы. (С помощью гиперссылок) 6)      Для чего нужна гиперссылка? (Гиперссылка осуществляет переход от одной страницы к другой) 7)      Как узнать, что странице есть гиперссылка? (Выделена другим цветом или указатель мыши на ссылке меняет свою форму)
4. Первичное усвоение новых знаний Цели и задачи этапа: - изложение учебного материала по намеченному плану; - организация работы учащихся по восприятию, осмыслению и усвоению учебного материала. -  обеспечить усвоение знаний и способов действий.
Последовательное изложение учебного материала по намеченному плану; организация работы учащихся по восприятию, осмыслению и усвоению учебного материала. Организация усвоения новых знаний, новых понятий: HTML, тэг, контейнер. Объясняет алгоритм работы над web-страницей. Организует демонстрацию работы над web-страницей на экран с помощью проектора.	Восприятие, осмысление и усвоению учебного материала. Усвоение знаний:  HTML, тэг, контейнер, атрибут тэга, значение атрибута тэга Восприятие способов работы с кодом web-страницы	ПУУД – построение логической цепочки действий по достижению результата, анализ с целью выделения признаков, синтез как составление целого из частей.	Что нужно сделать, чтобы создать web-страницу? Для того чтобы создать web-страницу нужно написать код. Для создания кода мы будем использовать 2 приложения: 1. Блокнот (для создания текста программ,  Пуск – Все программы – Стандартные – Блокнот). 2. Браузер (для просмотра созданных web-cтраниц). Технология создания Web – страницы: 1. Набор текста программы. 2. Сохранение программы с расширением  *.htm  или  *.html. 3. Запуск и просмотр в браузере. Для создания web-страниц используется специальный язык, красиво и звучно названный Hyper Text Markup Language — язык гипертекстовой разметки, или коротко HTML. Прежде чем начать писать программу на языке HTML, мы познакомимся с основами языка HTML. Тема урока: “ Основы HTML. Форматирование текста на web-страницах ”. Основным понятием языка HTML является понятие тег. ТЕГ – инструкция браузеру, указывающая способ отображения информации. Теги пишутся с использованием латинского алфавита. Структура HTML – документа. <HTML> </HTML> HTML-код страницы помещается внутрь контейнера <HTML></HTML>. Без этих тэгов браузер не сможет определить формат документа и правильно его интерпретировать.    Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> и содержит название страницы и справочную информацию о странице (например тип кодировки).  Название страницы помещается в контейнер <TITLE> </TITLE> и при просмотре отображается в верхней строке окна браузера. Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY>. Создадим пробную web-страницу Для создания кода нашего сайта нам понадобится рабочая папка, в которую будут помещаться все файлы: Откроем папку Мои документы (Пуск → Мои документы). В папке Мои документы создадим свою папку с именем Фамилия Имя класс (вы должны указать свою фамилию, имя и класс) (для создания папки: вызвать щелчком правой кнопки мыши контекстное меню → Создать → Папку... ). Откроем созданную папку. В своей папке создадим папку с именем  my_site; Откроем стандартную программу Блокнот (Пуск → Все программы → Стандартные → Блокнот) Сохраним в своей папке  my_site документ, которому дадим имя index.html (Файл → Сохранить как → Папка:  my_site, Тип файла: Все файлы,  Имя файла: index.html). Закроем программу Блокнот. Откроем созданный файл  index.html в браузере Internet Explorer (для этого щелкнем правой кнопкой мыши на значке файла и выберите команду Открыть с помощью → Internet Explorer). Мы создали файл с расширением .html, а такое расширение сообщает операционной системе, что файл является web-страничкой и открывать её надо в специальной программе – браузере. В открывшемся окне браузера вы видите пустую страницу. И, думаю, это вас не удивляет — мы ведь ещё не написали ни одной строчки кода. Дальнейшее редактирование  будем осуществлять в браузере (выбираем пункт контекстного меню Просмотр HTML-кода или пункт меню Вид → Просмотр HTML-кода). Документ откроется в Блокноте. Наконец-то можно написать первые строчки кода: <HTML> <HEAD> </HEAD> <BODY>     Здравствуйте! Меня зовут ...! </BODY> </HTML> Как видите, html-код состоит из особых слов — тегов, заключённых в угловые скобки < и >. Каждый тег имеет свой смысл: <HTML> — начало html-документа; <HEAD> — начало «головной» части — в ней записывается служебная информация; </HEAD> — конец «головной» части (закрывающий тег отличается от открывающего наличием слэша (знак /) и присутствует почти у всех тегов); <BODY> и </BODY> — начало и конец «тела» документа (именно здесь, между этими тегами и располагается всё содержимое странички). Текст, который не является тегами, просто отображается на страничке. Посмотрим, что же мы сотворили: сохраним изменения в документе — Файл → Сохранить. Приложение Блокнот не закрываем перейдем в окно браузера и обновим страничку, нажав кнопку Обновить: Впечатляет? Скорее всего, не очень. Мелковато, никакого оформления. Будем исправлять: прежде всего в головную часть добавим данные о заголовке нашей странички — тег <TITLE>: <TITLE>Моя домашняя страничка</TITLE> затем оформим текст как заголовок, используя теги <H1>, <H2>,… <H6> (эти теги «превращают» заключённый в них текст в заголовок, просто изменяя его размер и выделяя полужирным начертанием, начиная с <H1> — самого крупного и заканчивая <H6> — самым мелким. Поэкспериментируем и подберем наиболее подходящий для нашей странички размер заголовка): <H2>Здравствуйте! Меня зовут ... </H2> продолжим рассказ о себе (приведённый в коде текст, конечно же, примерный, вы можете его изменить по своему усмотрению). В результате получаем такой (или почти такой) код: <HTML> <HEAD>       <TITLE>Моя домашняя страничка</TITLE> </HEAD> <BODY>       <H2>Здравствуйте! Меня зовут ...!</H2>       Я учусь в 8 классе Гимназии №6 города Воркуты.       Я люблю информатику, рисовать и ... </BODY> </HTML> Сохраним файл и обновим его в браузере. Теперь лучше?   Несмотря на то, что текст в коде разделён на абзацы, браузер его выводит одной строкой, за исключением заголовка. Более того, при изменении величины окна браузера текст «подстраивается» под его ширину, перенося неуместившиеся слова на новую строчку. А как быть, если необходимо начать новую строку именно в этом месте, а не там, где закончится ширина окна браузера? Для этого служат два тега: тег <BR> начинает новую строку, а тег <P> — новый абзац. Отличаются они тем, что тег <P> не только начинает выводить текст с новой строки, но и добавляет перед этой строкой межстрочный интервал значительной ширины. Кроме этого, в теге <P> можно задать дополнительное форматирование, но об этом чуть позже. Замечание: для тега <P> закрывающий тег </P> необязателен, а у <BR> его и вовсе нет. Поэкспериментируем на своей страничке, вставляя теги <P> и <BR> в самые разные места текста, а затем приведем страничку к цивильному виду, правильно разделив текст на абзацы. И в заключение выделим текст, используя теги <B> </B> — полужирное начертание и <I> </I> — курсив. И наш код принимает такой вид: <HTML> <HEAD>     <TITLE>Моя домашняя страничка</TITLE> </HEAD> <BODY>     <H2>Здравствуйте! Меня зовут ...</H2>     <P>Я учусь в 8 классе Гимназии №6 города Воркуты.     <P>Я <B>люблю</B> <I>информатику</I>, рисовать и … </BODY> </HTML> И в заключение заметим, что теги можно вкладывать друг в друга, например – внутрь тега <I> вложить три тега <B>.
4. Первичная проверка понимания Цели и задачи этапа: - первичная проверка изученного материала; - установление правильности и осознанности усвоения нового учебного материала; выявление пробелов и неверных представлений и их коррекция.
Первичная проверка изученного материала. Задает вопросы с выбором ответа.	Отвечают на вопросы, высказывают предположения.	ПУУД – построение логической цепочки действий по достижению результата, анализ с целью выделения признаков. РУУД – оценивание  и корректировка своей деятельности. КУУД – умение выслушать товарища, высказывать свое мнение.	1. HTML (HYPER TEXT MARKUP LANGUAGE) является: а) Одним из средств при создании Web-страниц б) Системой программирования в) Графическим редактором г) Системой управления базами данных 2. Инструкция браузеру, указывающая способ отображения текста: а) Программный код б) Тэг в) Файл г) Кегль 3. Программа для создания Web-страницы с использованием языка HTML: а) MS Word б) Paint в) Калькулятор г) Блокнот 4. Web-страница (документ HTML) представляет собой: а) Текстовый файл с расширением txt или doc б) Текстовый файл с расширением htm или html в) Двоичный файл с расширением com или exe г) Графический файл с расширением gif или jpg 5. Тэг - это: а) Инструкция браузеру, указывающая способ отображения текста б) Текст, в котором используются спецсимволы в) Указатель на другой файл или объект г) Фрагмент программы, включённой в состав Web-страницы 6. Какие тэги указывают браузеру, что это HTML документ? а) <body></body> б) <title></title> в) <p></p> г) <html></html> 7. Какие теги определяют видимую часть документа? а) <body></body> б) <p></p> в) <html></html> г) <title></title> 8. Какие тэги помещают название документа в оглавление программы просмотра web-страниц? а) <title></title> б) <body></body> в) <h1></h1> г) <img src=”name”> 9. Какие тэги создают абзац в документе? а) <p></p> б) <body></body> в) <img src=”name”> г) <html></html>
4.Первичное закрепление. Практическая работа Цели и задачи этапа: - обеспечить усвоение новых знаний и способов действий на уровне применения в измененной ситуации. - научить самостоятельно решать поставленную задачу.
Обобщение и первичное закрепление основных знаний по изучаемой теме. Организация практической работы. Объясняет необходимость внимательной работы.	Самостоятельное выполнение задания, требующего применения знаний в знакомой и измененной ситуации. Выполняют практическую работу.	РУУД – Определение последовательности промежуточных целей с учетом конечного результата, оценивание  и корректировка своей деятельности.	Задание: Используя рассмотренный пример, создайте свою web-страницу, включающую текст с различным форматированием: заголовок, полужирный, курсив и полужирный курсив. При выполнении задания можно воспользоваться справочным материалом по структуре web-страницы и тегам.
5. Представление промежуточных результатов работы. Цели и задачи этапа: - представить и проанализировать промежуточные результаты работы, наметить шаги по доработке проекта;
Организует демонстрацию выполненных заданий на экран с помощью проектора, используя систему управления классом iTalc.	Представляют созданные Web-страницы, анализируют промежуточные результаты работы, намечают шаги по доработке проекта.	РУУД – корректировка своей деятельности. КУУД – умение оформлять свои мысли в устной форме; слушать и понимать речь других.	Время на выполнение работы на уроке вышло. Давайте представим предварительные результаты. Расскажите, что представлено на ваших страницах, и что было использовано. Выскажите предложения по доработке web-страницы.
6. Информация о домашнем задании, инструктаж о его выполнении. Цели и задачи этапа: - сообщить о домашнем задании на более глубокое закрепление изученного материала, разъяснить методику его выполнения; - повышение интереса к домашнему заданию.
Объяснение содержания работы, приемов и последовательности ее выполнения.	Восприятие содержания работы, приемов и последовательности ее выполнения.	ЛУУД - Выработка ответственности за организацию порученного дела.	Изучить текст учебника (п. 3.7.1–3.7.3), ответить на контрольные вопросы, продумать структуру и содержательное наполнение своего будущего личного сайта.
7. Рефлексия (подведение итогов занятия). Цели и задачи этапа: - проанализировать, дать оценку успешности достижения цели и наметить перспективу на будущее; - организовать рефлексию и самооценку учениками собственной учебной деятельности.
Самооценка работы учащихся, предложения о возможных изменениях на последующих уроках Стимуляция высказывания личного мнения об уроке и способах работы на нем.	Оценивать   свою деятельность, уровень.	РУУД – оценивание  и корректировка своей деятельности.	Задание ученикам на рефлексию (осознание) их деятельности: -          Что вы узнали сегодня на уроке? -          Что вы чувствовали при изучении этой темы и выполнении заданий? -          Что вам понравились, а что – нет? -          Что бы вы дополнительно хотели изучить по этой теме? Сегодня на уроке мы изучили не все возможности форматирования текста. На следующем уроке рассмотрим другие: шрифт, выравнивание и др.