Ермакова В.В. - «Основы языка разметки
advertisement
Работа участника всероссийского интернет-проекта «Педагогический опыт. Инновации, технологии, разработки» всероссийского педагогического портала МЕТОДКАБИНЕТ.РФ (www.методкабинет.рф) Методическая разработка урока по информатике и ИКТ по теме «Основы языка разметки гипертекста HTML» для обучающихся 10 класса (базовый уровень) Ермакова Вероника Викентьевна, учитель информатики МБОУ «СОШ № 19 г.Белово» Кемеровской области Тема урока: Основы языка разметки гипертекста HTML. Цель: Изучение основ языка разметки гипертекста HTML и использование его при Webконструировании. Задачи: Образовательная: объяснить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов; научить обучающихся создавать Web-страницу. Развивающая: способствовать развитию информационной культуры; развивать эмоциональную сферу: формировать положительные эмоции к процессу обучения. Воспитательная: воспитывать уважение и умение сотрудничать с окружающими людьми, трудолюбие и добросовестность, воспитывать интерес к занятиям информатикой как возможной области будущей практической деятельности. Тип урока: Урок усвоения новых знаний. Оборудование: 1. Современные компьютеры. 2. Мультимедийный проектор. Оснащение: Презентация Power Point. Раздаточный материал для обучающихся. Программное обеспечение: ОС Windows, браузер. Продолжительность проведения: два урока по 45 минут. Ход занятия 1.Организационный момент Учитель: Здравствуйте, ребята! Мы живём в современном информационном мире, в котором Интернет – это мир общения, познания, увлечения. Тема нашего урока связана с Интернетом: Основы языка разметки гипертекста HTML. (Демонстрация презентации, 1 слайд). 1 Работа участника всероссийского интернет-проекта «Педагогический опыт. Инновации, технологии, разработки» всероссийского педагогического портала МЕТОДКАБИНЕТ.РФ (www.методкабинет.рф) 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> 2 Работа участника всероссийского интернет-проекта «Педагогический опыт. Инновации, технологии, разработки» всероссийского педагогического портала МЕТОДКАБИНЕТ.РФ (www.методкабинет.рф) Название 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> контейнер для разделения текста на абзацы Оформление конспекта обучающимися. 3 Работа участника всероссийского интернет-проекта «Педагогический опыт. Инновации, технологии, разработки» всероссийского педагогического портала МЕТОДКАБИНЕТ.РФ (www.методкабинет.рф) (Демонстрация презентации, 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> контейнер для реализации раскрывающего списка 4 Работа участника всероссийского интернет-проекта «Педагогический опыт. Инновации, технологии, разработки» всероссийского педагогического портала МЕТОДКАБИНЕТ.РФ (www.методкабинет.рф) <OPTION> тег элемента списка Просмотр интерактивных форм на Web-странице. (Демонстрация презентации, 14 слайд). 4.Этап закрепления знаний. 4.1. Индивидуальная работа на компьютере: Практическая работа: 1. Создание Web-страницы с использованием знаний языка разметки гипертекста HTML. (Демонстрация презентации, 15 слайд) Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК. Информационная переменка (физминутка). 4.2. Индивидуальное выполнение теста и взаимопроверка с последующим оглашением учителем правильных ответов. 1. Выполнение теста по теме «Основы языка разметки гипертекста». (Демонстрация презентации, 16 слайд). Подведение итогов: обучающиеся выставляют сами себе оценки за выполнение теста и сообщают учителю. 5.Этап информации о домашнем задании. Учитель. 1. Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205. 2. Творческое задание (по желанию) - создать минисайт с помощью HTML-языка на свободную тему. (Демонстрация презентации, 17 слайд). Спасибо за урок! До свидания, ребята. Список использованной литературы: 1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. Новокузнецк, 2003. 2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2008 5
