Основы HTML. Элементы мультипликации

Разделы: Информатика


Цели урока:

Обучающая: дать представление основных понятий Web – сервер, Web – сайт, Web – страница, гиперссылка, тег, структура HTML – документа, технология создания Web-страниц;
Развивающая: умение сравнивать и обобщать;
Воспитательная: воспитание информационной культуры, положительное отношение к знаниям.

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

Вид урока: теоретический урок

Методы: объяснительно-иллюстративный, репродуктивный

Используемые материалы: класс оборудованный ПК, презентация, карточки.

Ход урока.

Организационный момент.

Подготовка к основному этапу урока.

  • Тема, с которой мы познакомились называлась….? (Компьютерные коммуникации)
  • Назовите одну из самых популярных услуг Internet? (WWW – всемирная паутина, которая позволяет просматривать Web - страницы)

Любой пользователь 21 века должен уметь представлять свою информацию в Internet. Тема следующего раздела, с которым мы познакомимся Web – конструирование.

Объяснение нового материала. Рис.1

Рис. 1

  • Где находятся Web – страницы? (На Web - серверах)

Web – сервер - компьютер в сети Internet, хранящий Web-страницы и соответствующее программное обеспечение для работы с ними.

  • Информация на Web – серверах представлена в виде … (Web - сайта)
  • Что такое Web – сайт? (Объединение Web – страниц одной темой)
  • А что ещё характерно для Web – сайт? (Наличие титульной страницы, которая называется домашняя или главная)

На Web – страницах находится информация.

  • А какая информация? (Текстовая, графическая, звуковая, видео) Web – страницы являются мультимедийными.

Задание. Восстановите аналогичную цепочку.   Рис. 2

Рис. 2

(Ответ: библиотека книга страница)

  • Страницы в книге соединены механическим путём (переплёт, склеивание, с помощью скоб и т. д.), а в Web – сайтах как соединены Web – страницы? (Гиперссылками)
  • Что такое гиперссылка? (Гиперссылка осуществляет переход от одной страницы к другой)
  • Как узнать, что в тексте есть гиперссылка? (Выделена другим цветом или курсор на ссылке меняет свою форму и превращается в указующий перст)

Для того, чтобы создать Web – страницу нужно написать программу.

  • Где вы встречались с этим словом? (Когда изучали основы программирования)

Вы писали команды на языке программирования Basic и получалась программа.

Вспомним технологию создания программы на языке программирования Basic:

1. Набор текста программы.
2. Запуск программы.
3. Сохранение программы с расширением *.bas.

Теперь мы будем действовать по другому. Нам необходимо будет иметь 2 программы:

1. Блокнот (для создания текста программ Пуск® Программы® Стандартные® Блокнот)
2. Браузер Internet Explorer (будет отображать информацию в своём рабочем окне)

Технология создания Web – страницы:

1. Набор текста программы.
2. Сохранение программы с расширением *.htm.
3. Запуск.

  • А на каком языке мы будем писать программу для создания Web – страницы? (На языке HTML).

Прежде чем начать писать программу на языке HTML, мы познакомимся с основами языка HTML.

Тема урока: “Основы HTML”.

Сначала познакомимся с историей создания языка HTML. (Раздаются карточки с историей создания языка HTML, учащиеся знакомятся, а затем рассказывают).

История создания HTML (Hyper Text Markup Language — язык разметки гипертекста)

Некоторые даты:

- В 1945 году американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста.

- В 1968 году Дуглас Энджельбарт (создатель программного диалогового интерфейса, который реагировал на действия специального указателя - курсора, а так же создатель манипулятора - мыши) демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.

История языков разметки уходит в 1960-е годы, когда сотрудники компании IBM взялись за решение задач переноса документов между различными платформами и операционными системами. Результатом их усилий стал язык GML (General Markup Language - общий язык разметки), который предназначался для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был расширен, а в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Этот мощный и универсальный режим разметки, названный SGML (Standart General Markup Langugage), использовался военным ведомством США для оформления технической документации. Однако SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации.

Следующий этап развития языков разметки связан с именами учёных-физиков, сотрудников CERN (Европейский Центр Ядерных Исследований) в Женеве. Так, в конце 80-х годов Тим Бернерс-Ли занялся проблемой хранения и отображения данных, полученных коллегами. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.

В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок.

Термин "гипертекст" впервые был введён Тедом Нельсоном в 1960-х годах. Понятие "гипертекст" обозначает электронный документ, который содержит в себе ссылки на другие документы.

Разработка HTML привела в итоге к новой технологии распространения гипертекстовых документов в Internet. Однако для широкого распространения WWW, кроме языка HTML, потребовалась разработка протокола передачи гипертекста HTTP (HyperText Transfer Protocol - протокол передачи гипертекста), который позволил осуществлять обмен документами HTML. Именно этот протокол дал возможность приложению-клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа.

Первые HTML-документы, обращавшиеся в Internet в начале 90-х годов, были исключительно текстовыми. Так было до тех пор, пока в NCSA (Национальный центр исследования сверхпроводников) Иллинойского университета не был разработан первый графический интерфейс (Mosaic) для HTML-документов. Впоследствии с появлением множества простых и доступных браузеров для Web и для других служб Internet началась новая эра для HTML. Язык HTML стал основным инструментом для распространения информации в Internet, хотя изначально он предназначался для организации информации в пределах одного научного центра.

Основным понятием языка HTML является понятие тег. ТЕГ – инструкция браузеру, указывающие способ отображения информации. Рис.3

Рис. 3

Задание. Даны теги, определить парные и одиночные теги.

<H1> </H1>, <Br>, <Hr>, <Head> </Head>

  • Теги пишутся с использованием, какого алфавита? (Латинского)
  • При написании тегов используются только буквы? (Нет, еще и цифры)

Структура HTML – документа. Рис.4

Рис. 4

Подведение итогов, завершение урока.

Учащиеся у доски заполняют пропущенные места.

язык® . . . . (HTML)

 

расширение файла® . . . . (*.htm)

 

<BODY>® . . . (тег)

первый тег программы ® . . . (<HTML>)

Запуск программы Блокнот ® . . . (Пуск ® Программы ® Стандартные ® Блокнот)

Гиперссылка ® . . . (переход от одной страницы к другой)

HTML-программу выполняет ® . . . . (Internet Explorer)

Парный тег ® . . . (< > </ >)

Web – сайт состоит из ® . . . (Web – страниц)

Текст программы пишем ® . . . (в программе Блокнот)

На следующем уроке будем создавать Web – страницы.

Элементы мультипликации.

Цели:

Обучающая:

  • сформировать у учащихся первичные представления о методе создания мультипликации;
  • организовать деятельность учащихся по изучению способа мультипликации в среде Лого;
  • организовать деятельность учащихся по самостоятельному применению алгоритма создания мультфильма в среде Лого.

Развивающая:

  • создать условия для развития умений анализировать познавательный объект;
  • создать условия для развития алгоритмического мышления учащихся;
  • содействовать развитию умений осуществлять самоконтроль;
  • способствовать развитию эстетических взглядов учащихся.

Воспитательная:

  • воспитание инициативы у учащихся;
  • воспитание эстетических вкусов учащихся.

Вид урока: практическая работа

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

Оборудование: класс, оборудованный ПК, карточки с заданиями, файлы, конверт с 7 фигурками танграма.

План урока:

1. Организационный момент (1-2 мин)
2. Логическая разминка. (5 мин )
3. Подготовка к основному этапу урока. (5-7 мин)
4. Изучение новой темы. (4-5 мин)
5. Первичная проверка ЗУН. (2-3 мин)
6. Закрепление знаний и способов действий. (15-17 мин)
7. Подведение итогов и завершение урока. (2-3 мин)

Ход урока:

Организационный момент (приветствие, проверка готовности учащихся к занятию, организация внимания).

Логическая разминка.

Задание. За 3 мин Вы должны собрать фигурку кошки из всех деталей танграма. Рис.5 [1]

Рис. 5

Пояснение. З мин ребята собирают фигуру, по истечении времени демонстрация фигурки из 7 фигурок. Если у некоторых учащихся не получилось, то они собирают по демонстрации.

Подготовка к основному этапу урока.

Художники всех времен и народов мечтали о возможности передать в своих произведениях процесс движения. Мечтали и нашли следующий выход. Давайте рассмотрим, как они решили эту задачу.

Посмотрите на картинки и сделайте каждый свой вывод.

Показ демонстрации “Страус в беге (медленно)”.

  • Глядя на эти картинки, какой вывод вы сделали? (Картинки отличаются положением ног, крыла и т.д.)

Положение ног, крыла и т.д называется фазами движениями.

  • Посмотрите еще раз на эти картинки и сделайте каждый свой вывод.

Показ демонстрации “Страус в беге (быстро)”.

  • Глядя теперь на эти же картинки, какой вывод вы сделали? (Страус бежит, картинки быстро сменяют друг друга).
  • Хотите на сегодняшнем занятии быть мультипликаторами? (Да)

Цель нашего занятия составить алгоритм создания мультфильма и создать свой первый мультфильм.

Тема занятия Элементы мультипликации.

  • В чем же заключается эффект мультипликации? (Эффект мультипликации достигается быстрой сменой рисунков, отличающихся фазами движения.)
  • Как сделать фазы движения в Логомирах? (Создать различные формы в Поле форм)
  • Какая команда изменяет форму черепашки? (нф “имя формы)
  • Какие команды мы используем для перемещения черепашки? (вп число, нк число)

Изучение новой темы.

Давайте посмотрим, какой мультфильм мы можем сделать, используя те, команды, с которыми мы уже знакомы.

Показ готового мультфильма.

А сейчас вместе со мной, а затем каждый отдельно. Мы составим алгоритм, инструкцию, для черепашки, выполнив которую получается такой мультфильм.

  • Посмотрите внимательно на поле форм, есть ли что-нибудь касающееся темы нашего занятия? (Да, формы, отличающиеся фазами движения)
  • Какие? (Собака, пчела, бегун и т.д.)

В нашем мультфильме мы будем использовать форму пчелы.

  • Имя первой формы? (пчела1)
  • Имя второй формы? (пчела2)

Открываем окно инструкций для черепашки. С помощью команды нф “пчела1 одеваем черепашку в эту форму, затем сменяем эту форму на форму пчела2 нф “пчела2.

  • Смотрим, что происходит? (Черепашка форму меняет, но летит)
  • Какую команду нужно дописать? (вперед)
  • Смотрим, что происходит? (Пчела движется вверх)
  • Чтобы изменить направление движения пчелы, какую команду нужно дописать? (нк 90)
  • Смотрим, что происходит? (Мелькание)
  • Какую команду нужно дописать? (жди 1)

Пчела полетела так, как мы с вами захотели.

  • У нас летает одна пчела. Как сделать стаю пчел? (Редактор - Копируй, Редактор - Верни)

Картинку вместе с вами оживили.

  • Всем понятно?

А теперь запишите тему занятия: Элементы мультипликации.

Основные понятия: фаза движения, быстрая смена рисунка.

Алгоритм: нф “пчела1 вп 5 жди 1 нф “пчела2 вп 5 жди 1

Первичная проверка ЗУН.

А теперь поиграем.

Команда

жди 1
нф “человек1
вп 3
жди 1
нф “человек2
вп 3

Класс делится на две группы, каждому члену группы выдается карточка с командой.

Задание. Имеется две формы для черепашки Роллер1 и Роллер2 (показ форм). В течении 1 мин вы должны выстроиться таким образом, чтобы получился алгоритм, инструкция для черепашки, выполнив которую роллер поедет по экрану.

Учащиеся выстраиваются, затем смотрят на противоположную группу и сравнивают. Напротив друг друга должны стоят учащиеся с одинаковыми командами.

  • Кто быстрее будет двигаться человек или пчела? Почему? (пчела вп 5)

Закрепление знаний и способов действий.

Садимся за ПК.

Сейчас в течении 10 мин вы будете создавать свой первый мультфильм. На столах карточки с заданием, внимательно читаем и выполняем.

По истечении 10 мин.

Садимся за парты.

  • Почувствовали себя в роли мультипликаторов?
  • Успешен ли ваш первый опыт?
  • Кто хочет защитить свой проект?

Защита проекта одним из учащихся.

Подведение итогов и завершение урока.

Подведем итоги занятия.

  • Что на занятии было главным? (Мультипликация = фазы движения + смена картинки)
  • А что было интересным? (Движение объектов)
  • Чему вы научились сегодня? (Составлять алгоритм для черепашки, выполнив которую она движется и меняет формы)
  • По какой линии двигались наши персонажи или объекты? (По прямой)

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

Благодарю за урок. До свидания.

Литература.

1. Истомина Т.Л., Обучение информатике в среде Лого. Рабочая тетрадь 2. Москва, 1999.
2. Юдина А.Г., Практикум по информатике в среде LogoWriter. INT, Москва, 1997.