Бегущая строка в HTML

Раздел программы: «Коммуникационные технологии».

Тема урока: «Бегущая строка в языке разметки HTML».

Вид урока: урок с применением современных компьютерных технологий, объяснительный.

Тип урока: комбинированный.

Технология: личностно-ориентированная.

Цель: изучение и первичное знакомство с одним из элементов движения в языке разметки, атрибутов этого элемента, осмысление связей и отношений в объектах изучения.

Задачи:

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

• обучающая – сформировать представление о движущемся элементе–бегущей строке, её атрибутов по установке цвета, размера, стиля, движения;

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

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

Программное обеспечение: операционная система WINDOWS ХР, программа Блокнот, Браузер - Internet Explorer, Google Chrome.

1. Организационный этап

2. Этап всесторонней проверки знаний

3. Этап подготовки учащихся к активному сознательному усвоению нового материала

4. Этап усвоения новых знаний

5. Этап первичной проверки знаний

6. Этап закрепления знаний

7. Итог урока, информация учащимся о домашнем задании и инструктаж по его выполнению

Здравствуйте, ребята!

Тема нашего урока «Бегущая строка в языке разметки HTML». Сегодня на уроке мы с вами познакомимся с одним из элементов движения HTML, основными атрибутами для этого элемента, научимся создавать Web-страничку с этим движущимся элементом, заодно закрепим навыки работы в таких программах, как: простой текстовый редактор, программа-браузер. В тетрадях записываем число и тему урока.

Происходит проверка знаний по пройденному материалу в форме беседы:

1. Что такое язык разметки HTML? (структурированный язык, используемый для создания Web-страниц)

2. Что является основным объектом разметки? (элемент)

3. Что входит в элемент? (тэг, атрибут и значение)

4. Какие бывают тэги? (парные и непарные)

5. В чём особенность парных тэгов по отношению к непарным? (парный тэг имеет открытый тэг и закрытый)

6. Какие программы необходимы для создания разметки HTML? (простой текстовый редактор и программа-браузер)

7. Для чего нам необходим текстовый редактор? (для написания разметки)

8. Для чего нам необходима программа-браузер? (для преобразования текстового файла в Web-страницу)

А сейчас мы с вами познакомимся с новым элементом нашей разметки – элементом движения. Как мы уже с вами знаем, разметка нам нужна для написания тэгов и преобразования их в Web-страничку, а совокупность этих страничек составляют сайт. Зная определённые правила написания можно создавать свой сайт, а так же его редактировать и форматировать.

Подготавливаем материал для работы: создаём папку под именем Урок3, открываем её и в ней создаём текстовый документ, вводим в него основные тэги для работы с разметкой и сохраняем как web-страницу Run.html (для просмотра результата).

Вопросы:

1. Какие основные тэги должны быть в текстовом документе? 

2. Что означает тэг ? ( и . Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML)

3. Что означает тэг ead? (Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.) Для того чтобы дать название своему HTML-документу текст помещается между тегами и )

4. Что означает тэг ? (Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML)

Чтобы осуществить «бегущую» строку на web-странице, используется парный тэг . Например: информатика . Учащиеся набирают прорабатывают. Просматриваем результат. Для этого тэга, как и для многих, есть свои атрибуты для форматирования тэга, то есть установки его фона, стиля, размера, направления и т.д. Для тэга есть тоже свои атрибуты. Мы сейчас с ними и познакомимся.

• direction - направление бегущей строки, у атрибута четыре значения: направо (right), налево (left), вверх (up) и вниз (down). Если мы используем направления направо или налево, то необходимо добавить ещё один атрибут «width» по ширине области вывода строки. Например: элемент
  .  Учащиеся набирают и проделывают.  Если мы используем направления вверх или вниз, то необходимо добавить атрибут «height» по высоте области вывода строки. Например: движения
  .  Учащиеся набирают и проделывают. 

• Цвет фона бегущей строки – bgcolor, у этого атрибута одно значение – это название цвета (либо по-английски, либо шестнадцатеричный код цвета). Например: языка
  . Учащиеся набирают и проделывают. 

• Количество проходов – loop, у этого атрибута одно значение – число от -1 (бесконечное число проходов) до любого целого числа.  Например: разметки
  . Учащиеся набирают и проделывают.

• Вы уже знаете, что тэги можно совмещать. Так и здесь. Для того, что бы придать цвет, стиль, размер нашей строке, необходимо совместить два тэга: и font. Например: Comic Sans MS”html. Учащиеся набирают и проделывают. 

Записать в тетрадях:

Marquee … Marquee - тэг «бегущей строки».