Конспект урока по информатике «Основы HTML»
В методической разработке конспекта урока по информатике представлены все этапы проведения урока по теме «Основы языка гипертекстовой разметки».
Содержимое публикации
Ермакова Вероника Викентьевна, учитель информатики МБОУ СОШ №19 города Белово
Методическая разработка урока по информатике, 10 класс
по теме « Основы 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 .
В обычный документ вставляются управляющие символы — HTML-теги, которые определяют вид Web -страницы при её просмотре в браузере.
Теги заключаются в угловые скобки <> и могут быть одиночными или парными.
Парные теги содержат открывающий и закрывающий теги (контейнер).
Например, код Web -страницы помещается внутрь контейнера
Теги могут записываться как прописными, так и строчными буквами.
(Демонстрация презентации, 2-3 слайды).
Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web -страницы.
Моёимя – Марина
(Демонстрация презентации, 4 слайд).
3.3. Структура Web- страницы.
На этой странице можно разместить любую интересную информацию в Интернете.
(Демонстрация презентации, 5 слайд).
3.4. Создание Web- страницы.
Создать в блокноте шаблон HTML -документа, набрав HTML -код страницы.
Сохранить файл под именем Шаблон. txt в личной папке.
Открыть файл Шаблон. txt и внести необходимую информацию, используя теги и их атрибуты.
Сохранить файл под именем index . htm в личной папке.
Для редактирования файла index . htm необходимо открыть его в Блокноте.
(Демонстрация презентации, 6-7 слайды).
3.5. Атрибуты фона Web- страницы.
Атрибут цвета Web- страницы
Атрибут вставки фонового рисунка Web -страницы
Оформление конспекта обучающимися.
(Демонстрация презентации, 8 слайд).
3.6. Теги и атрибуты форматирования текста на Web -странице.
< H 1>… до < H 6>… тег размера шрифта заголовков
< FONT >… тег форматирования шрифта
FACE =“ Arial ” атрибут задания гарнитуры шрифта
SIZE =4 атрибут задания размера шрифта
COLOR =“ Red ” атрибут задания цвета шрифта
ALIGN =“ left ”атрибут задания выравнивания текста
< HR >тег для создания горизонтальной линии
< P >…
контейнер для разделения текста на абзацыОформление конспекта обучающимися.
(Демонстрация презентации, 9 слайд).
3.7. Тег и атрибут вставки изображений на Web -странице.
Оформление конспекта обучающимися.
(Демонстрация презентации, 10 слайд).
3.8. Теги и атрибуты гиперссылки на Web -странице.
< A HREF =“Адрес”>Указатель тег с атрибутом для создания гиперссылки
< ADDRESS >… контейнер для создания гиперссылки на адрес электронной почты
Для связывания Web — страниц используют гиперссылки.
Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
Гипертекст — это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
Оформление конспекта обучающимися.
(Демонстрация презентации, 11-12 слайды).
3.9. Теги и атрибуты для создания списков на Web -странице.
< OL >… контейнер для создания нумерованных списков
< UL >… контейнер для создания маркированного списка
< DL >… контейнер для создания списка терминов
< DD >тег для создания определения
(Демонстрация презентации, 13 слайд).
3.10. Теги и атрибуты для создания интерактивных форм на Web -странице.
< FORM >… контейнер для создания формы
Тег < INPUT >со значением атрибута TYPE =“ text ” создают текстовое поле
Тег < INPUT >со значением атрибута TYPE =“ radio ” создают группу переключателей
Тег < INPUT >со значением атрибута TYPE =“ checkbox ” создают флажки
< SELECT >… контейнер для реализации раскрывающего списка
Просмотр интерактивных форм на Web -странице.
(Демонстрация презентации, 14 слайд).
4.Этап закрепления знаний.
4.1. Индивидуальная работа на компьютере:
Создание Web -страницы с использованием знаний языка разметки гипертекста HTML .
(Демонстрация презентации, 15 слайд)
Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.
Информационная переменка (физминутка).
4.2. Индивидуальное выполнение теста и взаимопроверка с последующим оглашением учителем правильных ответов.
Выполнение теста по теме «Основы языка разметки гипертекста».
(Демонстрация презентации, 16 слайд).
Подведение итогов: обучающиеся выставляют сами себе оценки за выполнение теста и сообщают учителю.
5.Этап информации о домашнем задании.
Учитель. 1. Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.
2. Творческое задание (по желанию) — создать минисайт с помощью HTML -языка на свободную тему.
(Демонстрация презентации, 17 слайд).
Спасибо за урок! До свидания, ребята.
HTML
Подсоединение компьютера к глобальной сети Интернет часто осуществляется посредством телефонной сети. К сожалению, скорость передачи информации по телефонной сети весьма невелика. Поэтому в Интернете для уменьшения количества символов, передаваемых за единицу времени(то есть, трафика) пересылают не сам документ, а его описание на особом языке. Программа для просмотра веб-страниц – браузер сама воспроизводит документ на основе полученного описания. Для описания электронных документов существует особый язык – HTML. Получив описание, написанное на этом языке, браузер воссоздает исходный документ, формируя текст и расставляя иллюстрации в нужных местах.
HTML (HyperText Markup Language, то есть язык разметки гипертекста) –это язык Всемирной паутины. Каждый раз, открывая ту или иную веб-страницу, мы на самом деле открываем документ, написанный на языке HTML. Все веб-документы отформатированы с помощью языка HTML. Для перехода с одной страницы такого документа на другую предусмотрены гиперссылки, созданные посредством языка HTML. Размещенные на веб- страницах цветные иллюстрации, всевозможные формы для заполнения и бегущая строка видны опять-таки благодаря языку HTML.
Гипертекст – это текст со ссылками на другие документы. Чем отличается гипертекст от обычного текста? Вспомните энциклопедический словарь. В статье словаря, раскрывающей какое-либо понятие, некоторые слова выделены курсивом: это означает, что в данном словаре имеются статьи, посвященные этим словам – эти статьи можно найти и прочитать в той же книге. Такое указание на слово является ссылкой. Ссылка дает возможность получения дополнительной информации о слове или группе слов. Гипертекст тоже организован именно так.
Термин “гипертекст” впервые использовал в 1969 году Тед Нельсон. С информацией, написанной на языке гипертекста, можно работать только на компьютере.
Техника чтения обычного текста такова: прочитав страницу, переходишь к следующей. В технологии гипертекста последовательность чтения может быть произвольной, так как с помощью гиперссылки можно моментально перейти на любую страницу. Ссылки обычно выделяются в тексте цветом либо подчеркиванием. Такие ссылки называются гиперссылками, или гиперсвязями.
Объектом гиперссылки может стать отдельное слово, целое предложение или графический объект. При наведении указателя мыши на гиперссылку он меняет форму.
Посредством гиперссылок гипертекст может связывать друг с другом множество различных документов. Текстовые файлы, созданные при помощи HTML, имеют расширение .html или .htm. Их называют HTML-файлами.
Гиперссылка – это выделенный объект, связанный с другими объектами и реагирующий на щелчок мыши.
Теги
С точки зрения языка HTML, гипертекст – это текст с кодами разметки.
Обычно вместо термина “код разметки” применяют термин “тег”.
Теги – это команды, определяющие правила отображения текста в браузере.
Тег всегда начинается открывающей угловой скобкой (<) и завершается закрывающей угловой скобкой (>). При написании тегов прописные и строчные буквы не учитываются, то есть, например, , и – это один и тот же тег.
Познакомимся с несколькими наиболее важными тегами, указывающие на то, что документ является именно HTML-документом, тегами заголовков, а также тегами, делящими документ на логические части.
Различные веб-браузеры отражают один и тот же HTML-документ не одинаково: наблюдаются различия в шрифтах, цвете, размере и т.д. При сохранении HTML-файла очень важно использовать расширение .html или .htm Это позволяет с легкостью определить тип документа. Такой документ веб-браузер легко распознает и открывает не как обычный текст, а как веб-страницу. Поэтому HTML-документ следует рассматривать как логический, а не как физический документ. Другими словами, вид документа может изменяться в зависимости от читающей его программы и от класса компьютера.
Тег
Каждый HTML-документ начинается и заканчивается тегом . Эти теги показывают, что документ является именно HTML-документом. Они непременно присутствуют в нем, вне зависимости от прочего его содержания. Использовать пару тегов можно следующим образом: