Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

16.09.2015


21:33


16609


8


Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать в HTML документе бегущую строку. Это, своего рода, примитивная анимация на веб сайте без использования графических редакторов.
Бегущую строку можно использовать для вывода новостей, акций, рекламного сообщения и даже для красивых дизайнерских моментов (например: облако в небе передвигается в шапке сайта). Я думаю, вы сами найдете применение бегучей строке на своем сайте, а моя задача сейчас рассказать, как это делается и как это выглядит на практике.
Для создания бегущей строки используют тег:

<marquee></marquee>

Пример:

<html>
<head>
<title>Бегущая строка</title>
</head>
<body>
<marquee>Бегущая строка</marquee>
</body>
</html>

Результат:

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

* атрибуты для бегущей строки
цвет фона бегущей строки
Чтобы закрасить фон бегущей строки, добавьте к тегу «marquee» атрибут «bgcolor»:

<marquee bgcolor ="#ccc">Бегущая строка</marquee>

Результат:
Бегущая строка

○ высота и ширина бегущей строки
Чтобы установит высоту и ширину бегущей строки, добавьте к тегу «marquee» атрибут «width» и «height»:

<marquee bgcolor ="#ccc" width ="100px" height ="40px">Бегущая строка</marquee>

Результат:

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

○ поведение бегущей строки
Добавьте к тегу «marquee» атрибут «behavior» с такими значениями:

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

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

alternate – строка будет двигаться от края до края

Пример:

<marquee behavior="scroll">обычная прокрутка (по умолчанию)</marquee>

<marquee behavior="slide">Бегущая строка перейдет из одного края и остановится у другого</marquee>

<marquee behavior="alternate">строка будет двигаться от края до края</marquee>

Результат:

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

Бегущая строка перейдет из одного края и остановится у другого

строка будет двигаться от края до края

○ направление бегущей строки
Добавьте к тегу «marquee» атрибут «direction» с такими значениями:

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

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

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

down - движение текста сверху вниз

Пример:

<marquee direction="left">движение текста влево (по умолчанию)</marquee>

<marquee direction="right">движение текста вправо</marquee>

<marquee direction="up" height ="50px">движение текста снизу вверх</marquee>

<marquee direction="down" height ="50px">движение текста сверху вниз</marquee>

Результат:

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

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

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

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

○ скорость бегущей строки
Чтобы регулировать скорость перемещения бегущей строки, добавьте к тегу «marquee» атрибут «scrollamount»:

<marquee scrollamount="110">Бегущая строка</marquee>

Чем больше значение, тем больше скорость.

Результат:

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

○ задержка интервала передвижения бегущей строки
Еще один атрибут, с помощью которого можно регулировать скорость. Чем больше значение, тем меньше скорость. Добавьте к тегу «marquee» атрибут «scrolldelay»:

<marquee scrolldelay="1000" >Бегущая строка</marquee>

Результат:

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

○ количество проходов бегущей строки
Если вам нужно указать определенное количество проходов бегущей строки, добавьте к тегу «marquee» атрибут «loop»:

<marquee loop="2" >Бегущая строка</marquee>

В примере стоит значение «2», это значит, что проходов будет только два.

○ отступы бегущей строки
Если вам нужно указать отступ с левой и правой стороны, добавьте к тегу «marquee» атрибут «hspace»:

<marquee hspace="250" >Бегущая строка</marquee>

Результат:

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

Как вставить в бегущую строку изображение

Чтобы вставить бегущую строку в картинку, вставьте между тегами <marquee></marquee> уже известный вами тег для вывода картинки <img>:

<marquee direction="right"><img src="1.gif"></marquee>

<marquee direction="right"><img src="2.gif"></marquee>

Результат:


Все атрибуты для тега <marquee> действуют и в этом случае.

Как вставить в бегущую строку ссылку

Здесь тоже вовсе не сложно. Как вставлять ссылку в HTML документ вы знаете. Как сделать бегущую строку вы тоже уже знаете. Достаточно вставить в текст бегущей строки ссылку и все:

<marquee>Бегущая строка на блоге <a href="http://stepkinblog.ru/">StepkinBlog.ru</a></marquee>

Пример:

<html>
<head>
<title>Бегущая строка</title>
</head>
<body>
<marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="5" loop="2" hspace="10">Бегущая строка на блоге<a href="http://stepkinblog.ru/"> StepkinBlog.ru</a></marquee>
</body>
</html>

Результат:

Бегущая строка на блоге StepkinBlog.ru

На сегодня это все! Жду вас на следующем уроке. Удачи!



Случайные записи:

  1. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25
  2. Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18
  3. Кнопки. Основы bootstrap 3 для начинающих. Урок №7
  4. Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
  5. Нам 2 годика! С Днем Рождения StepkinBlog.ru!!!

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

8 ответа(ов) на статью: “Бегущая строка на HTML. Основы HTML для начинающих. Урок №9”

  1. Николай says:

    Большущее спасибо Вам за эту статью!

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Пожалуйста, Николай!

    Ответить

  2. Борис says:

    Стёпка, что-то я не нашёл Ваших ответов на мои вопросы.
    Рискну задать ещё:
    Со вставкой картинок при организации ссылок и бегущей строки у меня не совсем получилось.
    Картинка с расширением jpg расположена в той же папке, что и программка на HTML. В случае с бегущей картинкой, картинка бежит, только это какой-то намек на картинку: маленький квадратик, обозначающий картинку .
    И чем дело? Что не так?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    1. Возможно, что Вы не верно указан путь до картинки.
    2. Возможно, что Вы назвали картинку русскими буквами.
    3. Возможно, что Вы не верно прописали название картинки в коде.

    Ответить

  3. arsenal says:

    great blog!

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    thanks a lot

    Ответить

  4. Сергей says:

    :!: Посмотрел на смайлики. Их можно через marguee?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

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

    Ответить

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

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

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?