Lesson 20 – HTML Marquee Text

admin

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 Name Description Attribute value
Height Height attribute specifies the height of marquee text. 10% or 20%
Width Width attribute specifies the width of marquee text 10% or 20%
Direction Direction attribute specifies the direction of text. Left, Right, Up, Down
Behavior Behavior attribute specifies the type of scrolling. Scroll, Slide
Scrollamount Scrollamount attribute specifies the speed of marquee text. Fast, Slow
Scrolldelay Scrolldelay attribute specifies the time gap to delay the text from reappearing again. Time in milliseconds
Bgcolor Bgcolor specifies the background color of text color code/color name
Loop Loop attributes specifies how many times, text to be looped number/infinite
Hspace Hspace attribute specifies the horizontal space to the left and right of text pixel %
Vspace Vspace attribute specifies the vertical space to the top and bottom of text pixel %

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