7


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

Технологическая карта урока по теме «Основы 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-страницы и соответствующее программное обеспечение для работы с ними.

  1. В виде чего информация представлена на web-серверах? (В виде web-сайта)

  2. Что такое web-сайт? (Web-страницы, объединенные одной темой)

  3. Какие виды информации могут содержаться на web-странице? (Текстовая, графическая, звуковая, видео). Web-страницы являются мультимедийными.

  4. Как на web-сайте связаны web-страницы. (С помощью гиперссылок)

  5. Для чего нужна гиперссылка? (Гиперссылка осуществляет переход от одной страницы к другой)

  6. Как узнать, что странице есть гиперссылка? (Выделена другим цветом или указатель мыши на ссылке меняет свою форму)


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 - документа.

<HEAD>

Служебная информация

<TITLE> Название страницы, отображаемое в верхней строке браузера TITLE>

HEAD>


<BODY>

Содержание страницы

HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не сможет определить формат документа и правильно его интерпретировать.

Заголовок Web-страницы заключается в контейнер и содержит название страницы и справочную информацию о странице (например тип кодировки).

Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.

Отображаемое в браузере содержание страницы помещается в контейнер .

Создадим пробную web-страницу

  • Для создания кода нашего сайта нам понадобится рабочая папка, в которую будут помещаться все файлы:

    • Откроем папку Мои документы (Пуск → Мои документы).

    • В папке Мои документы создадим свою папку с именем Фамилия Имя класс (вы должны указать свою фамилию, имя и класс) (для создания папки: вызвать щелчком правой кнопки мыши контекстное меню → Создать → Папку... ).

    • Откроем созданную папку.

    • В своей папке создадим папку с именем my_site;

    • Откроем стандартную программу Блокнот (Пуск → Все программы → Стандартные → Блокнот)

    • Сохраним в своей папке my_site документ, которому дадим имя index.html (Файл → Сохранить как → Папка: my_site, Тип файла: Все файлы, Имя файла: index.html).

    • Закроем программу Блокнот.

  • Откроем созданный файл index.html в браузере Internet Explorer (для этого щелкнем правой кнопкой мыши на значке файла и выберите команду Открыть с помощью → Internet Explorer).

Мы создали файл с расширением .html, а такое расширение сообщает операционной системе, что файл является web-страничкой и открывать её надо в специальной программе - браузере.

  • В открывшемся окне браузера вы видите пустую страницу. И, думаю, это вас не удивляет - мы ведь ещё не написали ни одной строчки кода.

  • Дальнейшее редактирование будем осуществлять в браузере (выбираем пункт контекстного меню Просмотр HTML-кода или пункт меню Вид → Просмотр HTML-кода).

  • Документ откроется в Блокноте.

  • Наконец-то можно написать первые строчки кода:

Здравствуйте! Меня зовут ...!

BODY>

HTML>

Как видите, html-код состоит из особых слов - тегов, заключённых в угловые скобки < и >. Каждый тег имеет свой смысл:

- начало html-документа;

- начало «головной» части - в ней записывается служебная информация;

- конец «головной» части (закрывающий тег отличается от открывающего наличием слэша (знак /) и присутствует почти у всех тегов);

и - начало и конец «тела» документа (именно здесь, между этими тегами и располагается всё содержимое странички).

Текст, который не является тегами, просто отображается на страничке.

  • Посмотрим, что же мы сотворили:

    • сохраним изменения в документе - Файл → Сохранить. Приложение Блокнот не закрываем

    • перейдем в окно браузера и обновим страничку, нажав кнопку Обновить:


  • Впечатляет? Скорее всего, не очень. Мелковато, никакого оформления. Будем исправлять:

    • прежде всего в головную часть добавим данные о заголовке нашей странички - тег :

Моя домашняя страничка

    • затем оформим текст как заголовок, используя теги, ,… (эти теги «превращают» заключённый в них текст в заголовок, просто изменяя его размер и выделяя полужирным начертанием, начиная с - самого крупного и заканчивая - самым мелким. Поэкспериментируем и подберем наиболее подходящий для нашей странички размер заголовка):

Здравствуйте! Меня зовут ...
    • продолжим рассказ о себе (приведённый в коде текст, конечно же, примерный, вы можете его изменить по своему усмотрению). В результате получаем такой (или почти такой) код:

Моя домашняя страничкаЗдравствуйте! Меня зовут ...!

Я учусь в 8 классе Гимназии №6 города Воркуты.

Я люблю информатику, рисовать и ...

  • Сохраним файл и обновим его в браузере. Теперь лучше?

Несмотря на то, что текст в коде разделён на абзацы, браузер его выводит одной строкой, за исключением заголовка. Более того, при изменении величины окна браузера текст «подстраивается» под его ширину, перенося неуместившиеся слова на новую строчку.

А как быть, если необходимо начать новую строку именно в этом месте, а не там, где закончится ширина окна браузера? Для этого служат два тега: тег
начинает новую строку, а тег - новый абзац. Отличаются они тем, что тег не только начинает выводить текст с новой строки, но и добавляет перед этой строкой межстрочный интервал значительной ширины. Кроме этого, в теге можно задать дополнительное форматирование, но об этом чуть позже.

Замечание: для тегазакрывающий тег необязателен, а у
его и вовсе нет.

  • Поэкспериментируем на своей страничке, вставляя тегии
    в самые разные места текста, а затем приведем страничку к цивильному виду, правильно разделив текст на абзацы.

  • И в заключение выделим текст, используя теги - полужирное начертание и - курсив. И наш код принимает такой вид:

Моя домашняя страничка

Здравствуйте! Меня зовут ...

Я учусь в 8 классе Гимназии №6 города Воркуты.Я люблю информатику, рисовать и …



И в заключение заметим, что теги можно вкладывать друг в друга, например - внутрь тега вложить три тега .

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 документ?

а)

б)

в)

г)

7. Какие теги определяют видимую часть документа?

а)

б)

в)

г)

8. Какие тэги помещают название документа в оглавление программы просмотра web-страниц?

а)

б)

в)

г)

9. Какие тэги создают абзац в документе?

а)

б)

в)

г)


4.Первичное закрепление. Практическая работа

Цели и задачи этапа:

- обеспечить усвоение новых знаний и способов действий на уровне применения в измененной ситуации.

- научить самостоятельно решать поставленную задачу.

Обобщение и первичное закрепление основных знаний по изучаемой теме. Организация практической работы.

Объясняет необходимость внимательной работы.


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

РУУД -

Определение последовательности промежуточных целей с учетом конечного результата,

оценивание и корректировка своей деятельности.


Задание: Используя рассмотренный пример, создайте свою web-страницу, включающую текст с различным форматированием: заголовок, полужирный, курсив и полужирный курсив. При выполнении задания можно воспользоваться справочным материалом по структуре web-страницы и тегам.



5. Представление промежуточных результатов работы.

Цели и задачи этапа:

- представить и проанализировать промежуточные результаты работы, наметить шаги по доработке проекта;

Организует демонстрацию выполненных заданий на экран с помощью проектора, используя систему управления классом iTalc.

Представляют созданные Web-страницы, анализируют промежуточные результаты работы, намечают шаги по доработке проекта.

РУУД - корректировка своей деятельности.

КУУД - умение оформлять свои мысли в устной форме; слушать и понимать речь других.

Время на выполнение работы на уроке вышло. Давайте представим предварительные результаты. Расскажите, что представлено на ваших страницах, и что было использовано.

Выскажите предложения по доработке web-страницы.

6. Информация о домашнем задании, инструктаж о его выполнении.

Цели и задачи этапа:

- сообщить о домашнем задании на более глубокое закрепление изученного материала, разъяснить методику его выполнения;

- повышение интереса к домашнему заданию.

Объяснение содержания работы, приемов и последовательности ее выполнения.

Восприятие содержания работы, приемов и последовательности ее выполнения.

ЛУУД - Выработка ответственности за организацию порученного дела.

Изучить текст учебника (п. 3.7.1-3.7.3), ответить на контрольные вопросы, продумать структуру и содержательное наполнение своего будущего личного сайта.


7. Рефлексия (подведение итогов занятия).

Цели и задачи этапа:

- проанализировать, дать оценку успешности достижения цели и наметить перспективу на будущее;

- организовать рефлексию и самооценку учениками собственной учебной деятельности.

Самооценка работы учащихся, предложения о возможных изменениях на последующих уроках

Стимуляция высказывания личного мнения об уроке и способах работы на нем.

Оценивать свою деятельность, уровень.

РУУД - оценивание и корректировка своей деятельности.

Задание ученикам на рефлексию (осознание) их деятельности:

  • Что вы узнали сегодня на уроке?

  • Что вы чувствовали при изучении этой темы и выполнении заданий?

  • Что вам понравились, а что - нет?

  • Что бы вы дополнительно хотели изучить по этой теме?

Сегодня на уроке мы изучили не все возможности форматирования текста. На следующем уроке рассмотрим другие: шрифт, выравнивание и др.






 
 
X

Чтобы скачать данный файл, порекомендуйте его своим друзьям в любой соц. сети.

После этого кнопка ЗАГРУЗКИ станет активной!

Кнопки рекомендации:

загрузить материал