урок по теме: Основы языка разметки гипертекста HTML
методическая разработка по информатике и икт (10 класс)
Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании.
Скачать:
Вложение | Размер |
---|---|
![]() | 31.06 КБ |
Предварительный просмотр:
Тема «Основы языка разметки гипертекста 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-страницы.
Название Web-страницы
На этой странице можно разместить любую интересную информацию в Интернете.
(Демонстрация презентации, 5 слайд).
3.4. Создание Web-страницы.
- Создать личную папку.
- Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.
- Сохранить файл под именем Шаблон.txt в личной папке.
- Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
- Сохранить файл под именем 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. Индивидуальная работа на компьютере:
Практическая работа:
- Создание Web-страницы с использованием знаний языка разметки гипертекста HTML.
(Демонстрация презентации, 15 слайд)
Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.
Информационная переменка (физминутка).
4.2. Индивидуальное выполнение теста и взаимопроверка с последующим оглашением учителем правильных ответов.
- Выполнение теста по теме «Основы языка разметки гипертекста».
(Демонстрация презентации, 16 слайд).
Подведение итогов: обучающиеся выставляют сами себе оценки за выполнение теста и сообщают учителю.
5.Этап информации о домашнем задании.
Творческое задание (по желанию) - создать минисайт с помощью HTML-языка на свободную тему.
(Демонстрация презентации, 17 слайд).
Спасибо за урок! До свидания, ребята.
По теме: методические разработки, презентации и конспекты
![](/sites/default/files/pictures/2012/10/25/picture-131256-1351164536.jpg)
Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML"
Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML" Цели урока: Повторение основных принципов построения сайтов, структуры HTML-документа...
![](/sites/default/files/pictures/2013/02/06/picture-195962-1360115983.jpg)
Язык разметки гипертекста HTML
Цели и задачи урока:Сформулировать основные принципы создания WEB-страниц;Познакомить учеников с основными командами оформления текста;Продемонстрировать использование этих команд на конкретных пример...
![](/sites/default/files/pictures/2014/05/13/picture-445937-1399982023.jpg)
Практическая работа на тему "Язык разметки гипертекста HTML"
Практичекая работа для закрепления изученных знаний по теме "Язык разметки гипертекста HTML"....
![](/sites/default/files/pictures/2018/11/13/picture-53190-1542115370.jpg)
Методическая разработка "Основы языка разметки гипертекста HTML" 10 класс
В архиве есть файл с конспектом урока и практическая часть "Интерактивные формы". УМК Угринович Н.Д....
![](/sites/default/files/pictures/2016/09/23/picture-139042-1474648415.jpg)
Урок по теме "Язык разметки гипертекста HTML"
Цели урока:Обобщить знания по теме «Коммуникационные технологии»;Научиться разрабатывать документы, предназначенные для публикации в; Интернете;Отработать навыки редактирования веб-страниц в кодах HTM...
![](/sites/default/files/pictures/2020/12/19/picture-1297883-1608331127.jpg)
2 Внеурочные занятия 8 класс. Основы языка разметки гипертекста HTML
HTML - это инструмент, используемый для написания основы веб-сайтов.По сути, HTML - довольно простой язык разметки (не язык программирования), состоящий из элементов, которые:-придают различные ...
![](/sites/default/files/pictures/2024/01/09/picture-455123-1704802663.jpg)
Основы языка разметки гипертекста HTML
Методическая разработка урока по информатике для обучающихся 10 класса (базовый уровень) по теме «Основы языка разметки гипертекста HTML» Тема урока: Основы языка разметки г...