НЕКОММЕРЧЕСКАЯ КОРПОРАТИВНАЯ ОРГАНИЗАЦИЯ
АССОЦИАЦИЯ ПЕДАГОГИЧЕСКИХ РАБОТНИКОВ МОСКОВСКОЙ ОБЛАСТИ

«ПРЕПОДАВАТЕЛИ ИНФОРМАТИКИ ПОДМОСКОВЬЯ»

Ул. Гагарина, д.42, г.Королев, М.О., 141070

ИНН/КПП 5018179774/501801001, ОГРН 1155000002750

Тел./факс 8-495-516-99-29

e-mail: api_korolev@ut-mo.ru

ФИО педагога:Голосова Светлана Викторовна

Предмет, класс: информатика, 8 класс

Название и автор учебника: Информатика (УМК по информатике 8 класс, Семакин)

Тема урока: Атрибуты тэгов. Видеоэффект «бегущая строка» на web-странице» (урок №7 в теме: «Передача информации в компьютерных сетях»

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

Программно – технические средства на уроке:мультимедийный проектор, кейс-задания, мультимедийная презентация

Цель урока:

создать условия для:

- подготовки учащихся к восприятию понятия атрибуты тэгов;

- формирования представления о возможностях изменить web-страницу с помощью атрибутов тэгов;

- развития информационной культуры и абстрактного мышления;

- совершенствования общих учебных навыков работы с информацией.

Личностные результаты:

- принятие и освоение социальной роли обучающегося, развитие мотивов учебной деятельности и формирование личностного смысла учения;

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

Метапредметные результаты:

-овладение способностью принимать и сохранять цели и задачи учебной деятельности, поиска средств ее осуществления;

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

- активное использование речевых средств и средств информационных и коммуникационных технологий (ИКТ) для решения коммуникативных и познавательных задач;

- готовность слушать собеседника и вести диалог;

 -излагать свою точку зрения и аргументировать свою точку зрения и оценку событий.

Предметные результаты:

1.  Понимать смысл и возможность использования атрибутов тэгов для оформления web- страницы;

2. Иметь представление о правильном использовании атрибутов  различных тэгов;

3. Создавать видеоэффект «бегущая строка» на web-странице;

4. Грамотно использовать атрибуты тега <MARQUEE>….</MARQUEE>

 

 

 

 

 

 

 

 

Время

Деятельность учителя

Деятельность ученика

Формируемые  результаты

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

1 мин.

Приветствует учеников. Создает положительную мотивацию к учению.

Садятся на свои места, проверяют принадлежности к уроку.

Навыки самоорганизации

2. Актуальные знания

3 мин.

Создание учебной ситуации, через проверку и повторение пройденного материала

Дети отвечают на вопросы и анализируют свои ответы

Развивать умения слушать и выделять главное, запоминать.

Формировать умения формулировать мысль.

Развивать речь.

Формировать умения анализа высказываний.

3. Открытие нового знания

10 мин.

Объяснение новой темы, сопровождая показом презентации. Объясняет что такое атрибуты тэгов, их значения.

Знакомит с новым тэгом <MARQUEE> и его атрибутами.

Фиксируют основные определения и понятия в тетради.

Формировать основного понятия урока «атрибуты тэгов», а так же понятие тэга «бегущая строка» и его атрибутов.

Развивать навыки исследовательской деятельности.

4. Первичное закрепление во внешней речи

10 мин.

Организует работу по закреплению основного понятия.

Решение практических заданий.  Чтение HTML-кода web-страницы. Проводят эксперимент с  различными атрибутами тэга <MARQUEE> .

Развивать навыки индивидуальной работы

5. Самостоятельная работа с самопроверкой

12 мин.

Организует работу учащихся  с учебным кейсом.

Выполняют задания из учебного кейса.

Выполняют самопроверку

Формировать навыки индивидуальной работы, самоконтроля и самооценки своей деятельности

6. Итог урока. Включение нового знания в систему знаний и повторение.

5 мин.

Вместе с учащимися подводит итоги урока. Выставляет оценки.

Ребята называют основное понятие урока

Формирование выделять главное. Формировать умения формулировать мысль. Развитие речи. Формировать навыков самооценки своей деятельности и самоконтроля.

 

 

 

Текст к уроку.

HTMLявляется описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный файл, с добавленными в него управляющими НТМL-кодами (тегами). В нем разрешено использовать только три управляющих символа: горизонтальную табуляцию, перевод каретки и перевод строки. Это облегчает взаимодействие с различными операционными системами.

Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например <HEAD> или <I>. Для ряда тегов характерно наличие атрибутов (т.е. параметров тега), которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.

Атрибуты тега следуют за именем и отделяются друг от друга пробелами. Порядок записи атрибутов в теге значения не имеет. Атрибут тега состоит из имени, знака равенства и значения – language=“JavaScript. В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов – любые символы.  Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами.  Теги принято писать заглавными буквами, а атрибуты и их значения – прописными (например: <BODYtext=black>).  Это не учитывается программой, но облегчает прочтение кода.

Итак, знакомьтесь! Волшебный тег — <marquee>. Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.

Давайте заставим строку двигаться. Для этого в текстовом  редакторе Блокнот создаем HTML-код и вставляем следующее:

<MARQUEE><h1>Бегущая строка</h1></MARQUEE>

 

<HTML>

<HEAD>

<TITLE>бегущаястрока</TITLE>

</HEAD>

<BODY>

<MARQUEE><h1>Бегущаястрока</h1></MARQUEE>

</MARQUEE>

</BODY>

</HTML>

 

Сохраним файл под именем stroka_1 и расширением .html. 

Откроем файл stroka_1.htmlс помощью браузера InternetExplorer.

Продолжим работу в Блокноте, будем вносить, и сохранять изменения в HTML-код, а в браузере смотреть результат, обновляя страницу (кнопка F5).

 

1. Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево:

<marquee direction="right"><h1>Бегущаястрока</h1></marquee>

По умолчанию тегу <marquee> присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.

2. Подставив значение up для атрибута direction, мы заставим строчку двигаться снизу вверх:

<marquee direction="up"><h1>Бегущаястрока</h1></marquee>

3. Значение down укажет строчке двигаться сверху вниз

<marquee direction="down"><h1>Бегущаястрока</h1></marquee>

4. Мне кажется надо увеличить скорость прокрутки бегущей строки, для этого мы используем атрибут scrollamount. В кавычках указываем число от 1 Например:

<marqueescrollamount="30" direction="right"><h1>Бегущая строка</h1></marquee>

 

Теперь давайте немного остановимся и разберемся, как работает тег <marquee>.

Анимация происходит за счет постоянного затирания информации и отображения ее на новом месте. С помощью значений для атрибута <marquee> мы устанавливаем расстояние в пикселях между стертым и новым положением строчки, тем самым влияя на скорость и плавность ее движения.

По умолчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки.

5. Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.

Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока, начнет движение в обратную сторону:

<marquee behavior="alternate" scrollamount="10" direction="down"><h1>Бегущаястрока</h1></marquee>

6. Значение slide для атрибута behavior дает команду бегущей строчке дойти до границы блока и остановиться:

<marquee behavior="slide" scrollamount="10" direction="down">Бегущаястрока</marquee>

7. Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:

<marquee height="100" direction="up" >Бегущаястрока</marquee>

8.Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:

<marquee width="300" height="300" scrollamount="15" direction="up">Бегущаястрока</marquee>

9. Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:

<marquee bgcolor="#F5FF37" width="300" height="300" scrollamount="12"direction="down">Бегущаястрока</marquee>

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

<marqueewidth="49%" >Бегущая строка</marquee><marqueewidth="49%" direction="right">Бегущая строка</marquee>

 

 

<HTML>

<HEAD>

<TITLE>бегущаястрока</TITLE>

</HEAD>

<BODY>

<MARQUEE><h1>Бегущаястрока</h1></MARQUEE>

<marquee direction="right"><h1>Бегущаястрока</h1></marquee>

<marquee direction="up"><h1>Бегущаястрока</h1></marquee>

<marquee direction="down"><h1>Бегущаястрока</h1></marquee>

<marquee scrollamount="30" direction="right"><h1>Бегущаястрока</h1></marquee>

<marquee behavior="alternate" scrollamount="10" direction="down"><h1>Бегущаястрока</h1></marquee>

<marquee behavior="slide" scrollamount="10" direction="down">Бегущаястрока</marquee>

<marquee height="100" direction="up" >Бегущаястрока</marquee>

<marquee width="300" height="300" scrollamount="15" direction="up">Бегущаястрока</marquee>

<marquee bgcolor="#F5FF37"width="300"height="300"scrollamount="12"direction="down">Бегущаястрока</marquee>

<marquee width="49%">Бегущаястрока</marquee><marquee width="49%" direction="right">Бегущаястрока</marquee>

</MARQUEE>

</BODY>

</HTML>

У каждого на парте лежит кейс-задание, в котором есть вся необходимая информация по теме урока и по выполнению самостоятельной работы.

Задание в кейсе к уроку:

Создайте страницу с бегущей строкой.

1 вариант: На желтом фоне слово «Поздравляю!», движение слева направо, плавно.

2 вариант: На светло-зеленом фоне слово «Вы выиграли ПРИЗ!», движение справа налево, плавно, не скрываясь из виду.

3 вариант: На красном фоне слово «Победа!», движение снизу вверх, плавно.

4 вариант: На фоне аквамарин слово «Успех!», движение сверху вниз, плавно, не скрываясь из виду.

Молодцы, ребята! Мы отлично сегодня потрудились и все успешно справились с самостоятельной работой.