Тег marquee

Тег marquee или второе название “бегущая строка в html коде”. С помощью несложного кода, даже еще проще, с помощью всего одного тега создает бегущую строку на вашем сайте. Все ровно также как по телевизору. Смотрите новости, а там внизу бегущая строка с котировками акций или прогнозом погоды. Так и мы научимся делать такую же бегущую строку как по телевизору, только на веб сайте. Тег marquee исторически был создан для всеми любимого Internet Explorer, но позднее стал поддерживаться и другими браузерами.

Важная заметка, данного элемента нет в спецификации HTML и поэтому если вы будете прогонять написанный код через валидатор, то он выдаст ошибку, код будет не валиден. Более того он считается устаревшим, эту функцию можно лучше реализовывать с помощью CSS или JavaScript. Тег является парным, и он блочный элемент. 

Правильно пишем тег
<marquee> Указываем нужный текст</marquee>
Имеются личные атрибуты, которые важны, рассмотрим их подробнее. Без знания атрибутов смысла в этом теге нету.

Атрибуты тега marquee

Атрибут behavior и его значения

Задает стиль перемещения строки по монитору или экрану, то есть именно этот атрибут обозначает ход движения. Возможные значения атрибута

Alternate – устанавливает движение от одного края экрана к другому. То есть когда строка достигнет левой части экрана, она начнет двигаться к правой.
<marquee behavior="alternate">

Scroll – строка начинает движение с указанного места атрибутом direction. Если это было left, то строка начинает движение с левой части экрана. Достигнув конца она заезжает за край, и снова появляется слева. И так до бесконечности.
<marquee behavior="scroll">

Slide – Это значение также начинает свой путь с места которое укажет direction, но достигнув края, остановится. Действие можно будет повторить только путем перезагрузки страницы.
<marquee behavior="slide">

Атрибут direction и его значения

Из материала чуть повыше, вы уже понимаете, что это такое. Но все равно поговорим про него. Атрибут direction задает начальную точку движения вашего контента.

Left – перемещение строки происходит справа налево.
<marquee behavior="slide" direction="left">

Right – перемещение строки происходит слева направо.
<marquee behavior="slide" direction="right">

Down – перемещение строки происходит сверху вниз.
<marquee behavior="slide" direction="down">

Up – перемещение строки происходит снизу вверх.
<marquee behavior="slide" direction="up">

Атрибут bgcolor

Атрибут задает фоновый цвет вашего бегунка. Штука полезная, привлекательная, пользоваться будете, поэтому советуем запомнить. Значением устанавливаете любой цвет. Например красный:
<marquee behavior="alternate" direction="left" bgcolor="red">

Итак мы изучили достаточное количество атрибутов для того, чтобы уже что-то сделать. Поэтому давайте попробуем. Скопируйте этот код и создайте html файл, чтобы увидеть как работает бегущая строка.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Бегущая строка на webm.tech</title>
</head>
<body>
    <marquee behavior="alternate" direction="left" bgcolor="red">
    Добавь webm.tech в закладки браузера
    </marquee>
</body>
</html>

Дожно получиться так:

Тег marquee в действии

Height Width

Эти друзья задают ширину и высоту. Используйте совместно с bgcolor чтобы достигнуть интересного результата. Работает со всеми абсолютными величинами: px, em и т.д. В базовой настройке ширина поля занимает 100%, высота 12 px.
<marquee behavior="alternate" direction="left" bgcolor="red" height="30px">

Итог

Друзья, вы узнали, что есть html тег marquee и называют его еще бегущая строка в html коде. Помните, что он устаревший и в спецификации его нет. Поэтому разумнее и валиднее будет использовать для достижения подобного эффекта CSS или JS.

webm.tech