HTML Marquee Tag With Examples – Learn HTML in Hindi Part 6

html marquee tag example

Marquee Tag in HTML

Before going to examples and how we can use html marquee tag, first I would like to tell you what is marquee tag. Marquee tag is an html tag that is used to move to any text or images in website. People are using this tag to develop responsive, movable websites.  You can move text or images from left to right, right to left, top to bottom, bottom to top in scroll, slide, alternative styles are there. Before working with marquee tag make sure you understood image tag and how to customise image in html.

Use of Marquee Tag in HTML:  <marquee>

We can use marquee tag just before and after the text or image, which we want to move. For example now I wish to move a text “Welcome To TechnicalProgramming.com” in browser, then we write code like this:

<marquee>

Welcome To TechnicalProgramming.com

<marquee>

By default this text move from right to left, you can see the code and example in below given video tutorials on html in hindi. I will write complete code for you, please copy and paste the program in notepad file and run.

<html>

<head> <title> Marquee Tag </title> </head>

<body>

<marquee>

Welcome To TechnicalProgramming.Com

</marquee>

</body>

</html>

 

Have you run this program and seen output, output is like the text written inside marquee tag is moving from right to left.

Marquee Speed:

Now you see the speed of moving text is very slow or if you want to increase or decrease speed then you need to add a tag “scrollamount” inside the marquee tag.

Examples:

marquee speed:  <marquee scrollamount =”30”>

Here you set speed of moving text should be 30, So as per requirement you will set the amount and check the output.

Marquee Direction:

If you wish to change the direction of text movement from right to left to left to right then you need to add tag “direction” inside marquee tag.

Examples:

marquee direction:   <marquee direction =”left”>

Here I set the direction of movement left, Now It starts with left and go to right side.

For moving top to bottom and bottom to top you need to set height, So add height tag inside marquee tag. Example:

<marquee direction =”up” height=”500”>

After setting the height and direction to up, you see the text move from down to up, If you want to move text from top to down then replace up with down tag. Example:

<marquee direction =”down” height=”500”>

Now i givinig you complete code just paste in notepad save as with abc.html name and check the output.

<html>

<head> <title> Marquee Tag </title> </head>

<body>

<marquee scrollamount=”30″ direction=”up” height=”500″ >

Welcome To TechnicalProgramming.Com

</marquee>

</body>

</html>

In output you will see the text is moving with speed (30 we set in scrollamount) from bottom to top (up we set in direction), I hope you done this.

Marquee Tag Background Tag:

You can also change marquee background color by adding “bgcolor” tag inside marquee tag. If you want the background of marquee is green then writh like this:

<marquee bgcolor=”green”>

You can write insted of green, whatever color you want in back ground.

Marquee Text Font Size:

You can change the size of font also inside the marquee tag, you need to add font tag after and bfore marquee tag, For example I want to set size 5, then I will write code like this:

<marquee>

<font size=”5”>

Welcome To TechnicalProgramming.Com

</font>

</marquee>

Marquee Movement Behaviour:

You can change the style of moving text, there are 3 styles: scroll, slide and alternate. You need to add a “behaviour” tag inside marquee tag. For example I want scroll style then I write like this:

<marquee behaviour=”scroll”>

Welcome To TechnicalProgramming.Com

</marquee>

Now you see output will be scrolling text, like this you can change stye to alternate as per requirement.

Stop & Play Marquee With Mouse:

I hope you seen this thing in some site already, when you take your mouse to some moving text or images It automatically stop and when you take out from that point it again starts moving. This happen with the help of “onmouseover” tag. You need to add this code inside the marquee tag, For Stoping when somone points pointer in text or image use: onmouseover=”this.stop();” tag And when take out the mouse for starting use: onmouseout=”this.start();” tag.

 

Now I am writing a complete code for understanding all above point in one place so you can see output easily.

Note: h2 tag is used to create a line. Watch below video tutorails to understand this code or comment below.

———————————————————

<html>

<head> <title> Marquee Tag With Text </title> </head>

<body>

<h2 align=”center”>Marquee Tag:</h2>

<hr color=”red” size=”5″>

<marquee scrollamount=”30″ direction=”right”

behavior=”alternate” bgcolor=”green” height=”500″ onmouseover=”this.stop();”

onmouseout=”this.start();”>

<font size=”5″>Welcome To TechnicalProgramming.Com <br>

<a href=””>Welcome To TechnicalProgramming.Com </a><br>

Welcome To TechnicalProgramming.Com <br>

Welcome To TechnicalProgramming.Com <br>

Welcome To TechnicalProgramming.Com <br>

Welcome To TechnicalProgramming.Com

</font>

</marquee>

<hr color=”red” size=”5″>

</body>

</html>


Run this program and comment below if anything is not working fine or you need help.

Watch Marquee Tag Video Tutorials in Hindi – Marquee Tag For Text

Now till here you learn about working with marquee tag in text, so like this you can also use marquee tag in images also. you just need to add image instead of text. you can see the example:

Marquee Tag With Images:


<html>
<head> <title> Marquee Tag Image</title> </head>
<body bgcolor=”yellow”>
<h2 align=”center”>Marquee Tag With Images:</h2>
<hr color=”red” size=”5″>
<marquee scrollamount=”30″ direction=”right”
behavior=”alternate” bgcolor=”green” height=”500″ onmouseover=”this.stop();”
onmouseout=”this.start();”>
<img src=”image/1 (1).jpg” width = “250” height=”200″ title=”car”>
<a href=”marquee tag.html” target=”blank”><img src=”image/1 (2).jpg” width = “250” height=”200″> </a>
<img src=”image/1 (3).jpg” width = “250” height=”200″>
<img src=”image/1 (4).jpg” width = “250” height=”200″>
</marquee>
<hr color=”red” size=”5″>

</body>
</html>


Here you can see in first is a simple image with car title, second image is a clickable url and if you click it opne in new window because we set target = blank. 3rd & 4th is simple image. Watch our Video tutorial to understand image marquee tag in hindi:

This video will explain you above written html marquee image tag in details.

I Hope with this tutorial you are able to create dynamic website in html using marquee tag. You can easily create website using html. Using marquee tag in website is really a good thing in terms of designing and look. It makes your website more attractive. Once you have done with this it means you are now in advance html section, on my next tutorial you will learn about html embed tag with example, this tag is used for adding audio, video files into web pages.  If you like my post then please subscribe through email id to receive latest updates on html.

Keep Ready & Be Happy!!!!!