BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » Как сделать бегущую строку и бегущее изображение в HTML. Урок №12

Как сделать бегущую строку и бегущее изображение в HTML. Урок №12

2014-02-05 / Вр:22:45 / просмотров: 22936

Как сделать бегущую строку и бегущее изображение в HTML. Урок №12

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

Для создания бегущей строки используют  тег:

<marquee></marquee>

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee>Бегущая строка</marquee>
</body>
</html>

Атрибуты для бегущей строки

width="..." - ширина бегущей строки (в пикселях или процентах).
Пример:
<marquee width="500px">Бегущая строка</marquee>

height="..." - высота бегущей строки (в пикселях или процентах).
Пример:
<marquee height ="500px">Бегущая строка</marquee>

bgcolor="..." - цвет фона бегущей строки (цвет задается кодом или словом).
Пример:
<marquee bgcolor ="#cc0000">Бегущая строка</marquee>

behavior="..." поведение бегущей строки. Имеет такие значения:

scroll - обычная прокрутка (по умолчанию);

slide – строка начинает свой путь из одного края и останавливается у другого;

alternate – строка будет двигаться от края до края
Пример:
<marquee behavior=" alternate " >Бегущая строка</marquee>

direction="..." - направление бегущей строки. Имеет такие значения:

left –  движение текста влево (по умолчанию);

right – движение текста вправо;

up – движение текста снизу вверх;

down - движение текста сверху вниз
Пример:
<marquee direction="down" >Бегущая строка</marquee>

scrollamount="..." - скорость движения строки (в пикселях).
Пример:
<marquee scrollamount="10">Бегущая строка</marquee>

scrolldelay="..." - временной интервал между шагами ( в миллисекундах).
Пример:
<marquee scrolldelay="300" >Бегущая строка</marquee>

loop="..." – сколько раз пробежит бегущая строка. Если в значение поставить «0»(По умолчанию), бегущая срока будет прокручивать текст бесконечное количество раз, если в значение поставить «2», тогда текст прокрутится 2 раза.
Пример:
<marquee loop="2" >Бегущая строка</marquee>

hspace="..." – отступ от левого и правого края бегущей строки (в пикселях).
Пример:
<marquee hspace="300" >Бегущая строка</marquee>

Если все собрать вместе,  код бегущей строки в HTML будет выглядеть вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="30" loop="5" hspace="300">Бегущая строка</marquee>
</body>
</html>

[пример]

Бегущее изображение 

Так как перемещали текст в бегущей строке, так можно переместить и изображение.

Достаточно между тегами <marquee></marquee> вставить картинку:

<marquee><img src="/images/kolobok.png"></marquee>

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="30" loop="5" hspace="300">
<img src="/images/kolobok.png">
</marquee>
</body>
</html>

[пример]

Дополнение

В бегущую строку можно установить текст со ссылкой. Для этого нужно прописать следующий код в HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Бегущая строка</title>
</head>
<body>
<marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="30" loop="2" hspace="300">Бегущая строка на блоге <a href="/">BlogGood.ru</a></marquee>
</body>
</html>

[пример]

Вот и разобрались с бегущей строкой в HTML-документе.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716