Создать бегущую строку на сайте – проще простого.
Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений и т.д.
Для создания бегущей строки используют тег:
HTML теги, определяющие бегущую строку текста или изображение
В HTML бегущая строка определяется тегами .
- Атрибут behavior="" – определяет тип движения текста. При значении alternate текст движется слева направо, достигнув края, меняет направление. При значении scroll бегущая строка, достигнув края, появляется с противоположной стороны. При значении slide бегущая строка останавливается у противоположного края страницы.
- Атрибут direction="" – определяет направление движения текста. Значение down определяет движение текста вниз. Значение up определяет движение текста вверх. При значении left бегущая строка движется справа налево. При right – слева направо.
Пример бегущей строчки текста:
| Бегущая строка текста в HTML
Бегущая строка |
Цвет текста: Бегущая строка .
| Бегущая строка текста в HTML
Бегущая строка |
Таким же образом в HTML может перемещаться изображение:
 |
В XHTML, как и в HTML 5, бегущая строка запрещена, точнее запрещены теги да и с дизайнерской точки зрения бегущая строка — это вчерашний день. Но! Предположим, что вы все-таки решили разместить у себя на сайте или на отдельной его странице бегущую строчку, тогда используйте для такой страницы структуру документа HTML 4.01.
Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML код iframe 
Бегущая строка в HTML 
HTML теги формы
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
HTML
CSS
PHP
WordPress
Bootstrap
Автор
Бегущая строка на HTML. Основы HTML для начинающих. Урок №9
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать в HTML документе бегущую строку. Это, своего рода, примитивная анимация на веб сайте без использования графических редакторов.
Бегущую строку можно использовать для вывода новостей, акций, рекламного сообщения и даже для красивых дизайнерских моментов (например: облако в небе передвигается в шапке сайта). Я думаю, вы сами найдете применение бегучей строке на своем сайте, а моя задача сейчас рассказать, как это делается и как это выглядит на практике.
Для создания бегущей строки используют тег:
* атрибуты для бегущей строки
○ цвет фона бегущей строки
Чтобы закрасить фон бегущей строки, добавьте к тегу «marquee» атрибут «bgcolor» :
Результат:
Бегущая строка
○ высота и ширина бегущей строки
Чтобы установит высоту и ширину бегущей строки, добавьте к тегу «marquee» атрибут «width» и «height» :
○ поведение бегущей строки
Добавьте к тегу «marquee» атрибут «behavior» с такими значениями:
scroll – обычная прокрутка (по умолчанию);
slide – строка начинает свой путь из одного края и останавливается у другого;
alternate – строка будет двигаться от края до края
обычная прокрутка (по умолчанию)
Бегущая строка перейдет из одного края и остановится у другого
строка будет двигаться от края до края
○ направление бегущей строки
Добавьте к тегу «marquee» атрибут «direction» с такими значениями:
left – движение текста влево (по умолчанию);
right – движение текста вправо;
up – движение текста снизу вверх;
down – движение текста сверху вниз
движение текста влево (по умолчанию)
движение текста вправо
движение текста снизу вверх
движение текста сверху вниз
○ скорость бегущей строки
Чтобы регулировать скорость перемещения бегущей строки, добавьте к тегу «marquee» атрибут «scrollamount» :
Чем больше значение, тем больше скорость.
○ задержка интервала передвижения бегущей строки
Еще один атрибут, с помощью которого можно регулировать скорость. Чем больше значение, тем меньше скорость. Добавьте к тегу «marquee» атрибут «scrolldelay» :
○ количество проходов бегущей строки
Если вам нужно указать определенное количество проходов бегущей строки, добавьте к тегу «marquee» атрибут «loop» :
В примере стоит значение «2» , это значит, что проходов будет только два.
○ отступы бегущей строки
Если вам нужно указать отступ с левой и правой стороны, добавьте к тегу «marquee» атрибут «hspace» :
Как вставить в бегущую строку изображение
Чтобы вставить бегущую строку в картинку, вставьте между тегами уже известный вами тег для вывода картинки :
Все атрибуты для тега действуют и в этом случае.
Как вставить в бегущую строку ссылку
Здесь тоже вовсе не сложно. Как вставлять ссылку в HTML документ вы знаете. Как сделать бегущую строку вы тоже уже знаете. Достаточно вставить в текст бегущей строки ссылку и все:
Бегущая строка на блоге StepkinBlog.ru
На сегодня это все! Жду вас на следующем уроке. Удачи!