Lesson 20 – HTML Marquee Text

What is Html Marquee text?

HTML marquee is a piece of ‘running text’ on you web page either horizontally or vertically depending upon yours setting. This can be created using HTML <marquee> tag. We use following syntax for marquee text.

 <marquee  attribute name =  attribute value =  “Type your text here”  </marquee>

List of Marquee attributes:

Attribute NameDescriptionAttribute value
HeightHeight attribute specifies the height of marquee text.10% or 20%
WidthWidth attribute specifies the width of marquee text10% or 20%
DirectionDirection attribute specifies the direction of text.Left, Right, Up, Down
BehaviorBehavior attribute specifies the type of scrolling.Scroll, Slide
ScrollamountScrollamount attribute specifies the speed of marquee text.Fast, Slow
ScrolldelayScrolldelay attribute specifies the time gap to delay the text from reappearing again.Time in milliseconds
BgcolorBgcolor specifies the background color of textcolor code/color name
LoopLoop attributes specifies how many times, text to be loopednumber/infinite
HspaceHspace attribute specifies the horizontal space to the left and right of textpixel %
VspaceVspace attribute specifies the vertical space to the top and bottom of textpixel %

Let’s learn more with following examples:

Example 1 – Height and Width Attribute

<!DOCTYPE html>
<html>
<head>
<title>HTML height & width marquee attribute example </title>
</head>
<body>
<marquee height = 80% width = 90%>Height and Width Attribute Example</marquee>
</body>
</html>

This will produce the following results:

HTML height & width marquee attribute example Height and Width Attribute Example

Example 2 – Direction Attribute

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee text direction example </title>
</head>
<body>
<marquee direction = left > Left direction text</marquee>
<marquee direction = right > Righ direction text</marquee>
</body>
</html>

This will produce the following results:

HTML marquee text direction example Left direction text Righ direction text

Example 3 – Behavior Attribute

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee text behavior example </title>
</head>
<body>
<marquee behavior = scroll > Scrolling text</marquee>
</body>
</html>

This will produce the following results:

HTML marquee text behaviour example Scrolling text

Example 4 – Scrollamount Attribute

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee scrollamount example </title>
</head>
<body>
<marquee scrollamount = 10 >  Scroll speed = 10 </marquee>
<marquee scrollamount = 20 >  Scroll speed = 20 </marquee>
<marquee scrollamount = 30 >  Scroll speed = 30 </marquee>
</body>
</html>

This will produce the following example:

HTML marquee scrollamount example Scroll speed = 10 Scroll speed = 20 Scroll speed = 30

Example 5 – Scrolldelay Attribute

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee scrolldelay example </title>
</head>
<body>
<marquee scrolldelay = 500 >  Scroll delay = Half second </marquee>
<marquee scrolldelay = 1000 >  Scroll delay = One second </marquee>
<marquee scrolldelay = 2000 >  Scroll delay = One and half seconds </marquee>
</body>
</html>

This will produce the following results:

HTML marquee scrolldelay example Scroll delay = Half second Scroll delay = One second Scroll delay = Two seconds

# Scrolldelay = 1000 (milliseconds) represents text delay of one second. Default delay is 85.

 

Example 6 – Bgcolor Attribute

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee bgcolor example </title>
</head>
<body>
<marquee bgcolor = yellow >  Your text </marquee>
<marquee bgcolor = Green >  Your text </marquee>
</body>
</html>

This will produce the following results:

HTML marquee bgcolor example Your text Your text

 

Example 7 – Hspace Attribute

<!DOCTYPE html>
<html>
<head>
<title>HTML hspace and vspace example </title>
</head>
<body>
<p> Right space <marquee hspace = 20 width = 80 bgcolor = pink>  Your text </marquee>
Left space </P>
<p> Righ space <marquee hspace = 60 width = 80 bgcolor = pink>  Your text </marquee>
Left space</p>
</body>
</html>

This will produce the following results:

HTML hspace and vspace example

Right space Your text Left space

Righ space Your text Left space

 

Example 8 – Vspace Attribute

<!DOCTYPE html>
<html>
<head>
<title>HTML hspace and vspace example </title>
</head>
<body>
<p> Top space </P>
<marquee vspace = 20 width = 100 bgcolor = pink>  Your text </marquee>
<p>Bottom space</p>
</body>
</html>

This will produce the following results:

HTML hspace and vspace example

Top space

Your text

Bottom space

 

Leave a Reply

Your email address will not be published. Required fields are marked *

+ 82 = 86