Предмет: Программное обеспечение ЭВМ

Группа: ПОЭ-112(8)/11

Тема урока: Основы языка разметки гипертекста 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-страницы помещается внутрь контейнера

<HTML>… </HTML>

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

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

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

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

Например,

     <FONT COLOR=“blue”>

    <H1  ALIGN=“center”> Моё имя – Марина </H1>

     </FONT>

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

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

<HTML>

<HEAD>

<TITLE>

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

</TITLE>

</HEAD>

<BODY атрибуты>

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

</BODY>

</HTML>

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

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

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

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

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

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

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

<BODY bgcolor=#FFF8DC>

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

<BODY background="Nature_02.jpg”>

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

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

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

<H1>…</H1> до <H6>…</Y6>  тег размера шрифта заголовков

<FONT>…</FONT>    тег форматирования шрифта

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

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

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

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

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

<P>…</P> контейнер для разделения текста на абзацы

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

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

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

<IMG  SRC=“computer.gif”>

<IMG SRC=“C:\COMPUTER\computer.gif”>

<IMG  SRC=“http://www.server.ru/computer.gif”>

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

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

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

<A  HREF=“Адрес”>Указатель</A>  тег с атрибутом для создания гиперссылки

<ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты

Пояснение:

—  Для связывания Web- страниц используют гиперссылки.

—  Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.

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

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

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

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

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

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

<UL>…</UL>  контейнер для создания маркированного списка

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

<DL>…</Dl> контейнер для создания списка терминов

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

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

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

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

<FORM>…</FORM> контейнер для создания формы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Учитель.  1. Учебник  10 класса Н. Д. Угринович (базовый уровень),  П. 2.13, стр. 201-205.

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

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

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