Главная » Языки программирования

Example of a blinking text using CSS within a marquee

Содержание
  1. HTML Marquee Tag
  2. The Marquee Tag
  3. Scroll Up
  4. Scroll Down
  5. Scroll Left to Right
  6. Scroll Right to Left
  7. Scrolling Speed
  8. Blinking Text Within Marquee
  9. HTML Tag
  10. Alternatives of the HTML tag
  11. Syntax
  12. Example of using HTML tag:
  13. Example of a scrolling text:
  14. Example of a scrolling image:
  15. Example of creating a scrolling text with HTML tag:
  16. Attributes
  17. How to style tag?
  18. Common properties to alter the visual weight/emphasis/size of text in tag:
  19. Coloring text in tag:
  20. Text layout styles for tag:
  21. Other properties worth looking at for tag:
  22. : The Marquee element
  23. Attributes
  24. Event handlers
  25. Methods
  26. Examples
  27. Result
  28. Technical summary
  29. Html marquee text size
  30. Синтаксис
  31. Атрибуты
  32. Закрывающий тег
  33. Валидация

HTML Marquee Tag

Marquee is one of the important tags introduced in HTML to support such scrollable texts and images within a web page. In this tutorial, you will be learning about the Marquee tag and its different attributes for developing a well-groomed static website.

The Marquee Tag

The tag is a container tag of HTML is implemented for creating scrollable text or images within a web page from either left to right or vice versa, or top to bottom or vice versa. But this tag has been deprecated in the new version of HTML, i.e., HTML 5.

The different attributes of tag are:

Here’s are some example of how to use tag in HTML:

Scroll Up

 This is a sample scrolling text that has scrolls in the upper direction.

Scroll Down

 This is a sample scrolling text that has scrolls texts to down.

Scroll Left to Right

 This is a sample scrolling text that has scrolls texts to right.

Scroll Right to Left

 This is a sample scrolling text that has scrolls texts to left.

Scrolling Speed

Marquee speed can be changed using the «scrollmount» attribute. For example, if you are using scrollmount=»1″ then it sets the marque to scroll very slowly, and as you increase the «scrollmount,» the scrolling speed will also increase.

Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

Marquee can also be implemented using CSS. Read the CSS Marquee chapter to learn more about it.

Читайте также:  Link stylesheet to html file

Blinking Text Within Marquee

         
Источник
 
HTML Tag
 
The is a non-standard HTML tag which was used to create a scrolling text or an image. It was used to make the text or image scroll horizontally across or vertically down the web page. Because of its usability problems it was often compared with Netscape’s blink element.
 
Alternatives of the HTML tag
 
As it was said above, the HTML tag is deprecated, and the developers often avoid using it. Nowadays, you can achieve the same result with the help of CSS and Javascript. Read our snippet to learn more about this method.
 
Syntax
 
The tag comes in pairs. The content is written between the opening () and closing () tags.
 
Example of using HTML tag:
 
html> html> head> title>Title of the document title> style> marquee< font-size: 30px; font-weight: 800; color: #8ebf42; font-family: sans-serif; > style> head> body> marquee>A scrolling text created with HTML Marquee element. marquee> body> html>
 
Use direction attribute of element to change the direction of the text/image. See another example where the text scrolls from up to down.
 
Example of a scrolling text:
 
html> html> head> title>Title of the document title> head> body> marquee direction="down">A scrolling text created with HTML Marquee element. marquee> body> html>
 
Now let’s see an example of using element for setting a scrolling image:
 
Example of a scrolling image:
 
html> html> head> title>Title of the document title> head> body> marquee behavior="scroll" direction="up"> img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="W3docs" /> marquee> body> html>
 
Example of creating a scrolling text with HTML tag:
 
html> html> head> title>Title of the document title> head> body> style> marquee < width: 100%; padding: 10px 0; background-color: lightblue; > style> marquee direction="scroll">This scrolling text is created with HTML Marquee element and styled with CSS properties. marquee> body> html>
 
Attributes
 
The following attributes can be used to adjust the appearance of the element. 
 
 
 Attribute Value Description 
   
 behavior scroll
slide
alternate		 Defines the scrolling type. 
 
 bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Is used to give a background color. 
 
 direction up
down
left
right		 Sets the direction for the scrolling content. 
 
 height pixels
%		 Defines the marquee’s height. 
 
 hspace pixels Defines horizontal space around the marquee. 
 
 loop number Defines how many times the content will scroll. If we don’t define this, the content will scroll forever. 
 
 scrollamount number Defines the scrolling amount at each interval in pixels. Default value is 6. 
 
 scrolldelay seconds Defines how long delay will be between each jump. The default value is 85 and smaller amounts than 60 will be ignored. 
 
 truespeed seconds Is used to delay the scroll lesser than 60. 
 
 vspace pixels Defines vertical space around the marquee. 
 
 width pixels
%		 Defines the marquee’s width. 
  
 
 
How to style tag?
 
Common properties to alter the visual weight/emphasis/size of text in tag:
 
     
  • CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
    •  
  • CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
    •  
  • CSS font-size property sets the size of the font.
    •  
  • CSS font-weight property defines whether the font should be bold or thick.
    •  
  • CSS text-transform property controls text case and capitalization.
    •  
  • CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
    •  
 
Coloring text in tag:
 
     
  • CSS color property describes the color of the text content and text decorations.
    •  
  • CSS background-color property sets the background color of an element.
    •  
 
Text layout styles for tag:
 
     
  • CSS text-indent property specifies the indentation of the first line in a text block.
    •  
  • CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
    •  
  • CSS white-space property specifies how white-space inside an element is handled.
    •  
  • CSS word-break property specifies where the lines should be broken.
    •  
 
Other properties worth looking at for tag:
 
     
  • CSS text-shadow property adds shadow to text.
    •  
  • CSS text-align-last property sets the alignment of the last line of the text.
    •  
  • CSS line-height property specifies the height of a line.
    •  
  • CSS letter-spacing property defines the spaces between letters/characters in a text.
    •  
  • CSS word-spacing property sets the spacing between words.
    •  
 
Источник
 
: The Marquee element
 
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
 
The HTML element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes.
 
Attributes
 
Sets how the text is scrolled within the marquee. Possible values are scroll , slide and alternate . If no value is specified, the default value is scroll .
 
Sets the background color through color name or hexadecimal value.
 
Sets the direction of the scrolling within the marquee. Possible values are left , right , up and down . If no value is specified, the default value is left .
 
Sets the height in pixels or percentage value.
 
Sets the horizontal margin
 
Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which means the marquee will scroll continuously.
 
Sets the amount of scrolling at each interval in pixels. The default value is 6.
 
Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that any value smaller than 60 is ignored and the value 60 is used instead unless truespeed is specified.
 
By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not ignored.
 
Sets the vertical margin in pixels or percentage value.
 
Sets the width in pixels or percentage value.
 
Event handlers
 
Fires when the marquee has reached the end of its scroll position. It can only fire when the behavior attribute is set to alternate .
 
Fires when the marquee has finished the amount of scrolling that is set by the loop attribute. It can only fire when the loop attribute is set to some number that is greater than 0.
 
Fires when the marquee starts scrolling.
 
Methods
 
Starts scrolling of the marquee.
 
Stops scrolling of the marquee.
 
Examples
 
marquee>This text will scroll from right to leftmarquee> marquee direction="up">This text will scroll from bottom to topmarquee> marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> marquee behavior="alternate"> This text will bounce marquee> marquee> 
 
Result
 
Technical summary
 
Источник
 
Html marquee text size
 
Тег создает бегущую строку на странице. На самом деле содержимое контейнера не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.
 
Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают этот тег.
 
Синтаксис
 
Атрибуты
 
behavior Задает тип движения содержимого контейнера . bgcolor Цвет фона. direction Указывает направление движения содержимого контейнера . height Высота области прокрутки. hspace Горизонтальные поля вокруг контента. loop Задает, сколько раз будет прокручиваться содержимое. scrollamount Скорость движения контента. scrolldelay Величина задержки в миллисекундах между движениями. truespeed Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay . vspace Вертикальные поля вокруг содержимого. width Ширина области прокрутки.
 
Закрывающий тег
 
Валидация
 
Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.
 
       Lorem ipsum dolor sit amet.  
 
Источник
 
   
 
Оцените статью
 
 
 
  
     
       
 
 
 
 
 
 
 
 
 
 © 2024 Программирование