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

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

Карта урока
Деятельность учителя Деятельность учащегося УУД Действия по достижению запланированных результатов
Организационный этап.
Цели и задачи этапа:
- введение в атмосферу урока;
- создание условий для возникновения у учеников внутренней потребности включения в учебную деятельность на личностно-значимом уровне.
Мотивирует класс к активной деятельности на уроке Организация своего рабочего места. Эмоционально настраиваются на работу РУУД: Психологическая готовность учащихся к уроку, создание благоприятного микроклимата Здравствуйте!
Как называлась тема, которую мы изучали? (Коммуникационные технологии)
Какие сервисы сети Интернет вы знаете?
Назовите одну из самых популярных услуг Интернет? (WWW – всемирная паутина, которая позволяет просматривать Web - страницы)
2. Постановка цели и задач урока. Мотивация учебной деятельности учащихся.
Цели и задачи этапа:
- сформулировать задачи урока;
- организовать и направить к цели познавательную деятельность учащихся.
Организует учебную деятельность, ставит задачу урока. Воспринимают деятельностную учебную задачу. ПУУД - Применение обобщения для осмысления понятий HTML, активизация мыслительной деятельности.
ЛУУД - Развитие внимания, мышления. В настоящее время любой пользователь должен уметь представлять свою информацию в Интернет. Можно воспользоваться сервисами, например Ucoz, заполнить шаблоны web-страниц и не владея навыками web-конструирования получить web-сайт. Но этот сайт будет похож на множество других. Чтобы создавать оригинальные сайты, необходимо освоить навыки web-конструирования. Тема следующего раздела, с которым мы познакомимся, – «Web– конструирование». Сегодня на уроке мы с вами рассмотрим, как создаются web-страницы, каждый из вас создаст свою собственную web-страницу, пока простенькую, но затем мы узнаем больше секретов создания сайтов и будем их применять на своей странице.3. Актуализация знаний.
Цели и задачи этапа:
- организовать и направить к цели познавательную деятельность учащихся;
- обеспечить актуализацию субъектного опыта;
- повторение изученного материала и выявление затруднений учащегося.
Организует беседу по уточнению и конкретизации знаний. Побуждает к высказыванию своего мнения. Отвечает на вопросы учащихся.
Отмечает степень вовлеченности учащихся в работу на уроке. Отвечают на вопросы учителя.
Рассказывают о сервисе World Wide Web. ПУУД - Применение обобщения для осмысления понятия World Wide Web, активизация мыслительной деятельности.
КУУД - высказывание своего мнения. ЛУУД - Развитие внимания, мышления. Давайте рассмотрим структурную схему:
На основе какой технологии работает World Wide Web? (Клиент-сервер)
4239260-25273000Web-сервер – компьютер в сети Internet, хранящий Web-страницы и соответствующее программное обеспечение для работы с ними.
В виде чего информация представлена на web-серверах? (В виде web-сайта)
Что такое web-сайт? (Web-страницы, объединенные одной темой)
Какие виды информации могут содержаться на web-странице? (Текстовая, графическая, звуковая, видео). Web-страницы являются мультимедийными.
Как на web-сайте связаны web-страницы. (С помощью гиперссылок)
Для чего нужна гиперссылка? (Гиперссылка осуществляет переход от одной страницы к другой)
Как узнать, что странице есть гиперссылка? (Выделена другим цветом или указатель мыши на ссылке меняет свою форму)
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 является понятие тег. ТЕГ – инструкция браузеру, указывающая способ отображения информации.
3924527327983(контейнер)
00(контейнер)

Теги пишутся с использованием латинского алфавита.
Структура HTML – документа.
<HTML>
<HEAD>
Служебная информация
<TITLE> Название страницы, отображаемое в верхней строке браузера </TITLE>
</HEAD>
<BODY>
Содержание страницы
</BODY>
<HEAD>
Служебная информация
<TITLE> Название страницы, отображаемое в верхней строке браузера </TITLE>
</HEAD>
<BODY>
Содержание страницы
</BODY>

</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> — начало и конец «тела» документа (именно здесь, между этими тегами и располагается всё содержимое странички).
Текст, который не является тегами, просто отображается на страничке.
Посмотрим, что же мы сотворили:
сохраним изменения в документе — Файл → Сохранить. Приложение Блокнот не закрываем
перейдем в окно браузера и обновим страничку, нажав кнопку Обновить:
Впечатляет? Скорее всего, не очень. Мелковато, никакого оформления. Будем исправлять:
2816860-68262500прежде всего в головную часть добавим данные о заголовке нашей странички — тег <TITLE>:
<TITLE>Моя домашняя страничка</TITLE>
затем оформим текст как заголовок, используя теги <H1>, <H2>,… <H6> (эти теги «превращают» заключённый в них текст в заголовок, просто изменяя его размер и выделяя полужирным начертанием, начиная с <H1> — самого крупного и заканчивая <H6> — самым мелким. Поэкспериментируем и подберем наиболее подходящий для нашей странички размер заголовка): <H2>Здравствуйте! Меня зовут ... </H2>
продолжим рассказ о себе (приведённый в коде текст, конечно же, примерный, вы можете его изменить по своему усмотрению). В результате получаем такой (или почти такой) код:
<HTML>
<HEAD>
<TITLE>Моя домашняя страничка</TITLE>
</HEAD>
<BODY>
<H2>Здравствуйте! Меня зовут ...!</H2>
Я учусь в 8 классе Гимназии №6 города Воркуты.
Я люблю информатику, рисовать и ...
</BODY>
</HTML>
Сохраним файл и обновим его в браузере. Теперь лучше?
2884805-6477000Несмотря на то, что текст в коде разделён на абзацы, браузер его выводит одной строкой, за исключением заголовка. Более того, при изменении величины окна браузера текст «подстраивается» под его ширину, перенося неуместившиеся слова на новую строчку.
А как быть, если необходимо начать новую строку именно в этом месте, а не там, где закончится ширина окна браузера? Для этого служат два тега: тег <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. Рефлексия (подведение итогов занятия).
Цели и задачи этапа:
- проанализировать, дать оценку успешности достижения цели и наметить перспективу на будущее;
- организовать рефлексию и самооценку учениками собственной учебной деятельности.
Самооценка работы учащихся, предложения о возможных изменениях на последующих уроках
Стимуляция высказывания личного мнения об уроке и способах работы на нем. Оценивать свою деятельность, уровень. РУУД – оценивание и корректировка своей деятельности. Задание ученикам на рефлексию (осознание) их деятельности:
Что вы узнали сегодня на уроке?
Что вы чувствовали при изучении этой темы и выполнении заданий?
Что вам понравились, а что – нет?
Что бы вы дополнительно хотели изучить по этой теме?
Сегодня на уроке мы изучили не все возможности форматирования текста. На следующем уроке рассмотрим другие: шрифт, выравнивание и др.