Tags and Meaning

Description

<FONT></FONT>

The <FONT></FONT> tags are used to edit your text even further. Every browser has a default font setting, font name, size and color. Unless you have played around with it, the default is Times New Roman 12pt and it's black. The font display tags contain three major attributes, FACE, SIZE and COLOR.

 

The FACE attribute declares the type of font you want to use. The font will only display if your viewer has that font installed on their computer. If the person looking at the page doesn't have the font you specified installed on their computer, then they will only see the default font. So be very judicious in your use of fonts. Arial, Comic Sans MS, Times New Roman and Impact are pretty widely distributed with Windows. Correctly formatted, the font tags will look as follows:

<FONT FACE="IMPACT">This is Impact font</FONT>

And the output will look like this:

This is Impact font

You can hedge your bets a little by specifying more than one font. Consider this:

 

<FONT FACE="ARIAL,HELVETICA,LUCIDA SANS">Hello</FONT>

 

Here's what's happening: the browser looks for ARIAL, if it finds it, it uses it, if not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS, and if it can't find that it uses the default font.

 

The SIZE attribute equals a number from one to seven, where 7 is the biggest and 1 the smallest.

 

The COLOR attribute can have either the color name or color code as a value. The color name would be something like "green", "red" or "blue", while the color code would be something like "#00FF00".For a more detailed description on color, look at the explanation at the bottom of the page. In the following example both color and size is defined, which also shows that you can use more than one attribute in a tag:

<FONT SIZE="3" COLOR="green">Look at the pretty colors</FONT>

And this is what the output will look like in your browser:

Look at the pretty colors

<SUP></SUP>

45<SUP>th</SUP> Avenue

<SUB></SUB>

The <SUB></SUB> tags is exactly like the <SUP></SUP> tags, but instead of displaying the text more to the top of the current text line, it displays the text just below the current text line. Lets say you want to display the following mathematical equation A 2 = 45, but you want the "2" displayed just below the "A", then the format will look as follows:

A<SUB>2</SUB> = 45

The result will look like this:

A₂ = 45

<MARQUEE></MARQUEE>

The <MARQUEE></MARQUEE> tags scroll your defined piece of text or image across the screen. The following attributes can be defined for the scrolling tags: WIDTH, HEIGHT, BGCOLOR, LOOP, ALIGN, BEHAVIOR, SCROLLDELAY and SCROLLAMOUNT. Note however that this is also one of those tags that work fine in Internet Explorer, but not in Netscape Navigator for some reason. The tags are defined as follows, note the following example is the least amount of definition required for the <MARQUEE></MARQUEE> tags:

 

<MARQUEE WIDTH="55%">Text or image you want scrolling across the screen</MARQUEE>

 

If your browser supports the <MARQUEE></MARQUEE> tags, this is what the output will look like:

Text or image you want scrolling across the screen

The WIDTH and HEIGHT attributes define the horizontal and vertical size of the scrolling block, both of these can be entered as a percentage (WIDTH="50%") or pixel (WIDTH="100") value.

The BGCOLOR attribute defines the back ground color of the scrolling block, and accepts both color names (BGCOLOR="GREEN") and color codes (BGCOLOR="#00FF00").

LOOP does just what it says. This attribute specifies the amount of times the text should scroll across the scroll bar. If left out, the text will scroll an unlimited amount of times.

The ALIGN attribute can have the following values: TOP, MIDDLE or BOTTOM. This attribute is designed to align text that comes after or before a scroll bar with a certain part of the scroll bar itself.

The BEHAVIOR attribute controls the scrolling movement of the text inside the scrolling block, and accepts three values: SCROLL and ALTERNATE.

SCROLL makes the text move across from right to left in the scrolling block and is also the default if not specified. Correctly formatted it should look like this:

This is marquee with behaviour equal to SCROLL

ALTERNATE makes the text bounce from left to right in the scrolling block. Correctly formatted it should look like this:

This is marquee with behaviour equal to ALTERNATE

SCROLLDELAY specifies the speed at which the text will scroll across or within the scroll bar.

SCROLLAMOUNT specifies the amount of spaces or characters the text within the scroll bar should advance at one time. In other words, the lower this value the smoother the text will scroll across or within the scroll bar.

The following example is the <MARQUEE></MARQUEE> tags,defined with all it's attributes:

<MARQUEE WIDTH="100%" HEIGHT="20" BGCOLOR="WHITE" LOOP="10" ALIGN="MIDDLE" BEHAVIOR="ALTERNATE" SCROLLDELAY="10" SCROLLAMOUNT="1">Scrolling Text</MARQUEE>

And this is what the output of the above code will look like in your browser:

Scrolling Text

One more attribute that can be set for the <MARQUEE></MARQUEE> tags, is the STYLE attribute. This allows you to place a border around the scroll bar. The STYLE attribute can have the following values: BORDER, BORDER-LEFT, BORDER-RIGHT, BORDER-TOP and BORDER-BOTTOM. The BORDER value sets all four sides of the scroll bar. This means that if you only want a line on the bottom of the scroll bar you will specify the BORDER-BOTTOM value. The following example shows how to define the STYLE attribute.

<MARQUEE WIDTH="80%" STYLE="BORDER: 1px solid">Scrolling Text</MARQUEE>

And this is what the output of the above code will look like in your browser:

Scrolling Text

As you probably noted, the value of the STYLE attribute wasn't just set to BORDER but BORDER: 1px solid. The code after the colon defines the width of the border. Thus if you wanted to make the border thicker you would have set the STYLE attribute to BORDER: 5px solid, like this:

<MARQUEE WIDTH="80%" STYLE="BORDER: 5px solid">Scrolling Text</MARQUEE>

And this is what the output of the above code will look like in your browser:

Scrolling Text

The other values for the STYLE attribute: BORDER-LEFT, BORDER-RIGHT, BORDER-TOP and BORDER-BOTTOM, are defined exactly the same as the BORDER value. Only difference is, it only draws the lines you define. In other words, if you only want a line at the bottom of the scroll bar, your code will look as follows:

<MARQUEE WIDTH="80%" STYLE="BORDER-BOTTOM: 1px solid">Scrolling Text</MARQUEE>

And this is what the output of the above code will look like in your browser:

Scrolling Text

But let's assume you only want a right and a left border, then you will define the scroll bar like this:

<MARQUEE WIDTH="80%" STYLE="BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid">Scrolling Text</MARQUEE>

And this is what the output of the above code will look like in your browser:

Scrolling Text

Note however the semi colon ( ; ) which separates the two values BORDER-LEFT and BORDER-RIGHT. Also remember that as soon as you define the BORDER value with all of these, it will override all the other values and draw a full border around the scroll bar. So only BORDER-LEFT, BORDER-RIGHT, BORDER-TOP and BORDER-BOTTOM can be used in conjunction with each other in this instance.

<XMP></XMP>

<XMP><FONT SIZE="6">Hello World</FONT></XMP>

Will have the following output:

<FONT SIZE="6">Hello World</FONT>

<!-- -->

<!-- Hi mom -->