- Sprucing Up Your Text
- A Few Formatting Features You'll Use All the Time
- Textras: Fancier Text Formatting
This chapter is from the book
This chapter is from the book
This chapter is from the book
Textras: Fancier Text Formatting
As you saw a bit earlier in this chapter, you can display your text in a different font size by using one of the heading tags (such as <H1>). Unfortunately, you can't use heading tags to adjust the size of individual characters because headings always appear on a line by themselves. To fix this, you use two tags: <FONT> and <BASEFONT>, which I discuss in the next couple of sections. I'll also show you how to change the color of your text.
The <FONT> Tag, Part I: Changing the Size of Text
The <FONT> tag adjusts (among other things) the size of any text placed between <FONT> and its corresponding end tag, </FONT>. Here's how it works:
<FONT SIZE="size">Affected text goes here</FONT>
The size part is a number that pinpoints how big you want the text to appear. You can use any number between 1 (tiny) and 7 (gargantuan); 3 is the size of standard-issue text. Here's an example (see fontsize.htm on the website):
<HTML> <HEAD> <TITLE>Changing the Size of Text</TITLE> </HEAD> <BODY> <H1>Changing Font Size with the <FONT> Tag</H1> <HR> <FONT SIZE="7">This text uses a font size of 7.</FONT><BR> <FONT SIZE="6">This text uses a font size of 6.</FONT><BR> <FONT SIZE="5">This text uses a font size of 5.</FONT><BR> <FONT SIZE="4">This text uses a font size of 4.</FONT><BR> <FONT SIZE="3">This text uses a font size of 3 (normal).</FONT><BR> <FONT SIZE="2">This text uses a font size of 2.</FONT><BR> <FONT SIZE="1">This text uses a font size of 1.</FONT><BR> <HR> <FONT SIZE="7">Y</FONT>ou can mix and match sizes: <BR> Here at Shyster & Son Brokerage, you'll see your investments <FONT SIZE="7">s</FONT><FONT SIZE="6">h</FONT><FONT SIZE="5">r</FONT> <FONT SIZE="4">i</FONT><FONT SIZE="3">n</FONT><FONT SIZE="2">k</FONT> while our commissions <FONT SIZE="4">g</FONT><FONT SIZE="5">r</FONT><FONT SIZE="6">o</FONT> <FONT SIZE="7">w!</FONT> </BODY> </HTML>
Figure 3.5 shows the results as they appear with Internet Explorer.
){kind=link}
Figure 3.5 Use the <FONT> tag to adjust the size of your web page text.
The <BASEFONT> Tag
I mentioned earlier that the standard font size in a web page is 3. This is called the base font, and you'll be interested to know that it's not set in stone. To change it, use the <BASEFONT> tag:
<BASEFONT SIZE="size">
Once again, size is a number between 1 and 7 that specifies the base font size you want. For example, if you enter <BASEFONT="7"> at the top of your document (that is, immediately after the <BODY> tag), then all the text will appear with font size 7.
You might be wondering what the heck's the big deal with <BASEFONT>. After all, couldn't you just insert a <FONT SIZE="7"> tag at the top of the document? Good point. (Gee, you are paying attention, aren't you?) The beauty (if beauty is the right term) of base fonts is that they enable you to set up relative font sizes. A relative font size is one that's so many sizes larger or smaller than the base font. Here's an example:
<BASEFONT="6"> This text is displayed in the base font size. However <FONT SIZE="-2">these three words</FONT> were displayed in a font size that's two sizes smaller than the base font.
The <FONT SIZE="-2"> tag tells the browser to display the text in a font size that's two sizes smaller than the base font (to get larger fonts, you'd use a plus sign (+), instead). Therefore, because I specified a base font of 6, the text between the <FONT> and </FONT> tags appears with a font size of 4.
Why not simply use <FONT SIZE="4">, instead? Well, suppose you plaster your document with dozens of font changes and then, when you display it in the browser, the fonts appear too small. If you're using explicit font sizes, you have to painstakingly adjust each <FONT> tag. However, if you're using relative font sizes, you only have to change the single <BASEFONT> tag.
The <FONT> Tag, Part II: Changing the Typeface
By default, the browser uses a plain typeface to render your pages. However, you can change that by shoehorning the FACE attribute into the <FONT> tag, like so:
<FONT FACE="typeface">
Here, typeface is the name of the typeface you want to use. The following page (it's typeface.htm on the website) shows a few FACE-enhanced <FONT> tags in action, and Figure 3.6 shows what Internet Explorer 6 thinks of the whole thing.
){kind=link}
<HTML> <HEAD> <TITLE>Changing the Typeface</TITLE> </HEAD> <BODY> <H1>The <FONT> Tag Can Also Do Different Typefaces</H1> <HR> <FONT SIZE="6"> This is the default browser typeface (Times New Roman).<BR> <FONT FACE="Arial">This is the Arial typeface.</FONT><BR> <FONT FACE="Courier New">This is the Courier New typeface.</FONT><BR> <FONT FACE="Comic Sans MS">This is the Comic Sans MS typeface.</FONT><BR> <FONT FACE="Whatever">Doh! This is NOT the Whatever typeface!</FONT> </FONT> <BODY> <HTML>
Figure 3.6 Use the <FONT> tag's FACE attribute to try different typefaces on for size.
Sounds easy, right? Not so fast, bucko. The problem with the FACE attribute is that it works only if the typeface you specify is installed on the user's computer. If it's not, you're out of luck because the browser will just use its default typeface. In the previous example, notice that the browser doesn't render anything for the Whatever typeface because it's not installed. (It doesn't even exist because I just made up the name!)
To increase your chances, however, you're allowed to add multiple typeface names to the FACE attribute:
<FONT FACE="Arial, Verdana, Helvetica">
If Arial's not installed, the browser will try Verdana, instead; if Verdana's not installed, the browser tries Helvetica; if that's a no go, the default typeface is used.
Webmaster Wisdom
Because you can change the color of your page's background, links, and text, it's very important that you choose a color combination that makes for easy reading. Light yellow text on white, or bright green text on red, can be a little hard on the eyes.
Some Notes About Working with Colors
The next couple of sections show you how to change text colors. You'll find that you often have to work with colors when constructing web pages, so it's probably a good idea to take a minute or two now and get the HTML color techniques down pat.
Most of the time, you specify a color by entering a six-digit code that takes the following form:
#rrggbb
This sure looks weird, but there's method in its mathematical madness. Here, rr is the red part of the color, gg is the green part, and bb is the blue part. In other words, each code represents a combination of the three primary colors, and it's this combination that produces the final color. These are called RGB values.
The truly nerdish aspect of all this is that each two-digit primary color code uses hexa- decimal numbers. These are base 16 (instead of the usual base 10 in decimal numbers), so they run from 0 through 9, then A through F. Yeah, my head hurts, too.
Table 3.4 lists the appropriate values for some common colors.
Table 3.4 RGB Codes for Common Colors
|
If You Use This Value |
You Get This Color |
|
#000000 |
Black |
|
#FFFFFF |
White |
|
#FF0000 |
Red |
|
#00FF00 |
Green |
|
#0000FF |
Blue |
|
#FF00FF |
Magenta |
|
#00FFFF |
Cyan |
|
#FFFF00 |
Yellow |
Rather than working with these bizarre RGB values, you might prefer to use the standard HTML color names, which are supported by Internet Explorer 3.0 and later, as well as Netscape Navigator 3.0 and later. These color names use nice English words such as "Blue" and "Tan" (as well as plenty of bizarre words such as "Bisque" and "Orchid"). A complete list of the color names, their corresponding RGB values, and a swatch that shows the color are available in the file x11color.htm on the website (see Figure 3.7 for a black-and-white version of that document).
){kind=link}
Figure 3.7 The colors, color names, and their RGB equivalents.
Changing the Color of Your Page Text
Browsers display your text in basic black, which is readable but not all that exciting. To put some color in your text's cheeks, let's look at a few extra goodies.
For starters, the <BODY> tag has a TEXT attribute:
<BODY TEXT="color">
Here, color is either a color name or an RGB value that specifies the color you want to use.
Changing the Color of Your Links
There are also ways to specify colors for the links you include in your page. Here's how they work:
<BODY LINK="color" VLINK="color" ALINK="color">
Use LINK to specify the color of new links (links the reader has never clicked before); use VLINK to set up a color for visited links (links the reader has clicked before); use ALINK to set up a color for active links. (An active link is a link you've clicked, but the other page hasn't showed up yet.)
The <FONT> Tag, Part III: Another Way to Change Text Color
The problem with these <BODY> tag attributes is that they affect the entire page. What if you only want to change the color of a heading, a word, a link, or even a single letter? For that you need to return to our old friend the <FONT> tag, which also supports a COLOR attribute:
<FONT COLOR="color">
Here's an example:
<FONT COLOR="#FF0000">This text is red.</FONT>
Page Pitfalls
The HTML elements I discussed in this chapter (and many of the ones I talk about in subsequent
chapters) can make a web page actually look worse if you misuse or overuse them. If you're interested in making your pages look their best, be sure to read Chapter 21, "The Elements of Web Page Style," where I discuss the do's and don'ts of web page design.
The Least You Need to Know
-
The basic styles. Use the <B> tag for bold text, <I> for italics, <U> for underlining, and <TT> for monospace.
-
Headings, galore. The heading tags run from <H1> (the largest) through <H6> (the smallest). Remember, too, that text between heading tags always appears in a separate paragraph.
-
Modifying tag behavior with attributes. Many tags can take one or more attributes that change the way the browser handles the tag. When specifying attributes, always surround the values with quotation marks.
-
Alignment options. To align your text, the <P> tag and the heading tags accept the ALIGN attribute, which can take any of three values: LEFT, CENTER, and RIGHT.
-
Other useful formatting tags. Use the <PRE> tag to force the browser to display white space; use <BR> to insert a line break; and use <HR> to insert a horizontal line.
-
The hard-working <FONT> tag. To format text, use the <FONT> tag's various attributes, including SIZE (to change the size of the text), FACE (to change the typeface), and COLOR (to change the color).
-
Doing your page's colors. You'll most often specify a color using the code #rrggbb, where rr is the red value, gg is the green value, and bb is the blue value. Each value is a hexadecimal number that runs from 00 to FF.