Конспект открытого урока по информатике: "Форматирование Web-страницы"

Разделы: Информатика

Задачи курса:

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

Образовательные результаты:

Учащиеся должны овладеть основами HTML, прежде чем они выполняют самостоятельную практическую работу “Форматирование Web-страницы в HTML-коде” (см. Образец-задание: файл Приложение2.htm)

Знать:

  • Структуру HTML-документа;
  • Различия между тэгами абзаца и принудительного переноса;
  • Атрибуты выравнивания абзаца и заголовков 1-6 уровней;
  • Тэги начертания, горизонтальной линии;
  • Тэги шрифта и их атрибуты гарнитуры, размера и цвета;
  • Минимум спецсимволов.

Тематическое планирование:

 

Тема

Количество часов

1

Структура HTML-документа. (см. Конспект1)

1

2

Тэги абзаца и принудительного переноса в HTML-коде.
(см. Конспект2)

1

3

Тэги. Заголовки 6 уровней в HTML-коде.
(см. Конспект3)

1

4

Выравнивание абзаца и заголовков 6 уровней в HTML-коде. Атрибут выравнивания — ALIGN

(см. Конспект4)

1

5

Тэги начертания. Начертание в HTML-коде.

(см. Конспект5)

1

6

Тэги шрифта (FONT): атрибут гарнитуры шрифта (FACE).
(см. Конспект6)

1

7

Тэги шрифта (FONT): атрибут размера шрифта (SIZE).

(см. Конспект7)

1

8

Тэги шрифта (FONT): атрибут цвета шрифта (COLOR).

(см. Конспект8)

1
 

Всего:

8

Цель урока: обучение основам форматирования HTML-документа учащихся 8 классов.

Задачи:

1. Образовательные:

  • Закрепление знаний основ HTML.
  • Ученики должны знать основные тэги и их атрибуты, термины по созданию Web-страницы.

2. Воспитательные:

  • Формирование умения применять полученные знания в практике;
  • Формирование умения понимать суть предъявленных тем;
  • Развитие упорства в достижении цели.

3. Развивающие:

  • Развитие речи, мышления;
  • Развитие познавательной активности;
  • Развитие способности к логическому мышлению.

4. Коррекционные:

  • Формирование правильного произношения слов.
  • Понимание смысла слов и предложений.

Оснащение урока.

  1. Компьютеры Pentium 4 (9 ПК).
  2. Программное обеспечение компьютеров: ОС Windows на основе технологии NT 5.1 и простой текстовый редактор Windows Блокнот, браузер Internet Explorer.
  3. Рабочая тетрадь для записи конспектов.
  4. Интерактивная доска.

План урока.

  1. Организация начала урока.
    Создание спокойной, деловой обстановки, проверка готовности учащихся к уроку (наличие тетради, ручка, линейка).
  2. Указание темы и постановка цели урока — научить учащихся 8 классов основам форматирования Web-страницы.
  3. Фронтальный опрос по пройденным темам.
  4. Объяснение сути самостоятельной практической работы.
  5. Самостоятельная практическая работа: набор текста в Блокноте по карточке задания.
  6. Подведение итогов урока, оценки.

Ход урока.

№

Учитель:

Учащийся (-иеся)

1.1.

Кого нет сегодня?

Отвечает дежурный

1.2.

Все готовы к уроку?

Отвечают учащиеся (положительно или отрицательно)

1.3.

Рабочие тетради и ручка на месте?

Отвечают учащиеся (положительно или отрицательно)

2.1.

Тема нашего сегодняшнего урока —

Самостоятельная практическая работа “Форматирование Web в Блокноте.

  

2.2.

Цель сегодняшнего урока — Закрепление предыдущих тем .

  

3.

Фронтальный опрос по предыдущим темам.

  
 

Для чего нужен контейнер TITLE в разделе HEAD?

Учащиеся должны выбрать правильный ответ:

— Для задания имени Web-страницы, отображаемого в заголовке окна браузера или в вкладке.

3.1.

Сколько всего уровней у заголовков?

Учащиеся должны выбрать правильный ответ:

— Шесть уровней.

3.2.

Для чего нужен атрибут ALIGN в разделах P и H1(H2,H3…,H6)?

Учащиеся должны выбрать правильный ответ:

— Для выравнивания абзацев и заголовков.

3.3.

Что значит

<FONT FACE=“?”>…</FONT>?

Учащиеся должны выбрать верный ответ:

2) Гарнитура шрифта.

3.4.

Что значит

<FONT SIZE=“?”>…</FONT>?

Учащиеся должны выбрать верный ответ:

4) Размер шрифта: 1, 2, 3, 4, 5, 6, 7.

3.5.

Что значит

<FONT COLOR=“?”>…</FONT>?

Учащиеся должны выбрать верный ответ:

5) Цвет шрифта.

3.6.

<FONT COLOR=“?”>…</FONT>

Внутрь кавычек вы вставите?

YELLOW.

4) #FFFF00.

3.7.

Можно ли использовать сразу три раза подряд тэг FONT или нельзя?

<FONT FACE=“Impact”

FONT SIZE=“4”

FONT COLOR=“#FFFF00”>Добро пожаловать</FONT>

— Нельзя.

3.8.

Можно ли использовать сразу три атрибута FACE SIZE COLOR в тэге FONT или нельзя?

<FONT FACE=“Impact” SIZE=“4” COLOR=“#FFFF00”>Добро пожаловать</FONT>

— Можно.

3.9.

Выравнивание
заголовка первого уровня

по центру:

<P ALIGN=“CENTER”><H1>…</H1></P>

<H1 ALIGN=“CENTER”>…</H1>

Выберите: где верно?

Учащиеся должны выбрать верный ответ.

3.10.

Задание гарнитуры шрифта
Impact
для заголовка первого уровня,

выровненного по центру

1) <FONT FACE=“Impact”><H1 ALIGN=“CENTER”>…</H1></FONT>

2) <H1 ALIGN=“CENTER”><FONT FACE=“Impact”>…</FONT></H1>

Выберите: где верно?

Учащиеся должны выбрать верный ответ.

3.11.

Для чего нужен контейнер TITLE в разделе HEAD?

Учащиеся должны выбрать верный ответ:

Для задания имени Web-страницы, отображаемого в заголовке окна браузера или вкладке.

4.

Садитесь за компьютер, входите в Windows по логину и паролю. Откройте папку “\MyWebs” и дважды щелкните на значок файла algoritm.htm для открытия в браузер, вызовите Блокнот и потом перетащите файл algoritm.htm из папки “\MyWebs” в окно Блокнота.

Учащиеся выполняют указания преподавателя (указания дублируются на экране видеопроектора).

5.

Даю вам лист, присвойте имя Web-страницы “Алгоритм” и выполняйте указания, отображенные на экране интерактивной доски.

Учащиеся выполняют работу на компьютере.

(см. файл Приложение1)

Ход самостоятельной практической работы.

1. Учащиеся открывают файл algoritm.htm в браузере.

2. Учащиеся запускают Блокнот и перетаскивают файл algoritm.htm в окно Блокнота.

3. Учащиеся присваивают Web-странице имя “Алгоритм”: донабирают <head><title>Алгоритм</title></head>, сохраняют в Блокноте и обновляют страницу в активном окне браузера, предъявляют преподавателю.

4. По указанию преподавателя учащиеся форматируют (cм. Презентация: файл Приложение1)

4.1. Задание заголовка I уровня для “Алгоритм”;

— Учащиеся, открыв файл algoritm.htm в Блокноте и в браузере, должны набирать так: <h1>Алгоритм</h1>, сохранить изменение в Блокноте, обновить страницу в активном окне браузера.

4.2. Выравнивание заголовка I уровня по центру;

— Учащиеся должны донабирать так: <h1 align=”center”>Алгоритм</h1>, сохранить изменение в Блокноте, обновить страницу в активном окне браузера.

4.3. Задание гарнитуры шрифта Impact и цвет шрифта – синий для заголовка I уровня “Алгоритм”;

— Учащиеся должны донабирать так:

<h1 align=”center”><font face=”Impact” color=”blue”>Алгоритм</font></h1>

4.4. Задание начертания Полужирный для : Мурзик, Папа Циркуль.

— Учащиеся должны вставлять так: <b>Мурзик</b> <b>Папа Циркуль</b>

4.5. Задание начертания Курсивный для: (обиженно и возмущенно), (ласково), (капризничает)

— Учащиеся должны вставлять так: <i>(обиженно и возмущенно)</i> <i>(ласково)</i> <i>(капризничает)</i>

4.6. Задание цвета шрифта – красный для: Мурзик, Папа Циркуль.

— Учащиеся должны вставлять так:

<font color=”red”><b>Мурзик</b></font>

<font color=”red”><b>Папа Циркуль</b></font>

4.7. Задание цвета шрифта – зеленый для: (обиженно и возмущенно), (ласково), (капризничает).

— Учащиеся должны вставлять так:

<font color=”green”><i>(обиженно и возмущенно)</i></font>

<font color=”green”><i>(ласково)</i></font>

<font color=”green”><i>(капризничает)</i></font>

4.8. Задание принудительного переноса для 2-3 строк, гарнитуры шрифта Courier New, размера шрифта 5, цвета шрифта – оранжевый для четверостишия.

Дружок, вставай! Дружок, проснись!
садись за стол и не ленись.
Задачки станем мы решать
И на вопросы отвечать!

— Учащиеся должны вставлять так:

 <p><font face=”Courier New” size=”5” color=”orange”>

Дружок, вставай! Дружок, проснись!<br>
Садись за стол и не ленись.<br>
Задачки станем мы решать<br>
И на вопросы отвечать!

</font></p>

4.9. Задание начертания Полужирный-Курсивный для четверостишия.

— Учащиеся должны вставлять так (только в раздел P):

<p><font face=”Courier New” size=”5” color=”orange”>

<b><i>Дружок, вставай! Дружок, проснись!<br>
Садись за стол и не ленись.<br>
Задачки станем мы решать<br>
И на вопросы отвечать!</i></b>

</font></p>

5. Проверка выполненной работы (см. файл-ответ: Приложение2)

Список литературы и ресурсы:

  1. Информатика и ИКТ. Под ред. Н.В.Макаровой, Практикум 8-9, Питер,2008
  2. Практикум по информационным технологиям. Н.Угринович, Л.Босова, Н.Михайлова, Москва, Лаборатория Базовых Знаний АО “Московские учебники”, 2008
  3. http://www.htmlbook.ru

Приложение 3

Приложение 4