Wednesday, February 22, 2017

HTML Marquees

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.
Note: The HTML <marquee> tag may not be supported by various browsers so its not recommended to rely on this tag, instead you can use Javascript and CSS to create such effects.

Syntax

A simple syntax to use HTML <marquee> tag is as follows:
<marquee attribute_name="attribute_value"....more attributes>

One or more lines or text message or image

</marquee>

The <marquee> Tag Attributes

Following is the list of important attributes which can be used with <marquee> tag.
AttributeDescription
widthThis specifies the width of the marquee. This can be a value like 10 or 20% etc.
heightThis specifies the height of the marquee. This can be a value like 10 or 20% etc.
directionThis specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.
behaviorThis specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate.
scrolldelayThis specifies how long to delay between each jump. This will have a value like 10 etc.
scrollamountThis specifies the speed of marquee text. This can have a value like 10 etc.
loopThis specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.
bgcolorThis specifies background color in terms of color name or color hex value.
hspaceThis specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
vspaceThis specifies vertical space around the marquee. This can be a value like 10 or 20% etc.
Below are few examples to demonstrate the usage of marquee tag.

Examples - 1

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>
This will produce following result:
This is basic example of marquee

Examples - 2

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width="50%">This example will take only 50% width</marquee>
</body>
</html>
This will produce following result:
This example will take only 50% width

Examples - 3

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="right">This text will scroll from left to right</marquee>
</body>
</html>
This will produce following result:
This text will scroll from left to right

Examples - 4

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="up">This text will scroll from bottom to up</marquee>
</body>
</html>
This will produce following result:

No comments:

Post a Comment