A study of the
Created | Updated Sep 2, 2002
THE MARQUEE TAG WILL ONLY WORK MICROSOFT INTERNET EXPLORER BROWSERS VERSIONS 3+
This is an introduction to the<MARQUEE> tag in GuideML.
The <MARQUEE> tag originated back in Internet explorer 3, which ran off the language
HTML1. 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
was 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 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 can create an entertaining and professional looking webpage.
This page will teach you how to use the <MARQUEE>
tag in all its variables with all its attributes.
Within H2G2 you can use the <MARQUEE> tag on your personal space and non edited guide entrys but the<MARQUEE> tag will not be accepted in edited guide entrys (with the exception of this one). Also not allowed in edited guide entrys are colours and differentiating font sizes but they are fine on your personal space and normal guide entrys as long as you do not expect them to be edited!
Inserting <MARQUEE> into your space will create a scrolling piece of text that goes 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:<MARQUEE> Insert text or picture here </MARQUEE>
Always remember to close the tag with </MARQUEE> otherwise GuideML will not run it. Below is exactly what that text would create: Insert text or picture here
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 in different sizes of text and even differnet colours as shown below:
To create differnt text sizes simply use the <FONT SIZE="x"> tag inside the <MARQUEE> tag as shown below:<MARQUEE><FONT SIZE="6"> Insert text or image here</FONT></MARQUEE>
This would create this: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>(yet again spelt the american way) attribute to the <FONT> tag, as shown here:<FONT SIZE="3" COLOR="your choice"> Insert text or picture here</FONT>
Below are some of the colour choices:REDYELLOWGREENBLUEORANGEPURPLE
And many more besides of which the hexadecimal colour code can be found at the 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. To use it enter:
This would make (using the colour yellow):
Experiment with different colours of both background and text.
You may of noticed so far that everything seem 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 a word going left
GOING LEFT
To achieve a word or picture going right just type <MARQUEE DIRECTION="RIGHT">Text or picture here</MARQUEE> here's an example GOING RIGHT
Surprisingly you can attach up and down variable in the same way To go up type <MARQUEE DIRECTION="UP"> Text or picture here</MARQUEE>GOING UP
And the down <MARQUEE DIRECTION="DOWN"> Text or picture here</MARQUEE>GOING DOWN
If left right up and down isn't good enough for you there is another part of the tag still to come. It is the BEHAVIOR (spelt American way). This part of the tag is added after the <MARQUEE> like so:
It comes with three more ways of making the text do new things they are:
This put into action would make this: SCROLL Alternate
To make 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 oposite.To code this put in (any direction you want)<MARQUEE DIRECTION="LEFT" BEHAVIOR="ALTERNATE">. This is shown below:
I CAN BOUNCE LEFT I CAN BOUNCE RIGHT
The same is true for the up and downvariables(any direction you want)<MARQUEE DIRECTION="UP" BEHAVIOR="ALTERNATE">:
I CAN BOUNCE UP I CAN BOUNCE DOWNSlide
Slide is an unusal piece of coding because it doesnt actually do much. When implemented SLIDE makes the piece of selcted 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 atrribute use the following code:
When used it will make this: SLIDE
You may of noticed above on the FONT section that the words were breaking up. The shorter words get across the screen quicker 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 4 Cycles an example of this is below: When you create a document using the<MARQUEE> tag and use lots of different layers the text breaks up and is often impossible to read after about 4 cycles. This is an example of that
As shown above words automatically go at differencing rates. By attaching a speed variable to the <MARQUEE> tag, and with very carefull coding you can make the words go at the same speed across the screen and make sure they do not break up. There are two speed attributes:
We'll speed things up first, his is done by setting a 'SCROLLAMOUNT' like so <MARQUEE SCROLLAMOUNT="a number">Insert text or picture here</MARQUEE> The higher the number the higher the speed below, bearing in mind the normal scroll speed is about 8 there really is no point in adding rediculously high speeds such as anything over 50. Here are some examples
SCROLLAMOUNT="5" 5 SCROLLAMOUNT="10" 10 SCROLLAMOUNT="15" 15 SCROLLAMOUNT="20" 20
Now things start getting to fast to read here is the 50 and the 100 , and 1000 speeds.
SCROLLAMOUNT="50" 50 SCROLLAMOUNT="100" 100 SCROLLAMOUNT="1000" 1000
As you can see they can be to 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> tag. Whereas the <SCROLLAMOUNT> attribute speeds up text, the <SCROLLDELAY> attribute slows them down, if somewhat less smoothly. When put into action the <SCROLLDELAY> tag slows down a piece of text or a picture within the<MARQUEE> tag. This is is done, as always 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, lets say under "100", also make no impression because there is very little differnece in speed between them and the normal <MARQUEE> are not noticiable. Below is the correct code for the <SCROLLDELAY> attribute:
Heres some examples of different speeds:SCROLLDELAY="1000" 1000 SCROLLDELAY="800" 800 SCROLLDELAY="600" 600 SCROLLDELAY="400" 400 SCROLLDELAY="200" 200 SCROLLDELAY="100" 100
Using the normal <MARQUEE> tag the item set to scroll keeps looping and looping up until the point where the user closes the window or page. The LOOP attribute allows us to predetermine the amount of times the piece of text or the picture scrolls the LOOP is set up as follows:
Which makes:
LOOP="25"
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 I told you that the SLIDE attribute may be used in conjuntion with another attribute to great effect? Well its the LOOP it works well with because it means when the item has finshed scrolling all its loops it sits neatly on the left hand side of the page. To use this culmination of attributes enter the following:
Again I will set the LOOP to 25, this time though the scrolling item won't finish once done.
LOOP="25" with SLIDE
You can use the WIDTH and HEIGHT attributes in the <MARQUEE> tag to determine the area in which the item can scroll. For example:
HEIGHT AND WIDTH="50"
See how it creates a box which the text doesnt scroll out of? To make one of these enter:
This would make 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 the page with a MARQUEE tag on in different resolutions the person with the same resolution as you would see it how it was meant to be. The second person might see it so that it stretches the page across becasue they are running a lower number of pixels on screen at one time. The third person might see it far to small because their resoultion 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 as 100% the MARQUEE would 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 doesnt 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.
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 in your final <MARQUEE>, An example of this:
you should now have something which looks like this:
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 three <MARQUEE>'s inside each other using UP and DOWN attributes as well as SCROLLAMOUNT.
Experiment with all the attributes together you'll be amazed what you will come up with.
This is an introduction to the<MARQUEE> tag in GuideML.
The <MARQUEE> tag originated back in Internet explorer 3, which ran off the language
HTML1. 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
was 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 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 can create an entertaining and professional looking webpage.
This page will teach you how to use the <MARQUEE>
tag in all its variables with all its attributes.
Within H2G2
Within H2G2 you can use the <MARQUEE> tag on your personal space and non edited guide entrys but the<MARQUEE> tag will not be accepted in edited guide entrys (with the exception of this one). Also not allowed in edited guide entrys are colours and differentiating font sizes but they are fine on your personal space and normal guide entrys 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 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:<MARQUEE> Insert text or picture here </MARQUEE>
Always remember to close the tag with </MARQUEE> otherwise GuideML will not run it. Below is exactly what that text would create: Insert text or picture 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 in different sizes of text and even differnet colours as shown below:
To create differnt text sizes simply use the <FONT SIZE="x"> tag inside the <MARQUEE> tag as shown below:<MARQUEE><FONT SIZE="6"> Insert text or image here</FONT></MARQUEE>
This would create this: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>(yet again spelt the american way) attribute to the <FONT> tag, as shown here:<FONT SIZE="3" COLOR="your choice"> Insert text or picture here</FONT>
Below are some of the colour choices:REDYELLOWGREENBLUEORANGEPURPLE
And many more besides of which the hexadecimal colour code can be found at the 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. To use it enter:
<MARQUEE BGCOLOR="Hexadecimal colour value">Text or picture here</MARQUEE>
This would make (using the colour yellow):
YELLOW BACKGROUND
Experiment with different colours of both background and text.
Basic directions of the <MARQUEE> tag
You may of noticed so far that everything seem 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 a word going left
GOING LEFT
To achieve a word or picture going right just type <MARQUEE DIRECTION="RIGHT">Text or picture here</MARQUEE> here's an example GOING RIGHT
Surprisingly you can attach up and down variable in the same way To go up type <MARQUEE DIRECTION="UP"> Text or picture here</MARQUEE>GOING UP
And the down <MARQUEE DIRECTION="DOWN"> Text or picture here</MARQUEE>GOING DOWN
The BEHAVIOR tag
If left right up and down isn't good enough for you there is another part of the tag still to come. It is the BEHAVIOR (spelt American way). This part of the tag is added after the <MARQUEE> like so:
<MARQUEE BEHAVIOR="SCROLL, ALTERNATE, OR SLIDE"> Insert text or picture here </MARQUEE>
It comes with three more ways of making the text do new things they are:
- SCROLL
- ALTERNATE
- SLIDE
<MARQUEE BEHAVIOR="SCROLL"> Insert text or picture here </MARQUEE>
This put into action would make this: SCROLL Alternate
To make 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 oposite.To code this put in (any direction you want)<MARQUEE DIRECTION="LEFT" BEHAVIOR="ALTERNATE">. This is shown below:
I CAN BOUNCE LEFT I CAN BOUNCE RIGHT
The same is true for the up and downvariables(any direction you want)<MARQUEE DIRECTION="UP" BEHAVIOR="ALTERNATE">:
I CAN BOUNCE UP I CAN BOUNCE DOWNSlide
Slide is an unusal piece of coding because it doesnt actually do much. When implemented SLIDE makes the piece of selcted 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 atrribute use the following code:
<MARQUEE BEHAVIOR="SLIDE"> Insert text or picture here </MARQUEE>
When used it will make this: SLIDE
The Break up of Words
You may of noticed above on the FONT section that the words were breaking up. The shorter words get across the screen quicker 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 4 Cycles an example of this is below: When you create a document using the<MARQUEE> tag and use lots of different layers the text breaks up and is often impossible to read after about 4 cycles. This is an example of that
Speed
As shown above words automatically go at differencing rates. By attaching a speed variable to the <MARQUEE> tag, and with very carefull coding you can make the words go at the same speed across the screen and make sure they do not break up. There are two speed attributes:
- SCROLLAMOUNT (speeds things up)
- SCROLLDELAY (slows things down)
We'll speed things up first, his is done by setting a 'SCROLLAMOUNT' like so <MARQUEE SCROLLAMOUNT="a number">Insert text or picture here</MARQUEE> The higher the number the higher the speed below, bearing in mind the normal scroll speed is about 8 there really is no point in adding rediculously high speeds such as anything over 50. Here are some examples
SCROLLAMOUNT="5" 5 SCROLLAMOUNT="10" 10 SCROLLAMOUNT="15" 15 SCROLLAMOUNT="20" 20
Now things start getting to fast to read here is the 50 and the 100 , and 1000 speeds.
SCROLLAMOUNT="50" 50 SCROLLAMOUNT="100" 100 SCROLLAMOUNT="1000" 1000
As you can see they can be to 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> tag. Whereas the <SCROLLAMOUNT> attribute speeds up text, the <SCROLLDELAY> attribute slows them down, if somewhat less smoothly. When put into action the <SCROLLDELAY> tag slows down a piece of text or a picture within the<MARQUEE> tag. This is is done, as always 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, lets say under "100", also make no impression because there is very little differnece in speed between them and the normal <MARQUEE> are not noticiable. Below is the correct code for the <SCROLLDELAY> attribute:
<MARQUEE SCROLLDELAY="number between 100 and 1000"> Insert text or picture here </MARQUEE> tag. Whereas the <SCROLLAMOUNT>
Heres some examples of different speeds:SCROLLDELAY="1000" 1000 SCROLLDELAY="800" 800 SCROLLDELAY="600" 600 SCROLLDELAY="400" 400 SCROLLDELAY="200" 200 SCROLLDELAY="100" 100
LOOP
Using the normal <MARQUEE> tag the item set to scroll keeps looping and looping up until the point where the user closes the window or page. The LOOP attribute allows us to predetermine the amount of times the piece of text or the picture scrolls the LOOP is set up as follows:
<MARQUEE LOOP="number of loops you wish it to perform"> Insert text or picture here </MARQUEE>
Which makes:
LOOP="25"
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 I told you that the SLIDE attribute may be used in conjuntion with another attribute to great effect? Well its the LOOP it works well with because it means when the item has finshed scrolling all its loops it sits neatly on the left hand side of the page. To use this culmination of attributes enter the following:
<MARQUEE BEHAVIOR="SLIDE" LOOP="number of loops you wish it to perform"> Insert text or picture here </MARQUEE>
Again I will set the LOOP to 25, this time though the scrolling item won't finish once done.
LOOP="25" with SLIDE
Width and Height
You can use the WIDTH and HEIGHT attributes in the <MARQUEE> tag to determine the area in which the item can scroll. For example:
See how it creates a box which the text doesnt scroll out of? To make one of these enter:
<MARQUEE WIDTH="number" HEIGHT="number" > Insert text or picture here </MARQUEE>
This would make 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 the page with a MARQUEE tag on in different resolutions the person with the same resolution as you would see it how it was meant to be. The second person might see it so that it stretches the page across becasue they are running a lower number of pixels on screen at one time. The third person might see it far to small because their resoultion 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 as 100% the MARQUEE would 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 doesnt 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 in your final <MARQUEE>, An example of this:
<MARQUEE BEHAVIOR="ALTERNATE" WIDTH="300" HEIGHT="200">
<MARQUEE BEHAVIOR="ALTERNATE" WIDTH="100" HEIGHT="100"> Insert text here</MARQUEE></MARQUEE>
you should now have something which looks like this:
Example
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 three <MARQUEE>'s inside each other using UP and DOWN attributes as well as SCROLLAMOUNT.
Example
Experiment with all the attributes together you'll be amazed what you will come up with.
1Hyper Text Markup Language, the base language which webpages are built upon
