kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

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

Нажмите, чтобы узнать подробности

Предмет  информатика

Класс  10

Тема    Основы языка разметки гипертекста

Цель: Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании

 Обучающие задачи:  дать представление учащимся о структуре web-страниц, познакомить с основными тегами

Развивающие задачи: способствовать развитию информационной культуры; развивать эмоциональную сферу:  формировать положительные эмоции  к процессу обучения

Воспитательные задачи: воспитывать уважение и  умение сотрудничать с окружающими людьми, трудолюбие  и добросовестность, воспитывать  интерес  к занятиям информатикой  как возможной области будущей практической деятельности

Тип урока  изучение нового материала

Формы работы учащихся индивидуальная, фронтальная

Необходимое оборудование компьютер, проектор, экран, презентация, листы рефлексии

Просмотр содержимого документа
«Урок 10 кл»

ПЛАН-КОНСПЕКТ УРОКА

Основы языка разметки гипертекста


ФИО(полностью) Спичкова Наталья Викторовна

Место работы МБОУ Верхне-Талызинская СОШ, Сеченовского района, Нижегородской области

Должность учитель информатики

Предмет информатика

Класс 10

Тема Основы языка разметки гипертекста



Цель: Изучение основ языка разметки гипертекста HTML и использование его при Web-конструировании

Обучающие задачи: дать представление учащимся о структуре web-страниц, познакомить с основными тегами

Развивающие задачи: способствовать развитию информационной культуры; развивать эмоциональную сферу: формировать положительные эмоции к процессу обучения

Воспитательные задачи: воспитывать уважение и умение сотрудничать с окружающими людьми, трудолюбие и добросовестность, воспитывать интерес к занятиям информатикой как возможной области будущей практической деятельности

Тип урока изучение нового материала

Формы работы учащихся индивидуальная, фронтальная

Необходимое оборудование компьютер, проектор, экран, презентация, листы рефлексии
























СТРУКТУРА И ХОД УРОКА

1.Организационный момент (2 мин.)

Учитель: Здравствуйте, ребята! Мы живём в современном информационном мире, в котором Интернет – это мир общения, познания, увлечения. Тема нашего урока связана с Интернетом: Основы языка разметки гипертекста HTML.

(слайд №1)

Открываем тетради, записываем дату и тему урока.


2.Актуализация знаний (2 мин.)

Учитель: Предлагаю вспомнить некоторые понятия (беседа с учащимися).

Web-страница (англ. Web page) — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия).

Всеми́рная паути́на (англ. World Wide Web) — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету (Википедия).

Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (Википедия).

3. Объяснение нового материала (35 мин.)

(слайд №2)

Учитель: Что такое HTML? (рассказ учителя с элементами беседы)

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.

Web-страницы можно создать с помощью языка HTML.







Понятие тега.

(слайд №3)

В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.

Теги заключаются в угловые скобки и могут быть одиночными или парными.

Парный тег содержит открывающий и закрывающий теги (контейнер).

Например, код Web-страницы помещается внутрь контейнера

HTMLHTML

Теги могут записываться как прописными, так и строчными буквами.

Оформление конспекта учащимися.



Понятие атрибута.

(слайд №4)

Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.

Например,

Моё имяЛиза

FONT

Оформление конспекта учащимися.



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

(слайд №5)

HEAD

TITLE

Название Web-страницы

TITLE

HEAD

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

Просмотр содержимого презентации
«HTML»

Основы языка разметки гипертекста HTML

Основы языка разметки гипертекста HTML

( HTML ) Hyper Text Markup Language – язык разметки  гипертекстовых документов. Web -страницы можно создать с помощью языка HTML Web -страницы могут быть созданы с помощью:  обычного текстового редактора;  редактора, способного сохранять в формате HTML;  специализированного редактора;  специализированной системы.

( HTML ) Hyper Text Markup Language – язык разметки гипертекстовых документов.

Web -страницы можно создать с помощью языка HTML

Web -страницы могут быть созданы с помощью:

обычного текстового редактора;

редактора, способного сохранять в формате HTML;

специализированного редактора;

специализированной системы.

В обычный документ вставляются управляющие символы - HTML-теги , которые определяют вид Web- страницы при её просмотре в браузере.  Теги заключаются в угловые скобки  и могут быть одиночными или парными.  Парные тег содержит открывающий и закрывающий теги (контейнер). Например, код Web -страницы помещается внутрь контейнера …  и состоит из 2-х частей: заголовка и содержания.  Теги могут записываться как прописными, так и строчными буквами.

В обычный документ вставляются управляющие символы - HTML-теги , которые определяют вид Web- страницы при её просмотре в браузере.

Теги заключаются в угловые скобки и могут быть одиночными или парными.

Парные тег содержит открывающий и закрывающий теги (контейнер).

Например, код Web -страницы помещается внутрь контейнера

… и состоит из 2-х частей: заголовка и содержания.

Теги могут записываться как прописными, так и строчными буквами.

Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web -страницы. Например,     Моё имя – Лиза

Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web -страницы.

Например,

Моё имя – Лиза

Название Web-страницы     На этой странице можно разместить любую интересную информацию в Интернете.

Название Web-страницы

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

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

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

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

  • Атрибут вставки фонового рисунка Web -страницы

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

… до … тег размера шрифта заголовков

… тег форматирования шрифта

FACE =“Arial” атрибут задания гарнитуры шрифта

SIZE =4 атрибут задания размера шрифта

COLOR =“Red” атрибут задания цвета шрифта

ALIGN =“left” атрибут задания выравнивания текста

тег для создания горизонтальной линии

контейнер для разделения текста на абзацы

Указатель  тег с атрибутом для создания гиперссылки … контейнер для создания гиперссылки на адрес электронной почты

Указатель тег с атрибутом для создания гиперссылки

… контейнер для создания гиперссылки на адрес электронной почты

Для связывания Web- страниц используют гиперссылки. Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей. Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
  • Для связывания Web- страниц используют гиперссылки.
  • Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
  • Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
Какие тэги (контейнеры) должны присутствовать в HTML -доку­менте обязательно? Какова логическая структура Web -страницы? Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Какой тэг и его атрибуты используются для вставки изображений в Web -страницы?
  • Какие тэги (контейнеры) должны присутствовать в HTML -доку­менте обязательно?
  • Какова логическая структура Web -страницы?
  • Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта?
  • Какой тэг и его атрибуты используются для вставки изображений в Web -страницы?


Получите в подарок сайт учителя

Предмет: Информатика

Категория: Уроки

Целевая аудитория: 10 класс

Автор: Спичкова Наталья Викторовна

Дата: 17.01.2015

Номер свидетельства: 157084

Похожие файлы

object(ArrayObject)#863 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(133) "Программа Предметного курса по выбору (информатика) 10 класс (профильный) "
    ["seo_title"] => string(73) "proghramma-priedmietnogho-kursa-po-vyboru-informatika-10-klass-profil-nyi"
    ["file_id"] => string(6) "111828"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(12) "planirovanie"
    ["date"] => string(10) "1407949651"
  }
}

ПОЛУЧИТЕ БЕСПЛАТНО!!!
Личный сайт учителя
Получите в подарок сайт учителя


Видеоуроки для учителей

Курсы для учителей

ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

Добавить свою работу

* Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

Удобный поиск материалов для учителей

Ваш личный кабинет
Проверка свидетельства