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

Тема урока: Основы языка разметки гипертекста HTML.

Цель: Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.

Задачи:

Образовательная: объяснить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов; научить обучающихся создавать Web-страницу.

Развивающая: способствовать развитию информационной культуры; развивать эмоциональную сферу:  формировать положительные эмоции  к процессу обучения.

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

Тип урока: Урок усвоения новых знаний.

Оборудование: 1. Современные компьютеры.

                            2. Мультимедийный проектор.

Оснащение:       Презентация Power Point.

                             Раздаточный материал для обучающихся.

Программное обеспечение: ОС Windows, браузер.

Список использованной литературы:    

1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. - Новокузнецк, 2003.

2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угринович. – М.: БИНОМ. Лаборатория знаний, 2008

Продолжительность проведения: два урока по 45 минут.

 Ход занятия    

1.Организационный момент

Учитель: Здравствуйте, ребята! Мы живём в современном информационном мире, в котором Интернет – это мир общения, познания, увлечения.  Тема нашего урока связана с Интернетом: Основы языка разметки гипертекста HTML.

(Демонстрация презентации, 1 слайд).

2.Этап подготовки обучающихся к активному сознательному усвоению знаний.

Учитель: Предлагаю вспомнить некоторые понятия (беседа с обучающимися).

Web-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия).

Всеми́рная паути́на (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).

Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (Википедия).

3. Этап усвоения новых знаний.

Учитель: Что такое HTML? (рассказ учителя с элементами беседы)

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.

Web-страницы можно создать с помощью языка HTML.

3.1. Понятие тега.

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

        Теги заключаются в угловые скобки <> и могут быть одиночными или парными.

        Парные теги содержат открывающий и закрывающий теги (контейнер).

Например, код Web-страницы помещается внутрь контейнера

…

 Теги могут записываться как прописными, так и строчными буквами.

(Демонстрация презентации, 2-3 слайды).

3.2. Понятие атрибута.

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

Например,

Моё имя – Марина

 (Демонстрация презентации,  4 слайд).

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

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

(Демонстрация презентации,  5 слайд).

3.4. Создание Web-страницы.

1. Создать личную папку.
2. Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.
3. Сохранить  файл под именем Шаблон.txt  в личной папке.
4. Открыть файл Шаблон.txt  и внести необходимую информацию, используя теги и их атрибуты.
5. Сохранить файл под именем index.htm в личной папке.

Для редактирования файла index.htm необходимо открыть его в Блокноте.

(Демонстрация презентации,  6-7 слайды).

3.5. Атрибуты фона Web-страницы.

• Атрибут цвета Web-страницы

• Атрибут вставки фонового рисунка Web-страницы

Оформление конспекта обучающимися.

(Демонстрация презентации,  8 слайд).

3.6. Теги и атрибуты форматирования текста на Web-странице.

…

…  тег размера шрифта заголовков

…    тег форматирования шрифта

     FACE=“Arial”    атрибут задания гарнитуры шрифта

     SIZE=4     атрибут задания размера шрифта

     COLOR=“Red”    атрибут задания цвета шрифта

     ALIGN=“left” атрибут задания выравнивания текста

---

тег для создания горизонтальной линии

…

контейнер для разделения текста на абзацы

Оформление конспекта обучающимися.

 (Демонстрация презентации,  9 слайд).

3.7. Тег и атрибут вставки изображений на Web-странице.

Оформление конспекта обучающимися.

 (Демонстрация презентации,  10 слайд).

3.8. Теги и атрибуты гиперссылки на Web-странице.

Указатель  тег с атрибутом для создания гиперссылки

…

контейнер для создания гиперссылки на адрес электронной почты

Пояснение:

• Для связывания Web- страниц используют гиперссылки.
• Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
• Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.

Оформление конспекта обучающимися.

(Демонстрация презентации,  11-12  слайды).

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

…

 контейнер для создания нумерованных списков

     

 тег элемента списка

…

 контейнер для создания маркированного списка

     

 тег элемента списка

…

контейнер для создания списка терминов

             

тег для создания термина

             

тег для создания определения

(Демонстрация презентации,  13  слайд).

3.10. Теги и атрибуты для создания интерактивных форм на Web-странице.

…

контейнер для создания формы

Тег со значением атрибута TYPE=“text” создают текстовое поле

Тег со значением атрибута TYPE=“radio” создают группу переключателей

Тег со значением атрибута  TYPE=“checkbox” создают флажки

… контейнер для реализации раскрывающего списка

          тег элемента списка

Просмотр интерактивных форм на Web-странице.

(Демонстрация презентации,  14  слайд).

4.Этап закрепления знаний.

4.1. Индивидуальная работа на компьютере:

Практическая работа:

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

(Демонстрация презентации, 15 слайд)

Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.

Информационная переменка (физминутка). 

4.2. Индивидуальное выполнение теста и взаимопроверка с последующим оглашением учителем правильных ответов.

1. Выполнение теста по теме «Основы языка разметки гипертекста».

(Демонстрация презентации, 16 слайд).

Подведение итогов: обучающиеся выставляют сами себе оценки за выполнение теста и сообщают учителю.

5.Этап информации о домашнем задании.

Творческое задание (по желанию) - создать минисайт с помощью HTML-языка на свободную тему.

(Демонстрация презентации, 17 слайд).

Спасибо за урок! До свидания, ребята.