Бегущая строка в html | Тег
Бегущая строка— элемент в веб-дизайне для привлечения внимания, чаще используется в рекламных целях. Бегущая строка это просто напросто текст который движется, слева направо, справа налево или вверх вниз.
В бегущую строку можно вставить новость, объявление, приветствие, отобразить текущее время и дату и много много другой интересной информации.
Как сделать бегущую строку html на сайте
Создать бегущую строку не составит большого труда и времени. Что бы заставить текст двигаться без фотошопа был разработан и создан тег html < marquee > , сначала специально для для браузера Internet Explorer, а затем и все остальные браузеры начали обрабатывать и поддерживать тег.
Что самое приятное и удивительное это очень маленький и коротенький тег, который приводит в движение не только текст, но и картинки. Чудеса да и только!
К примеру, что бы текст двигался справа налево нужно вставить код:
<marquee> Тут вставляем текст бегущей строки </marquee>
Тут вставляем текст бегущей строки
Приветствие:
Hello,my name is Galya
В принципе бегущую строку можно вставить куда душа пожелает: в футер, сайдбар, под шапкой блога или в саму шапку.
Можно настроить бегущую строку добавив стили и атрибуты. По умолчанию бегущая строка движется только справа налево, чтобы изменить направление строки надо к тегу добавить атрибут direction со значением right
<marquee direction=»right»> Бегущая строка cлева направо </marquee>
Бегущая строка cлева направо
Что бы текст не исчезал за границы и двигался туда-сюда нужно добавить атрибут behavior со значением alternate
<marquee behavior=»alternate»>Бегущая строка перемещается между правым и левым краем</marquee>
Бегущая строка перемещается между правым и левым краем
Цветная бегущая строка перемещается между правым и левым краем
<marquee behavior=»alternate» bgcolor=»#e20b0b» direction=»right» style=»color: #ffffff; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»onmousedown=»this.stop()» onmouseup=»this.start()»>Туда-сюда на цветном фоне</marquee>
Туда-сюда на цветном фоне
Бегущая строка останавливается при наведении
<marquee onmouseout=»this.start()» onmouseover=»this.stop()»><span style=»color: red;»><b>Бегущая строка останавливается при наведении</b></span></marquee>
Бегущая строка останавливается при наведении
А теперь добавим стили css и украсим нашу бегущую строку, получится цветная бегущая строка:
<marquee style color: #ff0000;»>color:#470dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Цветная бегущая строка </marquee>
Цветная бегущая строка
Цветная бегущая строка движется слева направо:
<marquee direction=»right» style=»color: #ad0dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Цветная бегущая строка слева направо </marquee>
Цветная бегущая строка слева направо
Настройки:
color: #ad0dd9 — цвет текста бегущей строки
font-size: 20px — размер шрифта
Сделаем бегущую строку на цветном фоне:
<marquee bgcolor=»#e20b0b»>Бегущая строка на цветном фоне</marquee>
Бегущая строка на цветном фоне
bgcolor— цвет фона
Цветная бегущая строка
Чтобы бегущая строка двигалась снизу вверх добавим атрибут direction со значением up:
<marquee direction=»up» style=»color:#f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Бегущая строка снизу вверх </marquee>
Бегущая строка снизу вверх
И сразу же добавим еще один атрибут heigh и настроим высоту блока:
<marquee height=»150″ direction=»up» style=»color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Бегущая строка </marquee>
Настройки:
height=»150″ — высота блока
color:#0F9D58 — цвет текста бегущей строки
font-size: 30px- размер шрифта
А теперь заставим бегущую строку двигаться сверху вниз. К атрибуту direction добавим значение down
<marquee height=»150″ direction=»down» style=»color:#1C3850; font-size: 20 px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Бегущая строка сверху вниз </marquee>
Бегущая строка сверху вниз
Что бы регулировать скорость прокрутки бегущей строки добавим атрибут scrolldelay :
<marquee scrolldelay=»60″ style=»color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;»> Бегущая строка </marquee>
Настройка:
scrolldelay=»60″ — изменяем цифры и устанавливаем свою скорость прокрутки
Что бы указать границы блока добавим к стилям рамочку, добавим атрибуты width и height.
height — это высота блока
scrollamount — атрибут который влияет на скорость движения, чем выше число тем быстрее движется текст.
<marquee direction=»down» height=»150″ scrollamount=»3″ style=»border: 2px solid #000000; text-align: center; color: #f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;» width=»300″ > Бегущая строка в рамочке </marquee>
Бегущая строка в рамочке
Сделаем бегущую строку в рамочке на цветном фоне: добавим атрибут bgcolor
<marquee bgcolor=»#e20b0b» direction=»down» height=»150″ scrollamount=»2″ style=»border: 2px solid #000000; text-align: center; color: #fbfbfc; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;» width=»300″>Бегущая строка в рамочке на цветном фоне </marquee>
Бегущая строка в рамочке на цветном фоне
Бегущая строка в html с картинками
Картинка движется справа налево:
Картинка в бегущей строке слева направо:
Картинка сверху вниз:
<marquee height=»150″ direction=»down»/><img src=»https://yablogger.info/%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D1%83″ /></marquee>
<marquee scrollamount=»3″ direction=»up»/><img src=»https://yablogger.info/%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D1%83″ /> Бегущая строка снизу вверх </marquee>
Изображение и текст в бегущей строке:
Приятно было познакомиться! Заходите ещё!
<marquee behavior=»scroll» direction=»left» ><img src=»https://yablogger.info/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5″>Текст бегущей строки</marquee>
Ссылка на картинку — https://yablogger.info/wp-content/uploads/2017/04/oe_4f64887337494ff581c5168e37bc4d51.gif
Вставляем картинку на сайт в черновик и в html редакторе находим url картинки или загружаем на специализированный ресурс для публикации изображений на сайтах, блогах, чатах и берем оттуда ссылку.
Как вставить ссылку в бегущую строку
<marquee> Текст перед ссылкой <a href=»url адрес ссылки» title=»Всплывающий текст при наведении курсора на ссылку»>Анкор (текст ссылки)</a></marquee>
Хотите узнать как сделать из блога сайт? Читать подробнее
Как вставить бегущую строку в Blogger (Blogspot)
- В редакторе сообщений открываем вкладку НTML и вставляем код. Вначале редактируем текст, потом добавляем код и сразу Публикуем. В визуальный редактор переходить не надо, слетят все настройки, результат смотрите на блоге.
- Панель инструментов > Дизайн > Добавить гаджет > HTML/JavaScript, добавляем код. над названием и описанием блога.
Как добавить бегущую строку в WordPress
В записи открываем Html редактор или вкладку «Текст» вставляем код бегущей строки и нажимаем «Опубликовать«. Редактировать статью только в этих вкладках, в визуальном редакторе настройки слетают и придется делать все сначала. Если изменения в статье сделать необходимо, заходим через Консоль > Все записи > Изменить. В такой последовательности открывается запись в html редакторе.
Добавляем бегущую строку в боковую колонку: Консоль > Внешний вид > Виджеты > Текст > Добавить виджет. Вставляем код и сохраняем.
<marquee>
HTML-элемент <marquee> используется для создания на странице прокручивающегося текста (бегущей строки).
Атрибут
Описывает поведение прокрутки. Допустимые значения: scroll , slide и alternate . Если значение не указано, то используется scroll .
Задаёт цвет фона (можно использовать имя цвета или шестнадцатеричное значение).
Задаёт направление прокрутки. Допустимые значения: left , right , up и down . Если значение не указано, то используется left .
Задаёт высоту в пикселях или процентах.
Задаёт поле (margin) слева.
Задаёт количество прокруток. Если значение не указано, то используется -1, что означает бесконечную прокрутку
Задаёт сдвиг на каждом шаге в пикселях. По умолчанию 6.
Задаёт интервал между каждым шагом в миллисекундах. По умолчанию 85. Обратите внимание, что значения меньше 60 будут проигнорированы и будет использовано 60, если не присутствует атрибут truespeed .
По умолчанию значения меньше 60 в scrolldelay игнорируются. Однако, если присутствует truespeed , то они не игнорируются
Задаёт вертикальный отступ (margin) в пикселях или процентах.
Задаёт ширину в пикселях или процентах.
Обработчики событий
Срабатывает, когда marquee достиг конечного состояния. Срабатывает только в случаях, когда behavior имеет значение alternate .
Срабатывает, когда marquee прокрутился столько раз, сколько было задано в атрибуте loop . Срабатывает только тогда, когда атрибут loop имеет положительное значение.
Как вставить бегущую строку в html
Язык HTML
Спецсимволы. Бегущая строка.
для отображения символов, которых нет на клавиатуре;
когда кодировка страницы не поддерживает какие-то символы в «готовом» виде;
для отображения на странице HTML-кода. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (< и >) и кавычки атрибутов (").
есть такой спецсимвол, как неразрывный пробел (» «). И если его поставить вплотную между двумя словами, то в этом месте будет запрещен перенос строки. А если указать его несколько раз подряд (» . «), то получим нужный отступ строки (для получения, например, «красной строки»), так как эти указанные подряд пробелы браузеры не игнорируют.
Для написания спецсимволов применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;).
Пример кода с использованием спецсимволов:
| <html> <head> <title>Использование спецсимволов HTML</title> <meta http-equiv="Content-type" content="text/html" charset="windows-1251"> </head> <body> <p><P> — Тег для создания параграфов.</p> <p><strong>®</strong> — Знак зарегистрированной торговой марки.</p> <p>При написании статьи лучший вариант — это использование между словами длинного тире и дефиса, а не только дефиса во всех случаях.</p> </body> </html> |
В результате получим в браузере:
В Интернете есть таблицы спецсимволов HTML. Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть © и © — не одно и то же. Поэтому указывайте их всегда именно так, как показано в таблицах.
| Практическое задание 2: Создать документ, объясняющий, как в HTML написать текст жирным курсивом и расположить его по центру. |
behavior — определяет тип скроллинга, может иметь следующие значения:
alternate — колебательные движения от края к краю;
scroll — прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны;
slide — прокручивание текста c остановкой.
scrollamount — скорость бегущей строки от 1 до 10;
loop — задает количество прокруток бегущей строки;
direction — направление движения текста. Значения:
down — вниз;
left — влево;
right — вправо.
bgcolor — цвет фона бегущей строки;
height — высота строки;
width — ширина строки.
Пример написания бегущей строки:
| <marquee>Бегущая строка по умолчанию</marquee> <marquee direction=»right»>Бегущая строка слева направо</marquee> <marquee behavior=»alternate»>Бегущая строка бегает от края к краю</marquee> <marquee scrollamount=»10″>Бегущая строка со скоростью 10</marquee> <marquee scrollamount=»1″>Бегущая строка со скоростью 1</marquee> <marquee direction=»right» loop=»2″>Эта строка будет прокручиваться только два раза</marquee> <marquee behavior=»slide»>Бегущая строка с остановкой</marquee> <marquee bgcolor=»#b40000″>Бегущая строка с фоном</marquee> <marquee width=400>Бегущая строка с ограничением ширины прокрутки</marquee> <marquee direction=»up»>Бегущая строка снизу вверх</marquee> <marquee hspace=»300″>Бегущая строка с отступами от границ</marquee> |
| Практическое задание: Создать HTML-документ, демонстрирующий все расположенные выше примеры. |
Попробуйте использовать различные сочетания атрибутов бегущей строки для достижения нужного Вам эффекта. С текстом бегущей строки можно делать то же самое, что и с обыкновенным текстом: менять размер, цвет, стиль, шрифт, сделать фразу из строки ссылкой, прописывая нужные теги внутри тега <marquee>
И ещё…
Прежде чем перейти к изучению очередной большой главы, расскажу немного о некоторых мелочах, которые как-то выпали из общего строя, но порой без них никак не обойтись. Эти, фигурально выражаясь, элементы html языка помогут решить ряд задач с которыми частенько приходится сталкиваться при создании той или иной странички, так что не стоит относится к ним с пренебрежением.
Спецсимволы
Иногда, а порой даже часто, как например в этом сайте, в тексте не обойтись без знаков «меньше чем»-< и «больше чем»- > , но как быть если браузеры определяют <слово> или фразу заключенные в эти знаки как тег и следовательно не будут его отображать на мониторе? Или допустим Вам и вправду в тексте надо написать некий <тег>, но не для того чтобы дать очередную команду браузеру, а чтобы привести пример его написания посетителям страницы?
Для этих целей были придуманы так называемые спецсимволы.
Так например спецсимвол < — будет значить что в этом месте текста нужно поставить знак < а спецсимвол > обозначит символ >.
Все спецсимволы начинают писаться со знака & — амперсант этот знак указывает браузеру, что далее будет идти имя спецсимвола и воспринимать его следует не как текст, а как команду. Тут встаёт очередной вопрос, а как собственно в тексте предназначенного для вывода на экран поставить сам знак & — амперсант?
Для знака & тоже есть свой спецсимвол — &
Такая вот путаница получается..
Ещё, пожалуй, отдельного внимания заслуживает спецсимвол — это неразрывный пробел мы с ним уже сталкивались. Дело в том, что когда Вы пишите текст в блокноте или html редакторе «простых» пробелов между словами можно поставить сколь угодно много, но вот при чтении страницы браузером все они «удаляются» и между словами на странице будет не более одного пробела. Отсюда часто возникают проблемы с оформлением текста, красную строку, например, никак не сделать. вот и придумали люди спецсимвол он воспринимается браузером не как пробел, а как знак, только невидимый человеческому глазу.
А неразрывным он называется по тому, что группа таких пробелов воспринимается как цельное слово, следовательно, не переносится на следующую строку, если предложение подходит к установленным рамкам или же к краю окна. Так что в окне может появиться горизонтальная полоса прокрутки, если Вам это ненужно, ставьте между ними обыкновенные пробелы
Пример использования спецсимволов:
Пример в примере… навивает на философские мысли о бесконечности…
Ну вот теперь Вы знаете, как примерно выглядят все эти примерчики по «ту сторону экрана». Кстати, раз уж начал открывать военные тайны, данный пример является таблицей из двух ячеек, одна тоненькая слева выполняет сугубо декоративную функцию.. так вот если перед Вами встанет задача нарисовать ячейку таблицы без какого либо содержания вставляйте в неё знак пробела . Помните правило <тег>здесь что то обязательно должно быть</тег>? Спецсимвол пробела один из выходов в данном случае.
Кроме выше указанных есть еще целый ряд спецсимволов, чего там только нет: знаки зодиака, карточные масти, палочки, точечки, ёлочки, кругляшки, дроби.. Предназначены они уже не для каких-то «особых» задач, а просто выполняют свою роль ввиду отсутствия данных знаков на клавиатуре. Мою «коллекцию» спецсимволов можете посмотреть здесь.
Горизонтальная линия
Простой новый тег <hr> рисует в окне горизонтальную линию, не требует закрывающего тега. Часто применяется при верстке страницы в качестве декоративного элемента.
Имеет ряд атрибутов, align -выравнивание с одним из трёх значений ( center, left, right ) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут — size , цвет атрибут — color , и при необходимости отключить тень линии noshade .
По моему достаточно просто и эффективно.
Бегущая строка
Тег <marquee> заставляет текст помещённый в него двигаться в том или ином направлении, проще говоря делает его бегущей строкой. Бегущая строка имеет ряд настроек скроллинга, которые задаются следующими атрибутами:
- alternate — колебательные движения от края к краю
- scroll — прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
- slide — прокручивание текста c остановкой.
- up — вверх,
- down — вниз,
- left — влево,
- right — вправо.
Ну думаю, сами разберётесь, что к чему. Попробуйте использовать различные сочетания атрибутов для достижения нужного Вам эффекта. Добавлю лишь то, что с текстом бегущей строки можно делать то же самое, что и с обыкновенным текстом: менять размер, цвет, стиль, шрифт, сделать фразу из строки ссылкой.. прописывая нужные теги внутри тега <marquee>
Комментарии
Комментарии используются для того, чтобы облегчить свой собственный труд, а так же упростить понимание другим человеком кода Вашей странички. Пишутся они непосредственно в коде html документа, однако браузер не выводит эти «пометки» на экран. Для того чтобы заставить браузер игнорировать какой либо текст его необходимо заключить вот в такой набор символов:
<!— здесь может быть любой текст —>
Использовать комментарии очень полезно, разрабатывая большие и сложные по своей структуре документы, для того, чтобы потом самому с легкостью в нём ориентироваться..
Как видите старый пример ничем не изменился зато ориентироваться в его коде стало значительно легче.
Полезные советы:
Писать сайты на своём компьютере конечно дело хорошее, но пора задумываться о том, как Ваше творчество разместить в сети Интернет. О том как это сделать читайте в статье «Публикация сайта». А совет собственно заключается в том, что на данном этапе обучения Вам пора обзавестись своим собственным местом (хостом) «тренировочным плацдармом» на каком либо сервере.. а также собственным именем сайта (доменом). для начала, это место и имя могут быть бесплатными, даже я бы сказал должны быть бесплатными.. Там, в этом месте на сервере, Вы будите тренироваться выкладывать свои страницы., смотреть как и с какой скоростью они загружаются, так же Вы сможете показать своё творение миру (а можете и не показывать) и друзьям. Почему этим стоит заняться именно на данной стадии обучения? Да потому что с помощью того, что мы изучили, Вы уже можете делать вполне пристойные сайты!! нет конечно до конца обучения ещё рано, да и предела совершенствования мастерства как известно нет. но это послужит хорошей тренировкой и так сказать поднимет Ваш морально боевой дух!!)) Знаете как это приятно, увидеть свою работу в действии!? Но, ещё раз повторюсь, о том как это дело провернуть читайте в статье «Публикация сайта».