Introduction
This chapter demonstrates about the HTML Marquee which are used to display the scrolling part of the text in several directions, following are the concepts covered in this chapter.
- Marquee
Description
HTML Marquee is used to display the scrolling part of the text which can be scrolled in any of the direction depending upon the users requirements. The snippet code below demonstrates the simple syntax of the Marquee tag.
[html]
<marquee attribute-name="attribute-value" ... more attributes>
One or more lines for text or images.
</marquee>
[/html]
Following are the some of the marquee tag attributes.
| Attributes | Description |
|---|---|
| width | width defines the wide of the Marquee. |
| height | height defines the height of the Marquee. |
| direction | direction defines in which direction Marquee should scroll. |
| behavior | behavior defines the type of scrolling. |
| scrollamount | scroll amount defines how far the text scroll. |
| scrolldelay | scroll delay defines the delay between each jump. |
| loop | loop defines the time pf a loop which will be continued. |
| bgcolor | bgcolor defines the background color of the text. |
| vspace | vspace defines the vertical space around Marquee. |
| hapace | hspace defines horizontal space around the Marquee. |
Examples
The examples below demonstrates using the Marquee with different type of attributes. The code below demonstrates scrolling the text by using Marquee.
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee</title>
</head>
<body>
<marquee>Simple Programming Tutorials.</marquee>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates the scroll text from right side by using direction attribute.
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee</title>
</head>
<body>
<marquee direction="right">Simple Programming Lessons</marquee>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates scrolling the text from up by using the behavior and direction attributes is as shown.
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee</title>
</head>
<body>
<marquee behavior="scroll" direction="up">Simple Programming Lessons</marquee>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates scrolling the text along with the image is as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee</title>
</head>
<body>
<MARQUEE> Hi There! <IMG SRC="splessons.jpg" HEIGHT=33 WIDTH=82 ALT="splessons"> </MARQUEE>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates the text bouncing by using the behavior attribute.
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee</title>
</head>
<body>
<marquee behavior="alternate">Simple Programming Lessons</marquee>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates giving the background to the text.
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee</title>
</head>
<body>
<font color="WHITE"><marquee direction="left" style="background:RED">SPLessons</marquee></font>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- Height should be given in value like 10 or 20%.
- Direction values should be given in up, down, left or right.