The <MARQUEE> tag is not compatible with all web browsers. It will generally work in Internet Explorer version 3 or higher. With Internet Explorer running on a Macintosh, there may be some irregularities. On any other browser, the <MARQUEE> tag will not work at all¹.

This is an introduction to the <MARQUEE> tag in GuideML. The <MARQUEE> tag originated back in Internet Explorer 3, which ran off the language HTML². At first a Microsoft gimmick, used to pull more users to their Internet Explorer rather than other competitors' browsers, it was used, and still is, to make text or images scroll sideways, but it has been adapted and made to do all manner of things. None of the other browsers include it so it is not used in many corporate websites, but it works in all versions of Internet Explorer higher than version 3. Sometimes people ruin their webpages by overuse of the <MARQUEE> tag, but used in the right way, it can create an entertaining and professional looking webpage. This entry will teach you how to use the <MARQUEE> tag with all its attributes and variables.

Within h2g2

Within h2g2 you can use the <MARQUEE> tag on your personal space and non-edited guide entries but the <MARQUEE> tag will not be accepted in Edited Guide Entries (with the exception of this one). Also not allowed in Edited Guide Entries are colours, text boxes and different font sizes, but they are fine on your personal space and normal guide entries, as long as you do not expect them to be edited!

The Basics

Inserting <MARQUEE> into your space will create a scrolling piece of text that goes right to left. It will travel across the screen and disappear at the side then reappearing on the right side and continuing its journey. To create this in GuideML just insert the coding below:

Always remember to close the tag with </MARQUEE>, otherwise GuideML will not run it. Below is exactly what the above code would create:

[Insert text or image here]

Creating Scrolling Anything

The <MARQUEE> tag works not only on words but anything you can code into GuideML. Smileys, tables, pictures, and animated .GIFS can be included to varying effect. You can code text in different sizes and even different colours.

To create different text sizes simply use the <FONT SIZE="x"> tag inside the <MARQUEE> tag as shown below:

[Insert text or image here]

You can do this with all the font sizes as shown below:

Tiny size 1Small size 2Normal size 3Above average size 4Big size 5Very big size 6Amazingly big size 7

Also available is coloured text; this can be achieved by adding the COLOR attribute (spelled the American way) to the <FONT> tag, as shown here:

RED, SCROLLING TEXT

Below are some of the colour choices:

#FF0033 = RED#FFFF00 = YELLOW#00FF00 = GREEN#0000FF = BLUE#FF9900 = ORANGE#9900CC = PURPLE

And many more besides, the hexadecimal colour codes of which can be found at Web Safe Colours.

Another use of colour is to be able to set the background on which the item is scrolling, kind of like filling a TABLE's background colour. For example, to achieve black text scrolling on a yellow background, use the code:

BLACK TEXT, YELLOW BACKGROUND

Experiment with different colours of both background and text.

Basic Directions of the <MARQUEE> Tag

You may have noticed so far that everything seems to be going left. This is because when you put in a normal <MARQUEE> tag it automatically goes left. However by adding the direction to the tag we can set the direction. Below is some text going left

GOING LEFT

To achieve text or a picture going right just add the DIRECTION attribute to the <MARQUEE> tag, like this:

GOING RIGHT

Surprisingly you can attach up and down variables in the same way:

GOING UP

GOING DOWN

The BEHAVIOR Attribute

If left and right, up and down isn't good enough for you, there is another part of the tag still to come. It is BEHAVIOR (spelled, once again, the American way). This part of the tag is added after the <MARQUEE> like this:

It comes with three more ways of making the text do new things. They are:

• SCROLL
• ALTERNATE
• SLIDE

Scrolling

BEHAVIOR="SCROLL" is no more than the default, preset <MARQUEE> behaviour. To use SCROLL with the BEHAVIOR attribute use the following code:

SCROLLING TEXT

Alternate

BEHAVIOR="ALTERNATE" makes the piece, or pieces, of text or pictures bounce off the walls instead of the normal scrolling. The direction you put in is the direction it will start off going and then when it hits the side it will obviously do the opposite. Examples:

I CAN BOUNCE LEFT

I CAN BOUNCE RIGHT

The same is true for the UP and DOWN variables:

I CAN BOUNCE UP

I CAN BOUNCE DOWN

Slide

BEHAVIOR="SLIDE" is an unusual piece of coding because it doesn't actually do much. When implemented, SLIDE makes the piece of selected text move form right to left and stop at the left hand side, staying there until the page is refreshed. It can be quite handy when used in conjunction with another tag, but more on that later.

To use SLIDE with the BEHAVIOR attribute use the following code:

SLIDING TEXT

The Breakup of Words

You may have noticed above on the FONT section that the words were breaking up. The shorter words get across the screen sooner than the bigger ones, meaning if you do a multilayer piece of text in the <MARQUEE> tag it is often impossible to read after about four cycles. An example of this is below:

When you createadocument usingthe <MARQUEE>tagand use lots of different layersthe text breaks up and isoftenimpossible to readafter about 4 cycles.This isan example of that.

Speed

As shown above words automatically get across the screen at differing rates. By attaching a speed variable to the <MARQUEE> tag, and with very careful coding, you can make the words get across the screen at the same time and make sure they do not break up. There are two speed attributes:

• SCROLLAMOUNT (speeds things up)
• SCROLLDELAY (slows things down)

SCROLLAMOUNT

We'll speed things up first; this is done by setting a SCROLLAMOUNT with the following code:

The higher the number, the higher the speed. Bearing in mind the normal scroll speed is about 8, there really is no point in adding ridiculously high speeds such as anything over 50. Here are some examples:

SCROLLAMOUNT="5"5SCROLLAMOUNT="10"10SCROLLAMOUNT="15"15SCROLLAMOUNT="20"20

Now things start getting too fast to read. Here are the 50, 100 and 1000 speeds:

SCROLLAMOUNT="50"50SCROLLAMOUNT="100"100SCROLLAMOUNT="1000"1000

As you can see they can be too fast; the 1000 speed does not show up because our screens cannot handle something moving that fast!

SCROLLDELAY

This attribute is quite similar to the SCROLLAMOUNT attribute. Whereas SCROLLAMOUNT speeds up text, the SCROLLDELAY attribute slows it down, if somewhat less smoothly. When put into action, SCROLLDELAY slows down a piece of text or a picture within the <MARQUEE> tag. This is coded, as always, by using an equals sign and entering a numerical value such as "10" or "20". In this case, very high numbers, mainly those over 1000, fail to make any impression whatsoever due to them being so slow it takes ages for them to move at all. On the other hand, very low numbers (under 100) also make no impression because there is very little difference in speed between them and the normal <MARQUEE> speed. Below is the correct code for the SCROLLDELAY attribute:

Here are some examples of different speeds:

SCROLLDELAY="1000"1000SCROLLDELAY="800"800SCROLLDELAY="600"600SCROLLDELAY="400"400SCROLLDELAY="200"200SCROLLDELAY="100"100

LOOP

Using the normal <MARQUEE> tag the item set to scroll keeps looping and looping up until the user closes the window or page. The LOOP attribute allows us to predetermine the number of times the piece of text or the picture scrolls. The LOOP is set up as in this example:

25 LOOPS

Note that when the LOOP number has finished the piece disappears entirely, which is why you may not be seeing a scrolling example now.

You may remember it mentioned that the SLIDE attribute may be used in conjunction with another attribute to great effect? Well it's LOOP it works well with, because it means that, when the item has finished scrolling all its loops, it sits neatly on the left hand side of the page. This combination of attributes is used here:

25 LOOPS with SLIDE

Again the LOOP is set to 25; this time though, the scrolling item won't vanish once done.

Width and Height

You can use the WIDTH and HEIGHT attributes in the <MARQUEE> tag to determine the area in which an item can scroll. For example, the following code creates a box which the text doesn't leave:

WIDTH="150", HEIGHT="50"

Using the WIDTH and HEIGHT attributes in this way creates a box of a certain number of pixels high and a certain number of pixels across. The problem with this is everybody has different computers and these computers run different resolutions. For example, if three people each looked at a page with a <MARQUEE> tag on it in different resolutions, the person with the same resolution as you would see it as it was meant to be. The second person might see it so that it stretches the page across because they are running a lower number of pixels on screen at one time. The third person might see it far too small because their resolution is higher than yours, enabling them to have more pixels on screen than you.

This problem is overcome by using percentages as heights and widths. If you set the width to 100% (WIDTH="100%"), the <MARQUEE> will scroll the whole length of the page on every system. Then you have to choose how much of the page you want to be devoted to it, height-wise. It is often best to use WIDTH and HEIGHT when applied to the <MARQUEE> inside of a <TABLE> so that the <MARQUEE> doesn't get bigger and bigger when the page is added to. When using the percentages, make sure the percent sign is always beside the number with no space in between.

Now on to where you can use this knowledge.

<MARQUEE> inside a <MARQUEE>

Using the WIDTH and HEIGHT attributes it is possible to do something which is slightly complicated but very impressive when coded right. It is to put a <MARQUEE> inside another <MARQUEE>.

We'll go through this step by step.

1. Create a scrolling <MARQUEE> within a box with pretty big dimensions using WIDTH and HEIGHT. Give it the BEHAVIOR="ALTERNATE" attribute.

2. Instead of inserting text which will scroll, insert another <MARQUEE> into the space, giving the new <MARQUEE>WIDTH and HEIGHT attributes which are lower than half that of the first <MARQUEE>'s, again giving it the BEHAVIOR="ALTERNATE" attribute. Remember to put some text or a picture inside your final <MARQUEE>, An example of this:

   <MARQUEE BEHAVIOR="ALTERNATE" WIDTH="300" HEIGHT="200"><MARQUEE BEHAVIOR="ALTERNATE" WIDTH="100" HEIGHT="100">[Text or image]</MARQUEE></MARQUEE>

   You should now have something which looks like this:

   [Text or image]

3. Start adding DIRECTION to it especially using UP and DOWN. This will create the appearance of free roaming especially if you add more <MARQUEE>s. Below is an example with three <MARQUEE>s inside each other using "UP", "DOWN" and "RIGHT" DIRECTION attributes as well as SCROLLAMOUNT.

   <MARQUEE BEHAVIOR="ALTERNATE" DIRECTION="RIGHT" WIDTH="350" HEIGHT="300" SCROLLAMOUNT="20"> <MARQUEE BEHAVIOR="ALTERNATE" DIRECTION="UP" WIDTH="200" HEIGHT="150" SCROLLAMOUNT="10"> <MARQUEE BEHAVIOR="ALTERNATE" DIRECTION="DOWN" WIDTH="100" HEIGHT="90" SCROLLAMOUNT="5"> Example </MARQUEE> </MARQUEE> </MARQUEE>

   Example

Experiment with all the attributes together you'll be amazed what you will come up with.