Элемент движения в языке разметки html

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

Тема урока: «Элемент движения в языке разметки HTML».

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

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

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

Время проведения: десятый урок по теме «Коммуникационные технологии».

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

Задачи:

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

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

Подготовительный этап: рассаживаю детей, как положено (по одному за стол с компьютером), на столах то, что написано выше. На доске записана тема урока, число, домашнее задание.

Ход урока.

1. Организационный этап
2. Этап всесторонней проверки знаний
3. Этап подготовки учащихся к активному сознательному усвоению нового материала
4. Этап усвоения новых знаний
5. Этап первичной проверки знаний
6. Этап закрепления знаний
7. Итог урока, информация учащимся о домашнем задании и инструктаж по его выполнению

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

Здравствуйте, ребята! Отсутствующие, причины. Психологический настрой детей на урок.

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

Запрещается:

• Находиться в верхней одежде.
• Употреблять ненормативную лексику.
• Употреблять пищу за компьютером.
• Трогать руками экран монитора.
• Играть в компьютерные игры в учебное время.
• Включать/выключать компьютер без разрешения учителя.
• Переставлять, отсоединять, разбирать устройства компьютера.
• Класть рядом с компьютером посторонние предметы.
• Удалять компьютерные программы.
• Подносить к устройствам компьютера металлические и намагниченные предметы.

За грубое нарушение правил поведения учащийся может быть лишён права использования вычислительной техникой.

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

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

1. Что такое язык разметки HTML? (структурированный язык, используемый для создания Web-страниц)
2. Что является основным объектом разметки? (элемент)
3. Что входит в элемент? (тэг, атрибут и значение)
4. Какие бывают тэги? (парные и непарные)
5. В чём особенность парных тэгов по отношению к непарным? (парный тэг имеет открытый тэг и закрытый)
6. Для чего тэгу необходим атрибут? (для форматирования этого тэга)
7. Что значит отформатировать тэг? (придать ему «красоту», то есть стиль, размер и т.д.)
8. Какие программы необходимы для создания разметки HTML? (простой текстовый редактор и программа-браузер)
9. Для чего нам необходим текстовый редактор? (для написания разметки)
10. Для чего нам необходима программа-браузер? (для преобразования текстового файла в Web-страницу)
11. Где мы можем просмотреть значение нашего тэга? (на Web-странице).

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

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

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

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

Вопросы:

1. Какие основные тэги должны быть в текстовом документе? Слайд № 3.
2. Что означает тэг <html>?
3. Что означает тэг <body>?

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

• Направление бегущей строки - direction, у атрибута четыре значения: направо (right), налево (left), вверх (up) и вниз (down). Слайд № 5. Если мы используем направления направо или налево, то необходимо добавить ещё один атрибут «width» по ширине области вывода строки. Например: <marquee direction=”right” width=100>элемент</marquee><br>. Слайд № 6. Учащиеся набирают и проделывают. Ссылка в этом слайде. Если мы используем направления вверх или вниз, то необходимо добавить атрибут «height» по высоте области вывода строки. Например: <marquee direction=”up” height =50>движения</marquee><br>. Слайд № 7. Учащиеся набирают и проделывают. Ссылка в этом слайде.
• Цвет фона бегущей строки – bgcolor, у этого атрибута одно значение – это название цвета (либо по-английски, либо шестнадцатеричный код цвета). Слайд № 8. Например: <marquee bgcolor=”red”>языка</marquee><br>. Слайд № 9. Учащиеся набирают и проделывают. Ссылка в этом слайде.
• Количество проходов – loop, у этого атрибута одно значение – число от -1 (бесконечное число проходов) до любого целого числа. Слайд № 10. Например: <marquee loop=”1”>разметки</marquee><br>. Слайд № 11. Учащиеся набирают и проделывают. Ссылка в этом слайде.
• Вы уже знаете, что тэги можно совмещать. Так и здесь. Слайд №12. Для того, что бы придать цвет, стиль, размер нашей строке, необходимо совместить два тэга: <marquee> и <p>. А у тэга <p> есть атрибут «style». Например: <marquee><p style=”color: green;font-size: 20pt;font-family: стиль”>html</p></marquee>. Учащиеся набирают и проделывают. Ссылка в этом слайде.

В результате получилась «оживлённая» Web-страничка по данной теме.

Физминутка.

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

Этот этап проходит в виде теста с самопроверкой по пройденному материалу. Готовый тест находится у каждого ученика на столах. В тесте из двух вариантов по 6 вопросов с тремя вариантами ответов. Слайд №13. На тест даётся три минуты и после этого происходит проверка.

Вопросы теста (I вариант): Слайд №14.

1. Какие бывают тэги? (парные и непарные; одиночные; непарные) (щелчок1 в слайде № 14)
2. Каким тэгом задаётся «бегущая» строка? (<html>, <marquee> и </marquee>, <bgcolor>) (щ2)
3. Какой тэг задаёт стиль «бегущей» строке? (<color>, <body> и </body>, <p> и </p>) (щ3)
4. Что устанавливает атрибут тэга? (значение тэга, форматирование тэга, редактирование тэга) (щ4)
5. Какой атрибут по направлению имеет «бегущая» строка? (direction, loop, bgcolor) (щ5)
6. Сколько значений имеет атрибут «bgcolor»? (четыре, два, одно) (щ6)

Вопросы теста (II вариант): Слайд №15.

1. Что является основным объектом HTML? (элемент, тэг, атрибут) (щелчок1 в слайде № 15)
2. Какой тэг имеет «бегущая» строка? (одиночный, парный, непарный) (щ2)
3. Какой атрибут задаёт цвет фона «бегущей» строке? (body, bgcolor, loop) (щ3)
4. В каком тэге мы прописываем тело разметки? (<html>, <b>, <body> и </body>) (щ4)
5. Сколько значений имеет атрибут «direction»? (четыре, пять, одно) (щ5)
6. Каким атрибутом задаётся количество проходов «бегущей» строки? (loop, b, bgcolor)

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

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

Этот этап проходит в виде практической работы на пройденную тему. Практическая работа с заданиями лежит у учащихся на столах. Слайд № 16. В работе необходимо выполнить четыре задания по данной теме. Учащиеся выполняют задания в соответствующем программном обеспечении ПК на той же самой странице, отчертив её горизонтальной линией - <hr>, сохраняют его, происходит проверка.

Задания:

1. Создать «бегущую» строку с любым текстом по направлению слева направо.
2. Создать «бегущую» строку с любым текстом по направлению сверху вниз.
3. Установить для следующей «бегущей» строки цвет фона – зелёный.
4. Создать «бегущую» строку размером 30pt и любым цветом.

Решение:  Слайд №17.

1. <marquee direction=”right”> информатика</marquee>
2. <marquee direction=” down”> информатика</marquee>
3. <marquee bgcolor=”green”> информатика</marquee>
4. <marquee><p style=”color: green;font-size: 30pt”> информатика</p></marquee> Ссылка на результат в этом слайде.

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

Я задаю вопросы на цель. В форме беседы проговариваем, отличившимся детям за работу на уроке ставлю отметки.

С каким элементом движения мы сегодня с вами познакомились? (строкой)

Каким тэгом задаётся этот элемент? (<marquee>)

Какие имеет атрибуты? (направление, фон, число проходов, форматирование)

После этого учащиеся отправляют полученные работы по локальной сети своему преподавателю на компьютер. Слайд №18. Домашнее задание учащимся записано на листочках с теоретической частью. В нём два задания на закрепление: 1) создать «бегущую» строку по направлению справа налево, любым цветом и стилем; 2) создать «бегущую» строку с числом проходов = 2, любым цветом фона.

Раздаточный материал

Приложения 1-7