Конспект урока «Создание Web-страниц с помощью языка разметки гипертекста HTML»

Предмет: информатика

Класс: 8 класс

Учебник: Информатика и ИКТ.

Тема: «Создание Web-страниц с помощью языка разметки гипертекста HTML»

Тип урока: ОНЗ

Автор: Крашенинникова Наталия Александровна

Основные цели:

Метапредметные:

1.      Тренировать умение фиксировать шаги учебной деятельности.

2.      Тренировать умение осуществлять самопроверку и коррекцию своей работы.

3.      Тренировать умение проводить самооценку своей деятельности;

4.      Тренировать познавательные умения: анализировать, обобщать.

Предметные:

1. Изучение логической структуры Web-документа;
2. Ознакомление с основными структурными тегами;
3. Научить учащихся составлять простейший  Web-документ и просматривать его в браузере;
4. Сформировать умение включать новые знания в общую систему знаний.

Оборудование: компьютеры, мультимедийный проектор,  технологические карты для практической работы и таблицы цветов по количеству учащихся

       Ход урока

1. Мотивация к учебной деятельности.

- Здравствуйте, ребята! Мы живём в современном информационном мире, в котором Интернет – это мир общения, познания, увлечения. 

− С какими темами мы работали на прошлых уроках? (Находить информацию в Интернете.)

− Сегодня у вас урок открытия новых знаний.

- Вспомните, как можно найти нужную  информацию.  (Книги, Библиотеки. Через  Интернет в поисковой  строки БРАУЗЕРА вводится запрос, затем через ссылку открываем страницу Интернета).

-Что такое гипертекст? (Гипертекст – это текст, содержащий гиперссылки, т.е. некоторое слово или объект для перехода на другой фрагмент документа или на другую Web-страницу.)

- Что такое сайт? (Сайт – это группа взаимосвязанных Web-страниц, объединённых или единой тематикой, или единым авторством, или единым владельцем.)

- Тема нашего урока связана с Интернетом.  Как вы думаете какая?  ( Как создать страницу в Интернет.  Команды, с помощью которых можно создать сайт)

− И я желаю вам удачи в поиске новых знаний, в этом вам обязательно помогут ранее изученные знания!

2. Актуализация знаний и фиксация индивидуальных затруднений в пробном действии.

        Используем учебник для заполнения таблицы

- Вот вы сказали, что любая информация в Интернет хранится в виде страниц.

- Вам предлагается составить таблицу по основным понятиям Web- страницы.

Вопрос	Ответ
Что такое тег?
Какие бывают теги?
Что такое парный тег?
Что такое атрибут?
Какое должно быть имя главной страницы?
Как должны располагаться файлы проекта?
Какие программы нужны, чтобы создать weв-страницу?

Эталон заполнения.

Вопрос	Ответ
Что такое тег?	HTML-теги - управляющие символы, которые определяют вид Web-страницы при её просмотре в браузере.
Какие бывают теги?	Теги заключаются в угловые скобки <> и могут быть одиночными или парными.
Что такое парный тег?	Парные теги содержат открывающий и закрывающий теги (контейнер). В основном все теги парные, т.е. один открывающий <>, а другой - закрывающий </>. Такая пара тегов называется контейнером. А все, что находится между ними - содержимым контейнера. Действия тегов распространяются только на их содержимое.
Что такое атрибут?	Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.
Какое должно быть имя главной страницы?	Обычно просмотр сайта начинается с главной страницы. Как правило, такой файл имеет имена index.html, index.htm.
Как должны располагаться файлы проекта?	Все файлы, относящиеся к одному проекту: html-файлы, графика, flash-ролики должны располагаться в одном каталоге.
Какие программы нужны, чтобы создать web-страницу?	Вся работа будет происходить в двух программах: выбранный  текстовый редактор и программа - браузер. Один и тот же документ можно открыть сразу в двух программах, внеся и сохранив изменения в редакторе, и  обновить страницу в браузере (нажатием клавиши F5). Сразу увидим, как страница выглядит в окне браузера.

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

-Ребята. Как и  текстовом документе, Web-страница тоже имеет какие-то законы по ее созданию. Давайте посмотрим образец.

- Из каких элементов состоит данная страница? (Заголовок страницы, поле текста и др.)

- Какова логическая структура Web-страницы? (Организация по типу контейнера).

Демонстрируется эталон структуры Web-страницы.

 

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

(HTML-  определяет формат документа; HEAD-  содержит название страницы и справочную информацию о странице- таблица кодировки и др.; TITLE- хранит название Web-страницы; BODY- хранится содержание страницы)

- Перед вами лежат образцы Web-страниц написанных с помощью языка разметки HTML. Найдите правильные образцы.

Рис.1	рис.2	рис.3
<body> </body> <title> </title> <html></html> <HEAD></HEAD>	<body>   </body> <html> <title>     </title> </html>	<HTML> <HEAD> <TITLE>   </TITLE> </HEAD> <BODY ></body> </html>

− Какой рисунок соответствует эталону? (рис №3.)

− Сформулируйте еще раз правило создания структуры web-страницы. (Организация по типу контейнера.)

− Переходим к следующему заданию, которое вы выполните устно. Найдите ошибки в рис 1 и 2 и проговорите их. (Нарушены правила контейнера,  порядок  расположения тегов, пропущены обязательные теги)

-Теперь обговорим порядок создания Web – страниц. Выполните устно задание.

Расставьте порядок выполняемых действий «Создания главной Web-страницы».

1.      Сохранить файл под именем имя.htm в личной папке

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

3.      Создать личную папку для связанных  между собой Web-страниц.

Эталон создания Web-страницы.

 

- Какое имя файла будет у первой (главной) страницы? (index.htm)

Задание на затруднение. Для выполнения следующего задания используйте эталон.

У вас на столах рисунок  для создания web- страницы. Выполните его на компьютере.

Рисунок страницы

− Ребята, поднимите руку, у кого не получилось выполнить это задание как на картинке?

− Что вы не смогли сделать? (оформить текст как в задании)

− Кто выполнил задание, уверены ли вы в том, что выполнили задание верно? (Нет.)

3. Выявление места и причины затруднения.

− В чем у вас затруднение? (Не знаем, как оформить  текст, как в заданном рисунке web-страницы.)

4. Построение проекта выхода из затруднения.

− Итак, какова цель вашей деятельности. ( Научиться создавать  web-страницы.)

− Сформулируйте тему урока. (Создание web-страниц с помощью языка разметки гипертекста HTML.)

− Какие шаги действий вы предлагаете? (Посмотреть в учебнике правила и эталон создания Web-страниц, а так же, можно найти любой справочный материал по этой теме, искать информацию в Интернет, спросить у учителя.)

План проекта:

1.      Используем демонстрационный эталон структуры Web-страницы и справочной таблицы с основными тегами

2.      В текстовом редакторе печатаем текст с тегами и содержанием страницы.

3.      Сохраняем страницу под именем имя.htm

4.      Запускаем созданный файл в браузере.

5.       Исправляем ошибки, проверяет теги и сверяемся  с образцом.

5. Реализация проекта выхода из затруднения.

− А теперь вернитесь, пожалуйста, к пробному действию и выполните задание, используя составленный план.

        Выполнение задания проверяется по образцу:

Структура Web-страницы.

<HTML>

<HEAD>

<TITLE>

Название Web-страницы

</TITLE>

</HEAD>

<BODY >

<H1>На этой странице можно разместить любую интересную информацию в Интернете. </H1>

</BODY>

</HTML>

− Вы достигли цели? (Да.)

− Что вам помогло выполнить задание? (План выхода из затруднения и справочный материал с основными тегами.)

6. Первичное закрепление во внешней речи.

- Какие теги должны присутствовать в html-документе обязательно, и назовите их основные функции? (HTML-  определяет формат документа; HEAD-  содержит название страницы и справочную информацию о странице- таблица кодировки и др.; TITLE- хранит название Web-страницы; BODY- хранится содержание страницы)

- Что такое атрибуты? (Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.)

− Выполните следующее задание - оформите цветом известный вам текст.

7. Самостоятельная работа с самопроверкой по эталону.

Выполните дальнейшее оформление по рисунку.

Новый образец.

<HTML>

<HEAD>

<TITLE>

Название Web-страницы

</TITLE>

</HEAD>

<BODY >

<font color="red">

<H1>На этой странице можно разместить любую интересную информацию в Интернете. </H1>

</BODY>

</HTML>

− У кого задание вызвало затруднение?

− В каком месте возникло затруднение?

− Почему возникло затруднение? (Неверное применение, использование атрибутов)

− Кто справился с заданием без ошибок?

8. Включение в систему знаний.

− Где вы сможете применить новые знания?

9. Рефлексия деятельности на уроке.

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

− Какую цель вы ставили в начале урока? (научиться создавать Web- страницы.)

− Вы достигли поставленной цели?

− Что вам помогло в достижении цели?

− Как вы открывали новые знания?

− Оцените свою работу, заполнив таблицу.

        Учащимся раздаются таблицы для индивидуальной рефлексии:

Я	Сейчас	Хочу в будущем
Знаю (знать)
Умею (уметь)
Использую (использовать)

Домашнее задание принести материал для создания своей страницы.

Краткое описание документа:

Конспект урока «Создание Web-страниц с помощью языка разметки гипертекста HTML» для 8 класса к учебнику Угриновича Н.Д. Урок построен в рамках системно-деятельностного подхода.

Основные цели:

Метапредметные:

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

Предметные:

Изучение логической структуры Web-документа; Ознакомление с основными структурными тегами; Научить учащихся составлять простейший Web-документ и просматривать его в браузере; Сформировать умение включать новые знания в общую систему знаний