Урок_22 Мультимедійний об'єкт - "біжуча стрічка"

 Мета: ознайомити з  тегами для створення елементу "біжуча стрічка" чи "біжучий малюнок" в  HTML документі

Вивчення нового матеріалу:

Опис

Тег <marquee> створює біжучі стрічку. В дісності зміст контейнера <marquee> не обмежується текстом і дозволяє переміщувати будь-які елементи веб-сторінки  —  зображення, текст, таблиці, елементи форм і т.д. 

Переміщення можна задавати не тільки горизонтально, але й вертикально.  

Синтаксис

<marquee>...</marquee>

Атрибути 

behavior

Задает тип руху контейнера <marquee>.

Синтаксис

<marquee behavior="alternate | scroll | slide">...</marquee>

Значення

alternate

Контент переміщається між правим і лівим краєм елемента.

scroll

Контент переміщується в напрямку, що задається атрибутом direction, потім ховається за межами області, після чого розпосинає рух спочатку. 

slide

                 Контент переміщується в напрямку, що задається                 атрибутом direction, доходить до краю області і зупиняється.

bgcolor

Колір фона.

direction

Вказує напрям руху змісту контейнера <marquee>.

Опис

Зміст контейнера <marquee> може рухатися в 4 напрямках, не тільки вліво та вправо, а також вгору і вниз. 

Синтаксис

<marquee direction="down | left | right | up">...</marquee>

Значения

down

рух зверху вниз.

left

рух зліва направо.

right

рух  в праву сторону.

up

рух вгору.

height

Висота смуги прокрутки.

hspace

Горизонтальні поля навколо контента.

loop

Задает, скільки раз буде прокручуватись зміст.

scrollamount

Швидкість руху  контента.

scrolldelay

Величина затримки в мілісекундах між рухами. 

vspace

Вертикальні поля навколо змісту.

width

Ширина області прокрутки.

Приклад біжучої стрічки тексту:

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

Результат:

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

<marquee behavior="scroll" direction="left">Бегущая строка</marquee>

Результат:

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

<marquee behavior="scroll" direction="right"> <img src="../images/Chrome.png" /> </marquee>

Результат:

Формування практичних навичок: 

 Створити розмітку веб сторінки з назвою Рідна мова,  в якій відобразити наступне: 

- Біжуча стрічка з текстом: "Поважаючи мову своєї держави - ти поважаєш себе"

- зліва додати портрет Тараса Григоровича Шевченка (українського письменника)

- навколо портрету розмістити вірш про значимість української мови

- додати горизонтальну лінію на весь аркуш

- додати заголовок першого рівня "Основні положення"

- абзацом додати текст, який відображає основні положення 30 статті закону «Про забезпечення функціонування української мови як державної»

2. Приблизний зразок

3. Збережи код сторінки під назвою "Стрічка_Прізвище.HTML"

4. Збережіть скріншот відображення вашої сторінки в браузері під іменем "Урок22_Прізвище"

5. Здай обидва файли  в Google Classroom

При роботі можна скористатися підказками: 

1. Створення заголовку сторінки  

2.  Вставлення та редагування картинки

3. Оформлення тексту

4. Заголовок

5. горизонтальна лінія

6. Сторінка