Thursday, 25 May 2017

MARQUEE Element in HTML

The <marquee> tag is used for scroll the text or image displayed either horizontally across or vertically down your web page depending on the settings. <marquee> is container tag or element.

Syntax:
               <marquee> text/ image</marquee>

Attribute of <marquee> Tag:



behavior:  
                    Set the behavior of the marquee.
Possible values are scroll, slide and alternate. If no value is specified, the default value is scroll.

bgcolor: set the background color or the marquee tag.

direction: Sets the direction of scrolling within the marquee.

height: Sets the height in pixels or percentage.

hspace: Sets the horizontal margin.

loop: 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.

scrollamount: Sets the amount of scrolling at each interval in pixels. default value is 6.

scrolldelay: 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.









truespeed: By default, scrolldelay values lower than 60 are ignored. if truespeed is present, those values are not ignored.

vspace: Sets the vertical margin in pixels or percentage value.

width: Sets the width in pixels or percentage value.

For Example:
 HTML file Name:marquee.html

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>Example of marquee</marquee>
<marquee direction="up">The direction of text will be from bottom to top.</marquee>
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee direction="down" width="550" height="200" behavior="alternate" style="border:solid blue;background-color:green">
<img src="image.jpg" width20 height=30>
  <marquee behavior="alternate">
    This text will bounce
  </marquee>
</marquee>
</body>
</html>

  
Browser View of Above document:

 
 







1 comment: