Презентация на тему "Основы языка разметки гипертекста HTML" 10 класс

Презентация: Основы языка разметки гипертекста HTML
Включить эффекты
1 из 18
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
4.4
4 оценки

Комментарии

Нет комментариев для данной презентации

Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.


Добавить свой комментарий

Аннотация к презентации

Презентация представляет собой интерактивное учебно-методическое пособие, предназначенное для проведения урока информатики в десятом классе. Цель занятия - научить школьников работать с базовым набором тегов, атрибутов, создавая интернет-страницу. Теоретический материал проиллюстрирован простыми примерами, наглядно демонстрирующими алгоритмы работы с HTML.

Краткое содержание

1. Общие сведения - язык HTML
2. Теги, их типы, формы записи
3. Атрибуты
4. Структура WEB-страницы
5. Упражнение - создать страницу в приложении "Блокнот"
6. Атрибуты фона - заливка, рисунок
7. Форматирование
8. Вставка изображений
9. Гиперссылки

Содержание

  • Презентация: Основы языка разметки гипертекста HTML
    Слайд 1
    • Из опыта работы
    • Ермаковой Вероники Викентьевны
    • учителя информатики
    • МОУ СОШ № 19 г. Белово
    • Основы языка разметки гипертекста HTML
  • Слайд 2
    • Hyper Text Markup Language (HTML) – язык гипертекстовой разметкидокументов.
    • Web-страницы можно создать с помощью языка HTML
    • В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.
  • Слайд 3
    • Теги заключаются в угловые скобки <> и могут быть одиночными или парными.
    • Парные теги содержат открывающий и закрывающий теги (контейнер).
    • Например, код Web-страницы помещается внутрь контейнера
    • Теги могут записываться как прописными, так и строчными буквами.
  • Слайд 4
    • Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.
    • Например,
    • Моё имя – Марина
  • Слайд 5

    Структура Web-страницы

     

    • На этой странице можно разместить любую интересную информацию в Интернете.
    • Назад
  • Слайд 6

    Создание Web-страницы

    • Создать личную папку.
    • Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.
    • Сохранить файл под именем Шаблон.txtв личной папке.
    • Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
    • Сохранить файл под именем index.htmв личной папке.
  • Слайд 7

    Для редактирования файла index.htm необходимо выполнить следующие действия:

  • Слайд 8

    Атрибуты фона Web-страницы

    • Атрибут цвета Web-страницы
    • Атрибут вставки фонового рисунка Web-страницы
  • Слайд 9

    Теги и атрибуты форматирования текста на Web-странице

    • до
    • … тег размера шрифта заголовков тег форматирования шрифта FACE=“Arial"атрибут задания гарнитуры шрифта SIZE=4атрибут задания размера шрифта COLOR=“Red"атрибут задания цвета шрифта ALIGN=“left"атрибут задания выравнивания текста
    • тег для создания горизонтальной линии
    • контейнер для разделения текста на абзацы
  • Слайд 10

    Тег и атрибут вставки изображений на Web-странице

  • Слайд 11

    Теги и атрибуты гиперссылки на Web-странице

    • Указатель тег с атрибутом для создания гиперссылки
    • контейнер для создания гиперссылки на адрес электронной почты
  • Слайд 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-языка на свободную тему.

(Демонстрация презентации, 17 слайд).

Спасибо за урок! До свидания, ребята.

�PAGE \* MERGEFORMAT�1�

Скачать конспект

Сообщить об ошибке