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)#866 (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"
  }
}


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

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

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

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

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

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

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

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