оригинальный файл 5.5 MБ
advertisement
ПЛАН-КОНСПЕКТ УРОКА Основы языка разметки гипертекста ФИО(полностью) Спичкова Наталья Викторовна Место работы МБОУ Верхне-Талызинская СОШ, Сеченовского района, Нижегородской области Должность учитель информатики Предмет информатика Класс 10 Тема Основы языка разметки гипертекста Цель: Изучение основ языка разметки гипертекста HTML и использование его при Webконструировании Обучающие задачи: дать представление учащимся о структуре web-страниц, познакомить с основными тегами Развивающие задачи: способствовать развитию информационной культуры; развивать эмоциональную сферу: формировать положительные эмоции к процессу обучения Воспитательные задачи: воспитывать уважение и умение сотрудничать с окружающими людьми, трудолюбие и добросовестность, воспитывать интерес к занятиям информатикой как возможной области будущей практической деятельности Тип урока изучение нового материала Формы работы учащихся индивидуальная, фронтальная Необходимое оборудование компьютер, проектор, экран, презентация, листы рефлексии СТРУКТУРА И ХОД УРОКА 1.Организационный момент (2 мин.) Учитель: Здравствуйте, ребята! Мы живём в современном информационном мире, в котором Интернет – это мир общения, познания, увлечения. Тема нашего урока связана с Интернетом: Основы языка разметки гипертекста HTML. Основы языка разметки гипертекста HTML (слайд №1) Открываем тетради, записываем дату и тему урока. 2.Актуализация знаний (2 мин.) Учитель: Предлагаю вспомнить некоторые понятия (беседа с учащимися). Web-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия). Всеми́рная паути́на (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия). Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (Википедия). 3. Объяснение нового материала (35 мин.) (HTML) Hyper Text Markup Language – язык разметки гипертекстовых документов. Web-страницы можно создать с помощью языка HTML Web-страницы могут быть созданы с помощью: обычного текстового редактора; редактора, способного сохранять в формате HTML; специализированного редактора; специализированной системы. (слайд №2) Учитель: Что такое HTML? (рассказ учителя с элементами беседы) Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов. Web-страницы можно создать с помощью языка HTML. Понятие тега. В обычный документ вставляются управляющие символы - HTMLтеги, которые определяют вид Web-страницы при её просмотре в браузере. Теги заключаются в угловые скобки <> и могут быть одиночными или парными. Парные тег содержит открывающий и закрывающий теги (контейнер). Например, код Web-страницы помещается внутрь контейнера <HTML>… </HTML> и состоит из 2-х частей: заголовка и содержания. Теги могут записываться как прописными, так и строчными буквами. (слайд №3) В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере. Теги заключаются в угловые скобки <> и могут быть одиночными или парными. Парный тег содержит открывающий и закрывающий теги (контейнер). Например, код Web-страницы помещается внутрь контейнера <HTML>… </HTML> Теги могут записываться как прописными, так и строчными буквами. Оформление конспекта учащимися. Понятие атрибута. Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы. Например, <FONT COLOR=“blue”> <H1 ALIGN=“center”> Моё имя – Лиза </H1> </FONT> (слайд №4) Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы. Например, <FONT COLOR=“blue”> <H1 ALIGN=“center”> Моё имя – Лиза </H1> </FONT> Оформление конспекта учащимися. Структура Web-страницы. СТРУКТУРА WEB-СТРАНИЦЫ <HTML> <HEAD> <TITLE> Название Web-страницы </TITLE> </HEAD> <BODY атрибуты> На этой странице можно разместить любую интересную информацию в Интернете. </BODY> </HTML> (слайд №5) <HTML> <HEAD> <TITLE> Название Web-страницы </TITLE> </HEAD> <BODY атрибуты> На этой странице можно разместить любую интересную информацию в Интернете. </BODY> </HTML> Оформление конспекта учащимися. Создание Web-страницы. СОЗДАНИЕ WEB-СТРАНИЦЫ 1. 2. 3. 4. 5. Создать личную папку. Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы. Сохранить файл под именем Шаблон.txt в личной папке. Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты. Сохранить файл под именем index.htm в личной папке. (слайд №6) 1. Создать личную папку. 2. Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы. 3. Сохранить файл под именем Шаблон.txt в личной папке. СОЗДАНИЕ WEB-СТРАНИЦЫ Для редактирования файла index.htm необходимо выполнить следующие действия: (слайд №7) 4. Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты. 5. Сохранить файл под именем index.htm в личной папке. Для редактирования файла index.htm необходимо открыть его в Блокноте. Оформление конспекта учащимися. Атрибуты фона Web-страницы. АТРИБУТЫ ФОНА WEB-СТРАНИЦЫ Атрибут цвета Web-страницы <BODY bgcolor=#FFF8DC> Атрибут вставки фонового рисунка Webстраницы <BODY background="Nature_02.jpg”> (слайд №8) Атрибут цвета Web-страницы <BODY bgcolor=#FFF8DC> Атрибут вставки фонового рисунка Web-страницы <BODY background="Nature_02.jpg”> Оформление конспекта учащимися. Форматирования текста на Web-странице. ТЕГИ И АТРИБУТЫ ФОРМАТИРОВАНИЯ ТЕКСТА НА WEB-СТРАНИЦЕ <H1>…</H1> до <H6>…</Y6> тег размера шрифта заголовков <FONT>…</FONT> тег форматирования шрифта FACE=“Arial” атрибут задания гарнитуры шрифта SIZE=4 атрибут задания размера шрифта COLOR=“Red” атрибут задания цвета шрифта ALIGN=“left” атрибут задания выравнивания текста <HR> тег для создания горизонтальной линии <P>…</P> контейнер для разделения текста на абзацы (слайд №9) <H1>…</H1> до <H6>…</Y6> тег размера шрифта заголовков <FONT>…</FONT> тег форматирования шрифта FACE=“Arial” SIZE=4 атрибут задания гарнитуры шрифта атрибут задания размера шрифта COLOR=“Red” атрибут задания цвета шрифта ALIGN=“left” атрибут задания выравнивания текста <HR> тег для создания горизонтальной линии <P>…</P> контейнер для разделения текста на абзацы Оформление конспекта учащимися. Вставки изображений на Web-странице. ТЕГ И АТРИБУТ ВСТАВКИ ИЗОБРАЖЕНИЙ НА WEBСТРАНИЦЕ <IMG SRC=“computer.gif”> <IMG SRC=“C:\COMPUTER\computer.gif”> <IMG SRC=“http://www.server.ru/computer.gif”> (слайд №10) <IMG SRC=“computer.gif”> <IMG SRC=“C:\COMPUTER\computer.gif”> <IMG SRC=“http://www.server.ru/computer.gif”> Оформление конспекта учащимися. Гиперссылки на Web-странице. ТЕГИ И АТРИБУТЫ ГИПЕРССЫЛКИ НА WEB-СТРАНИЦЕ <A HREF=“Адрес”>Указатель</A> тег с атрибутом для создания гиперссылки <ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты (слайд №11) <A HREF=“Адрес”>Указатель ссылки</A> тег с атрибутом для создания гиперссылки <ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты Пояснение: ГИПЕРССЫЛКИ Для связывания Web- страниц используют гиперссылки. Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей. Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой. (слайд №12) Для связывания Web- страниц используют гиперссылки. Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей. Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой. Оформление конспекта учащимися. 4.Закрепление пройденного материала (4 мин.) Учитель: А теперь закрепим знания, полученные на уроке, ответив на следующие вопросы. КОНТРОЛЬНЫЕ ВОПРОСЫ Какие тэги (контейнеры) должны присутствовать в HTML-доку­менте обязательно? Какова логическая структура Web-страницы? Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Какой тэг и его атрибуты используются для вставки изображений в Web-страницы? (слайд №13) 1. 2. 3. 4. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы? Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Какой тэг и его атрибуты используются для вставки изображений в Web-страницы? 5.Рефлексия (1 мин.) Учитель: Оцените свое эмоциональное состояние на уроке. Для этого у вас на столах лежат карточки. 1. На уроке я работал 2. Своей работой на уроке я 3. Урок для меня показался 4. За урок я 5. Мое настроение 6. Материал урока мне был активно / пассивно доволен / не доволен коротким / длинным не устал / устал стало лучше / стало хуже понятен / не понятен полезен / бесполезен интересен / скучен 6. Подведение итогов и домашнее задание (1 мин.) Подвести итог занятия. Ответить на вопросы учащихся. Д/З: Выучить теоретический материал: записи в тетради и в учебнике - п. 2.13, стр. 201-205. Урок окончен! До свидания. 8