Yeah, HTML is good. We’ve gotten pretty deep into text control, but there’s still more ahead so let’s trudge on.
We can control the font in HTML using, what else, the <FONT> tag! We can use the <FONT> tag to control size using the SIZE attribute. The SIZE attribute is used like this:
<FONT SIZE=”x”>
This text font size x.
</FONT>
Where x is a number, from 1 to 7. The size that the formatted text is depends on the viewers preference settings and screen resolution. Generally though, 1 is really small and 7 is really big. Just in case you’re curious, the default font size is 3. There is also a tag called the <BASEFONT> tag, which only can take the SIZE attibute, but is made to change the size of the text on the entire page. We can also add color to our text using the <FONT> tag. Color is added to text using, duh, the COLOR attribute to the <FONT> tag. We use the COLOR attribute the same way as the SIZE attribute:
<FONT SIZE=”4″ COLOR=”blue”>
This is colorful text in font size 4!
</FONT>
To our page’s viewers, it would look like this:
This is colorful text in font size 4!
The COLOR attribute can use these standard colors: black, white, green, red, yellow, blue, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, silver or teal. What? You need more control? Then I suggest you learn the hexadecimal color codes. Hex color codes are used like this:
<FONT COLOR=”#0033FF”>
This text is purple.
</FONT>
For more information on Hex color codes, I suggest you try html-color-codes.com. The last attribute to <FONT> we’ll learn in this lesson is FACE. By defining a font’s face, you can control the appearance of that font. The FACE attribute is used like this:
<FONT FACE=”arial” size=”5″ color=”blue”>
This text is a stunning arial size 5 in blue!
</FONT>
To the viewer, it would look like this:
This text is a stunning arial size 5 in blue!
Yes, this is great, but there’s a catch: for the viewer to see this font change he needs to have the font on his computer. How does it get there? Different computer’s come with different font’s installed. For example, the Arial font is used on PCs, but Macs use a similar font called Helvetica. We can get around this by asking for backup choices in our FACE attribute. This is done like this:
<FONT FACE=”arial,helvetica”>
This text is either Arial or Helvetica.
</FONT>
This will show up as arial on computers that have arial installed, or helvetica if they do’nt have arial but do have helvetica. If they do’nt have either, the font does’nt change. However, you can specify as many back up choices as you want.
Yeah, simple text is great, but what if we need to put some special characters into our page? Well, once again HTML to the rescue! The format for this is & followed by the Numeric Code of the special character, or the mnemonic entity of that character, followed by a ;. Here’s a list of the important special characters:
Character Numeric Code Mnemonic Entity Character Name
” #34 quot Quotation mark
& #38 amp Ampersand
< #60 lt Less Than sign
> #62 gt Greater Than sign
¢ #162 cent Cent sign
£ #163 pound Pound sterling
¦ #166 brkbar Broken Vertical bar
§ #167 sect Section sign
© #169 copy Copyright
® #174 reg Registered trademark
° #176 deg Degree sign
± #177 plusmn Positive or Negative
² #178 sup2 Superscript two
³ #179 sup3 Superscript three
· #183 middot Middle dot
¹ #185 sup1 Superscript one
¼ #188 frac14 Fraction one-fourth
½ #189 frac12 Fraction one-half
¾ #190 frac34 Fraction three-fourths
Æ #198 AElig Capital AE ligature
æ #230 aelig Small ae ligature
É #201 Eacute Accented capital E
é #233 eacute Accented small e
× #215 Multiply sign
÷ #247 Division sign
Hey! Here’s a little secret: to change the Background color of our web page, simply insert the BGCOLOR attribute into your <BODY> tag. It’s used like this: <BODY BGCOLOR=”color or hex number code”>
A little review: How would we put the copyright sign (©) on your website? If you answered &
followed immediately by #169;, you’re correct! You deserve to go on to the next lesson!
