Make Webpage more interactive using Marquee Part-1

Making your blog or Website attractive is a very tough and complicated task. Most developers uses JavaScript and CSS to design more relevant webpages. Instead of JavaScript there are some predefined tags in HTML to provide best User Interface in your website. In this series, I will tell you how to make webpages more interactive using light and predefined HTML tags. In the first part of this i am telling how to use the most popular HTML tag Marquee in your website to make it more User friendly. The main use of marquee tag is to provide sliding effect, dynamically. You can make text/image scroll from left to right, top to bottom and vice versa respectively. So Let`s start with <Marquee> tag.

There are various flow of marquee like scroll, up, down, slide. I will explain one by one.The simplest form to write Marquee tag is

<marquee> your text </marquee>

Instead of it, there are various attribute of marquee tags are

Behavior (Slide, Scroll, alternate)
Direction (Up,Down , Left, Right)
scrollamount (time in seconds)
scrolldelay (time in seconds)

1.Marquee Scrolling Text

Your ScrollingText

<marquee behavior="scroll" direction="left">Your ScrollingText</marquee>

Change the direction properties to right for scrolling it to right.

2.Marquee Sliding Text

Your Sliding Text

<marquee behavior="slide" direction="left">Your sliding text</marquee>

Change the direction attribute for sliding direction.

3.Marquee Bouncing Text

Your Bouncing Text

<marquee behavior="alternate" direction="left">Your Bouncing Text</marquee>

4.Marquee in Up and Down direction

Your ScrollingText

<marquee behavior="scroll" direction="up">Your ScrollingText</marquee>

5.Marquee Scrolling Speed

Your Slow Speed Text
Your Medium Speed Text
Your Fast Speed Text

<marquee behavior="scroll" direction="left" scrollamount="1">Your Slow Speed Text</marquee> <br />
<marquee behavior="scroll" direction="left" scrollamount="10">Your Medium Speed Text</marquee><br />
<marquee behavior="scroll" direction="left" scrollamount="20">Your Fast Speed Text</marquee>

6.Marquee Scrolldelay attribute

scrolldelay attribute is used to scroll the text or image after some delay. It take time in second to pause the scrolling of the marquee.

Your Slow Speed Text

<marquee behavior="scroll" direction="left" scrollamount="50" scrolldelay='500'>Your Slow Speed Text</marquee>

6.Marquee in Images

You can use any Image tag in between <marquee> </marquee> tags to scroll images. All the other properties are same. See this example.

<marquee behavior="scroll" direction="left"> <img src="http://2.bp.blogspot.com/-p-dbWUgh9hE/T96dA5c8OGI/AAAAAAAABWU/K_V8qSZODck/s72/icon1.png" /> </marquee>

I hope with the help of this tutorials, you can create cool and awesome sliding text for your blog. In next tutorials, i will explain how to use stop and start in marquee tags.