Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.
Добавить свой комментарий
Аннотация к презентации
Презентация представляет собой интерактивное учебно-методическое пособие, предназначенное для проведения урока информатики в десятом классе. Цель занятия - научить школьников работать с базовым набором тегов, атрибутов, создавая интернет-страницу. Теоретический материал проиллюстрирован простыми примерами, наглядно демонстрирующими алгоритмы работы с HTML.
Краткое содержание
1. Общие сведения - язык HTML
2. Теги, их типы, формы записи
3. Атрибуты
4. Структура WEB-страницы
5. Упражнение - создать страницу в приложении "Блокнот"
6. Атрибуты фона - заливка, рисунок
7. Форматирование
8. Вставка изображений
9. Гиперссылки
Указатель тег с атрибутом для создания гиперссылки
…
контейнер для создания гиперссылки на адрес электронной почты
Слайд 12
Гиперссылки
Для связывания Web- страниц используют гиперссылки.
Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
Назад
Слайд 13
Теги и атрибуты для создания списков на Web-странице
…контейнер для создания нумерованных списков
тег элемента списка
…
контейнер для создания маркированного списка
тег элемента списка
…
контейнер для создания списка терминов
тег для создания термина
тег для создания определения
Слайд 14
Теги и атрибуты для создания интерактивных форм на Web-странице
…
контейнер для создания формы
Тег
со значением атрибута TYPE=“text" создают текстовое поле
Тег
со значением атрибута TYPE=“radio" создают группу переключателей
Тег
со значением атрибута TYPE=“checkbox" создают флажки …контейнер для реализации раскрывающего списка
тег элемента списка Пример
Слайд 15
Практическая работа на ПК
«Создание Web-страницы
с использованием знаний
языка разметки гипертекста HTML»
Web-страница
HTML-код страницы
Слайд 16
Проверь свои знания
Тест по теме
«Основы языка разметки гипертекста»
Слайд 17
Домашнее задание
1) Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.
2) Творческое задание (по желанию) - создать минисайт с помощью HTML -языка на свободную тему.
Слайд 18
Использованные источники
1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. - Новокузнецк, 2003.
2.Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2008
Посмотреть все слайды
Конспект
Ермакова Вероника Викентьевна, учитель информатики МБОУ СОШ №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.
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-страницы.
Создать личную папку.
Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.
Сохранить файл под именем Шаблон.txt в личной папке.
Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
Сохранить файл под именем 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. Индивидуальная работа на компьютере:
Практическая работа:
Создание Web-страницы с использованием знаний языка разметки гипертекста HTML.
(Демонстрация презентации, 15 слайд)
Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.
Информационная переменка (физминутка).
4.2.Индивидуальное выполнение теста и взаимопроверка с последующим оглашением учителем правильных ответов.
Выполнение теста по теме «Основы языка разметки гипертекста».
(Демонстрация презентации, 16 слайд).
Подведение итогов: обучающиеся выставляют сами себе оценки за выполнение теста и сообщают учителю.
5.Этап информации о домашнем задании.
Учитель. 1. Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.
2. Творческое задание (по желанию) - создать минисайт с помощью HTML-языка на свободную тему.
(Демонстрация презентации, 17 слайд).
Спасибо за урок! До свидания, ребята.
�PAGE \* MERGEFORMAT�1�
Ермакова Вероника Викентьевна, учитель информатики МБОУ СОШ №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.
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-страницы.
Создать личную папку.
Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.
Сохранить файл под именем Шаблон.txt в личной папке.
Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
Сохранить файл под именем 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. Индивидуальная работа на компьютере:
Практическая работа:
Создание Web-страницы с использованием знаний языка разметки гипертекста HTML.
(Демонстрация презентации, 15 слайд)
Подведение итогов: учитель демонстрирует лучшие работы, обращает внимание на ошибки, сообщает оценки за работу на ПК.
Информационная переменка (физминутка).
4.2.Индивидуальное выполнение теста и взаимопроверка с последующим оглашением учителем правильных ответов.
Выполнение теста по теме «Основы языка разметки гипертекста».
(Демонстрация презентации, 16 слайд).
Подведение итогов: обучающиеся выставляют сами себе оценки за выполнение теста и сообщают учителю.
5.Этап информации о домашнем задании.
Учитель. 1. Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.
2. Творческое задание (по желанию) - создать минисайт с помощью HTML-языка на свободную тему.
Нет комментариев для данной презентации
Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.