Marquee Tag
Posted in HTML Tutorials |
Email This Post
Marquee <MARQUEE>:This tag is used to display text in a scrolling way on Webpage. You must have seen many sites using this moving text, it does grab some attention of the user.
The attributes of this tag are Direction, Behavior and Loop.
1) Direction: It Specifies whether the Text scrolls from right to left or left to right.
2) Behavior: Behavior has 3 values scroll, alternate and slide. Scroll causes moving of text from left to right or vice versa. Alternate causes text to bounce back and forth between the margins
Marquee slides through the webpage because of slide value. The default value is scroll.
3) Loop: it Tells the number of times marquee should scroll.
Example:
Below are few examples of marquee tag just copy in editor and save as .html to view the effects
Example : Example using Behavior : Alternate
<html> <head> <title> My web page using marquee </title></head> <body> <font size="6" face="Times New Roman" color=blue> <marquee width=100% behavior=alternate bgcolor=pink > This is an example of a marquee using alternate as behavior... </marquee></font> </body> </html>
Example using Behavior :Slide
<html> <head> <title> My web page using marquee </title></head> <body> <font size="5" face="courier" color=pink> <marquee width=100% behavior=slide bgcolor=blue > This is an example of a marquee using slide as behavior... </marquee></font> </body> </html>
Example using Behavior :scroll
<html> <head> <title> My web page using marquee </title></head> <body> <font size="5" face="courier" color=pink> <marquee width=100% behavior=scroll bgcolor=blue loop=3> This is an example of a marquee using scroll as behavior... </marquee></font> </body> </html>
The difference between slide, scroll and alternate is , in scroll the text continuously scrolls from one end to another in the same direction but in slide text starts scrolling from one end and stops at other end and in alternate scrolls back and forth.
Example using Direction:
<html> <head> <title> My web page using marquee </title></head> <body> <font size="5" face="courier" color=white> <marquee width=100% behavior=scroll direction=right bgcolor=red > This is an example of a marquee using direction from left to right... </marquee></font> </body> </html>
Example:To scroll the text in upwards direction
<html> <head> <title> marquee</title></head> <body> <marquee behavior="scroll" direction="up"> This is an example of marquee scrolling upwards</marquee> </body> </html>
Example:To scroll the text in downwards direction
<html> <head> <title> marquee</title></head> <body> <marquee behavior="scroll" direction="down"> This is an example of marquee scrolling downwards</marquee> </body> </html>
Example: To scroll text in different speeds.
<html> <head> <title> marquee</title></head> <body> <marquee behavior="scroll" direction="left" scrollamount="1">scroll text in slow speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="8">scroll text in medium speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="18">scroll text in fast speed</marquee> </body> </html>
Example:To Scroll images
<html> <head> <title> marquee</title></head> <body> <marquee behavior="scroll" direction="left" scrollamount = "3" > <img src="D:\My Documents\learn3.gif" alt="smile" /></marquee> </body> </html>
in the above code write the location of the image
i.e <img src=”loaction of your image”>
Example:To scroll image and text together.
<html> <head> <title> marquee</title></head> <body> <marquee behavior="scroll" direction="left" scrollamount="3"> <img src="D:\My Documents\learn3.gif" alt="smile" /> <p>This is marquee using scrolling text and image </p> </marquee> </body> </html>
in the above code write the location of the image
i.e <img src=”loaction of your image”>
Using scroll delay
Here scroll delay is the time that a marquee should wait before the next jump.
Example:
<html> <head> <title> my HTML webpage</title></head> <body> <marquee behavior="scroll" direction="left" scrollamount="80" scrolldelay="500"> Your text goes here </marquee> </body> </html>
