MaraHTML

¤ Tisha Look's HTML Tutorial ¤

Dystile's Guide To Marquees

Have you ever seen some moving text on a webpage, and wondered how this was achieved? Well, its not as hard as you may think. In this guide, I'll explain to you how this can be done very simply!

Firstly, you must create the simple tag. Although it's very simple, it's also very effective! Here it is:

<marquee>This text will move!!</marquee>

That code will display this:

This text will move!!

Although that code is effective on its own, you can now add a background to it. Here's the code:

<marquee bgcolor="#XXXXXX">This text will move and have a background!!</marquee>

All you have to do is change the "#XXXXXX" to a Hex Color Code or Color Name. For example, #000000 or Black would have exactly the same output. You can also refer to this HEX Color Code Chart.

So now we have a simple marquee with a background. Great, that's fine for a website, however you may want to change the direction that it moves, to add a little more to your website. To do this, we use the following code:

<marquee direction="left/right/up/down">This text will move a different direction!!</marquee>

To change the direction, remember you have to only have 1 direction! Any will work, as long as it's spelt correctly. Here's a little preview of each:

This text moves left!
This text moves right!
This text moves up!
This text moves down!

Now as you may notice, your marquee fills the whole width of the page or table you've added it to. This can be a bit of a problem, so we use the width restriction codes to make it the exact width we want. We can use Percentages or Pixels for this, so remember to add either the "%" or "px" after the number value.

Here's the clever little code that allows you to do this:

<marquee width="300px">This marquee has a width of 300px!</marquee>

Here's a preview of what it'll look like:

This marquee has a width of 300px!

So now you can create a simple marquee, add a background, direction and width to it. Awesome!

The only thing left now is combining these all together, and adding other HTML codes to it. Here are a few examples of what marquee's can look like, with their codes:

<marquee direction="right" bgcolor="black" width="400px">This is an example marquee!</marquee>

This is an example marquee!

<marquee direction="up" width="300px">This is an example marquee!</marquee>

This is an example marquee!

<marquee bgcolor="purple" direction="down" width="300px"><center>This is an example marquee!</center></marquee>

This is an example marquee!

As you can see, I've added a few extras in there; font colour, font size, font face and font styles along with the background, direction and width we learnt in this tutorial.

So there you have it! You can now create some funky little marquees for your website!

¤ NAVIGATION ¤

¤ Home

¤ HTML Tutorial:

Intro

Adding Graphics

Working With Text

Working With Colors

Adding Links

Creating Tables

Adding Music

Marquees

Scrollbars