by Eric Ladd
Most HTML tags are meant to be used in the document body-that is, between the <BODY> and </BODY> container tags. The next four chapters take you through the many tags that are used to mark up body content. This chapter focuses on the basics of text formatting, including:
The <BODY> tag is much more than just the element
that marks the beginning of the document body. <BODY>
takes any or all of the attributes shown in Table 5.1. Note how
these attributes allow you to specify many global characteristics
of the page, including background and text colors.
| Attribute | Function |
| BACKGROUND | Provides the URL of the image used as the document background |
| BGCOLOR | Sets the document background color |
| TEXT | Colors the body text |
| LINK | Colors unvisited hypertext links |
| VLINK | Colors visited hypertext links |
| ALINK | Colors active hypertext links |
As you can see from the table, you receive much control over colors. Specifying colors in HTML can be a tricky business, however, so a short tutorial follows to help you learn how to use the <BODY> tag attributes.
Computer monitors produce color on the screen by using varying amounts of the primary colors: red, green, and blue. When you specify a color in an HTML document, you need to tell the browser how much of each color to use.
Colors are quantified on computers by using values between 0 and 255. For example, if you specify a 0 contribution from red, there will be no red. A contribution of 255 is the strongest contribution from red. You can vary the contribution between these two extremes by choosing different values between 0 and 255. By combining various contributions from red, green, and blue, you can produce up to 256 distinct colors.
You may be wondering where you get these numerical values for the red, green, and blue contributions. You can work with your digital graphic artist to identify an appropriate color and then use a graphics program, such as Photoshop, to determine the values. Another source is Netscape Navigator's Color dialog box, shown in Figure 5.1. To call up this dialog box, first choose Options, General Preferences to call up the Preferences dialog box. Next, click the Colors tab, and then click one of the Choose Color buttons you see on the right. This opens a smaller version of the Color dialog box you see in Figure 5.1. To reveal the expanded version, click the button labeled Define Custom Colors.
Once you're in the dialog box, click some different colors in
the palette on the right. As you do, notice how the values change
in the Red, Green, and Blue fields at the bottom right. Once you
find the color you want to use, look at these fields to get the
different numerical values.
| Three Other Color Values: Hue, Saturation, and Luminance |
You may have noticed the three other numerical values next to the Red, Green, and Blue values in Figure 5.1. These are the values for Hue, Saturation, and Luminance. Each is related to how a color looks on screen, but they don't account for the contributions of individual colors like RGB values do. Hue is a measure of which color-red, green, or blue- is the "dominant" color in the image. Increasing the hue is like moving horizontally across the color spectrum that you see in the figure. Lower hue values are associated with oranges and yellows; higher values are associated with purples and reds. Saturation refers to how much color is in the image. A saturation of zero means "no color" or gray. Increasing the saturation from zero increases the amount of color in the image. This is equivalent to starting at the bottom of the color spectrum in the figure and moving up it vertically. Luminance measures an image's tendency toward white. A maximum luminance value (255) makes the color white; a zero luminance value makes the color black. Varying the luminance is the same as moving the slider bar to the right of the color spectrum up and down (black is at the bottom and white is at the top). |
But, you're not done yet. People are usually daunted when specifying colors in HTML because the numerical red, green, and blue values need to be converted from base 10 (decimal) numbers to base 16 (hexadecimal) numbers. Doing this by hand is certainly a chore, but there are utility programs to help you with this conversion. Figure 5.2 shows the Windows Calculator running in Scientific mode. To convert a decimal number to hexadecimal, type the decimal number into the calculator and click the radio button labeled "Hex." The corresponding hexadecimal number appears on the calculator display.
| TIP |
Macintosh users can use the built-in utility program hexdec to do the decimal to hexadecimal conversion. |
There are other ways to calculate your hexadecimal RGB values. One way is to visit sites on the Web that have programs which calculate them for you. Some of these include http://mosaic.echonyc.com/ ~xixax/Mediarama/hex.html, http://www.hidaho.com/c3/, or http://www.biola.edu/cgi-bin/colorpro/colorpro.html. Additionally, some HTML editing programs have dialog boxes that let you select a color, and the program computes the RGB values for you.
The last step in expressing a color in HTML is to take the hexadecimal red, green, and blue values and string them together into an RGB hexadecimal triplet. Suppose the color you want has decimal values of 150 red, 78 green, and 227 blue. Converting these to hexadecimal results in 96 red, 4E green, and E3 blue. To form the RGB triplet, you simply append the three hexadecimal values together in red, green, and blue order:
964EE3
Color-related attributes of the <BODY> tag are
set equal to RGB hexadecimal triplets like the one above.
| TIP |
If you ever forget the order of color values in the RGB triplet, just remember the name. RGB stands for "Red|Green|Blue" and also represents the order that colors go in. |
There are exceptions to the rule of colors being expressed as
RGB hexadecimal triplets-16 of them, to be exact. One new feature
of HTML 3.2, which has resulted in many thankful authors, is the
introduction of 16 English language color names that can be used
in place of the hexadecimal triplets. These sixteen colors, summarized
in Table 5.2, were chosen because they are the sixteen standard
colors that comprise the Windows VGA palette.
| Color Name | Color Name |
| Aqua | Navy |
| Black | Olive |
| Blue | Purple |
| Fuchsia | Red |
| Gray | Silver |
| Green | Teal |
| Lime | White |
| Maroon | Yellow |
| NOTE |
In spite of RGB color values being absolute, it's possible for users to see colors differently. The same color may look slightly different in two different browsers because of the algorithms each browser uses to paint the screen. It's also important to remember that the user also has some control over color. Netscape Navigator allows users to change color schemes in their browser preferences. Users can even override color choices made by the Web page author! One other way users might see colors differently is dependent on whether they have dithering enabled. Dithering is a process that uses colors in an existing palette to simulate colors that aren't in the palette. Because dithering can supply only approximations to desired colors, the on-screen results can often look terrible. |
Beyond the 16 colors with English language names, there are a
myriad of other colors you can generate with RGB hexadecimal triplets.
To help you color your pages, consult Table 5.3, which lists a
number of popular colors and their RGB hexadecimal equivalents.
| Color Name | |
| Bright Gold | |
| Copper | |
| Coral | |
| Dusty Rose | |
| Forest Green | |
| Khaki | |
| Midnight Blue | |
| Neon Pink | |
| Salmon | |
| Tan |
You have two options when choosing a background for your page. You can set it to a solid color or you can load in an image that tiles to fill the background.
Colors The BGCOLOR attribute of the <BODY> tag changes the browser's default background color-usually a shade of gray-to whatever color you specify. An ardent fan of the San JosŽ Sharks, whose away uniforms are the color teal, might set the background color on his or her Web page to teal with the tag:
<BODY BGCOLOR="teal">
| NOTE |
If you want to use a color that does not have an English language name, you'll have to find out its RGB hexadecimal triplet and set the BGCOLOR attribute accordingly: <BODY BGCOLOR="DF0A82"> |
Images You can also use the BACKGROUND attribute to read in an image for your document background (see Figure 5.3). BACKGROUND is set equal to the URL of the image file:
<BODY BACKGROUND="images/backgrnd.gif">
Your entire browser screen fills horizontally and vertically if
the image you use isn't big enough. For this reason, you'll want
to tessellate your background image in a program like Photoshop.
Tessellating allows the tiled images to come together seamlessly
so that the background looks like one continuous image.
| TIP |
For an interesting selection of downloadable background images, direct your browser to http://www.visi.com/~drozone/imagesindex.html. |
Using Colors and Images Together BGCOLOR and BACKGROUND are not mutually exclusive options. If you use both in the same <BODY> tag, the BGCOLOR renders immediately. The BACKGROUND image then displays once it's read in and tiled.
You can use this behavior to your advantage when creating Web pages. Suppose you have a starfield background image that you want to use on a page. The starfield is mostly black, except for some white stars on it. Because the background image is predominantly black, you could set the BGCOLOR to black as well:
<BODY BGCOLOR="black" BACKGROUND="images/starfield.gif">
This way, the screen immediately goes black when a user hits the page, followed by the white stars on a black background once the image loads. This reduces the harshness of the transition on the user's eyes-it's a much smoother transition from black to the starfield than it is from gray to the starfield. Additionally, if the background image fails to load, the background has a color that's at least close to what you intended.
The TEXT attribute of the <BODY> tag changes
the body text color from its default value (usually black). Like
BGCOLOR, TEXT can be set equal to an English
language color name or an RGB hexadecimal triplet.
| CAUTION |
When you start adjusting text and background colors, make sure you put some thought into the colors you choose. There should be sufficient contrast between the background and text colors so that the text stands out well. A good rule of thumb is dark text and a light background. |
Hypertext links come in three varieties:
You can control the color of unvisited, visited, and active links by using the LINK, VLINK, and ALINK attributes of the <BODY> tag, respectively. Just as with the other color-related attributes, LINK, VLINK, and ALINK can be set equal to an English language color name or an RGB hexadecimal triplet.
Accounting for every bit of formatting on the browser screen is one of the hardest lessons for a beginning HTML author to learn. Just because you have a line or paragraph break in the file with the HTML code doesn't mean that the browser creates a similar break when rendering your information on screen. Recall that browsers ignore extra white space such as carriage returns.
This next section reviews the different types of breaks available to you: paragraph, line, and document division. These basic formatting options prevent your content from presenting in one big, run-on chunk.
The <P> and </P> tags are used to contain a paragraph. When a browser encounters a <P> tag, it breaks to a new line, skipping some space between the previous line and the new line (see Figures. 5.4 and 5.5). The <P> tag will not indent the first word in the new paragraph.
Figure 5.4 : A <P> tag is needed to create breaks between paragraphs.
Figure 5.5 : A paragraph break is made up of a blank line, but no indenting.
HTML 3.2 allows the <P> tag to take the ALIGN attribute. ALIGN can be set to LEFT, RIGHT, or CENTER, and controls how the text in the paragraph is aligned on screen. By default, paragraph text is left-aligned (or left-justified). You can switch this to centered or right-justified text by setting ALIGN to CENTER or RIGHT. The alignment you specify will be in effect until you encounter the </P> tag.
Use the <BR> tag if you need to break a line without skipping some space. <BR> is a stand-alone tag that simply jumps to the start of the next line. This is useful when rendering mailing addresses, song lyrics, or poetry. For example,
Happy birthday to you!<BR> Happy birthday to you!<BR> Happy birthday, dear Anthony!<BR> Happy birthday to you!
would be rendered as shown in Figure 5.6.
Figure 5.6 : Without <BR> tags, all of the lines of this song would be on one line!
| NOTE |
Browsers ignore multiple consecutive <P> tags, but they will recognize multiple consecutive <BR> tags. |
The <DIV> container tag was introduced as part of HTML 3.2 to contain the different logical divisions-such as chapters, appendixes, and bibliographies-within a document. When it was introduced, however, the <DIV> tag was allowed to take only the ALIGN attribute. Just as with the <P> tag, ALIGN can be set to LEFT, CENTER, or RIGHT.
W3C plans to expand the list of attributes that <DIV>
takes to make it a more useful tag. The proposed attributes and
their functions are shown in Table 5.4.
| Attribute | Function |
| CLASS | Denotes the type of document division being marked up (chapter, appendix, and so on) |
| NOWRAP | Turns off auto-wrapping within the division; line breaks are explicitly placed with <BR> tags |
| CLEAR=LEFT|RIGHT|ALL | Starts the division with empty left, right, or both margin(s) |
Once you have your page broken up into blocks (paragraphs or divisions), you can use other HTML formatting to further define the page's structure. In particular, the HTML heading styles and horizontal rules provide ways to break up blocks of text into logical sections.
HTML supports six different heading styles: H1 is the largest and H6 is the smallest. The heading style tags are container tags of the form <Hn>, where n is the heading level you want to use. The six styles are shown in Figure 5.7 as they appear in the Internet Explorer 3 browser window. The corresponding HTML is
<H6>Heading Style 6</H6> <H5>Heading Style 5</H5> <H4>Heading Style 4</H4> <H3>Heading Style 3</H3> <H2>Heading Style 2</H2> <H1>Heading Style 1</H1>
You can see in the figure that all of the heading styles appear in boldface. The size of the heading depends on the level you choose. Browsers typically leave a little white space above and below the heading to separate it from the surrounding text. This may not, however, be apparent in this figure.
All of the opening heading tags take the ALIGN attribute. By setting ALIGN to LEFT, CENTER, or RIGHT, a heading can appear left-justified, centered, or right-justified.
The <HR> tag places a horizontal line (or rule) on a Web page (see Figure 5.8). By default, the rule is the full width of the screen (with a few pixels of white space at each end), one point in size, and has a shading effect behind it to give it a three-dimensional appearance.
Figure 5.8 : Horizontal rule is another good way to separate sections within the same document.
Several new attributes of the <HR> tag were introduced
as part of HTML 3.2. These attributes are summarized in Table
5.5. The ALIGN attribute became necessary once it was
possible to have WIDTHs less than the screen width. By
default, horizontal rule is aligned in the center of the screen.
WIDTH can be set to a fixed number of pixels or to a
percentage of the available screen width.
| Attribute | Function |
| ALIGN=LEFT|CENTER|RIGHT | Aligns the rule on the browser screen |
| NOSHADE | Suppresses the default shading effect |
| SIZE=n | Changes the size of the rule to n |
| WIDTH=pixel|percent | Sets the width of the rule |
| TIP |
Because you can't know the exact width of every user's screen, you should specify rule width as a percentage whenever you can. To be on the safe side, you can always specify a WIDTH of 100%. |
The formatting you've learned so far is all at the block level. HTML also supports text level formatting-the formatting of text within a block. The simplest formatting involves use of HTML's physical and logical styles.
The physical styles modify typographical attributes of the text
you see on screen. HTML 3.2 introduced several new physical styles,
yielding the list found in Table 5.6. Each of the tags shown in
Table 5.6 is a container tag; closing tags are left off in the
interest of space.
| Tag | Effect |
| <B> | Boldface |
| <BIG> | Renders text in a large font |
| <I> | Italics |
| <SMALL> | Renders text in a small font |
| <STRIKE> | Strikethrough text |
| <SUB> | Subscript |
| <SUP> | Superscript |
| <TT> | Typewriter text (fixed-width font) |
Physical styles can be nested to combine their effects. For example, to produce an italicized superscript, you would use
x<SUP><I>2</I></SUP>
| NOTE |
Previous versions of the HTML standard permitted the <U> container tag for underlining. Because most browsers use underlining to indicate hypertext, the underlining style has fallen out of favor and has been eliminated from the standard. |
The HTML logical style elements are container tags that indicate
the meaning of the text they contain in the context of the document.
The logical styles available under HTML 3.2 are summarized in
Table 5.7. All logical style tags are container tags; closing
tags are left out of the table to save space. The renderings given
in the table are typical-actual renderings may vary from browser
to browser.
| Style Name | Tag | Typical Rendering |
| Citation | <CITE> | Italics |
| Code | <CODE> | Fixed-width font |
| Definition | <DFN> | Bold or bold italics |
| Emphasis | <EM> | Italics |
| Keyboard input | <KBD> | Fixed-width font |
| Sample text | <SAMP> | Fixed-width font |
| Strong emphasis | <STRONG> | Bold |
| Variable | <VAR> | Italics |
Figure 5.9 shows a page marked up with several logical styles, with the corresponding HTML shown in Figure 5.10.
| NOTE |
While some browsers allow it, nesting logical styles often does not make sense. For example, you would never use strong emphasis inside some computer codes because code doesn't carry meanings that require emphasis. |
| Physical and Logical Styles: Which Should I Use? |
As you look at the renderings in Figure 5.9, you might wonder why anyone would bother using the logical style tags to achieve effects that could have been done just as easily with physical style tags. After all, it's easier to type <B>strongly emphasized text</B> than it is to type <STRONG>strongly emphasized text</STRONG>. The choice depends on what you want to accomplish in your markup. If you're just looking for on-screen effect, stick with the physical styles. If indicating the meaning of the text you mark up is important, use the logical styles. |
Beyond the physical and logical styles, HTML supports many other effects that can be applied at the text level. These include
The next several sections discuss the tags that provide these features.
When Netscape introduced the <CENTER> container tag as an HTML extension, the tag was criticized for not providing a general enough solution to centering items on the page. In spite of this, the <CENTER> tag was adopted as part of HTML 3.2, though the 3.2 standard encourages the use of an ALIGN attribute in a <P> or <DIV> tag to center text.
The <CENTER> and </CENTER> tags do provide a fairly general centering solution in that they center everything found between them-text, lists, images, rules, tables, form fields, or any other page element.
The <FONT> container tag was adopted as part of the HTML 3.2 standard to give authors control over the size and color of individual characters. The SIZE attribute of the <FONT> tag modifies the font size in use and the COLOR attribute controls the font color.
SIZE can be used in one of two ways. You can set SIZE equal to a value between 1 and 7, where 1 is the smallest size. The default font size is 3, so changing to a size less than 3 makes text smaller and changing to a size greater than 3 makes text larger. The other way you can use SIZE is to set it equal to the amount of change you want, relative to the current font size. To change to a size two sizes smaller than the current size, for example, use
<FONT SIZE=-2>smaller text</FONT>
Similarly, to change to a size one size bigger than the current size, use
<FONT SIZE=+1>bigger text</FONT>
A popular effect is to create "small caps" with the SIZE attribute. Netscape uses small caps extensively on its Web site (see Figure 5.11). To make the first letter of a word bigger than the rest, you can use the following HTML:
<FONT SIZE=+2>N</FONT>ETSCAPE
The COLOR attribute changes the color of the text contained by the <FONT> and </FONT> tags from either the default text color or the text color specified in the TEXT attribute of the <BODY> tag. COLOR can be set equal to an English language color name or a hexadecimal triplet. This is useful in drawing attention to a particular word in a sentence
<FONT COLOR="red">WARNING!</FONT> The document you have selected is not secure.
| NOTE |
The effects of a SIZE or COLOR attribute last until the </FONT> tag is encountered. After that, sizes and colors return to what they were before the <FONT> tag was encountered. |
Postal and e-mail addresses appear frequently on Web pages. By marking them with the <ADDRESS> container tag, you make it easier for robots or people viewing the HTML source code to get contact information-particularly contact information for the document author. For example, if you were maintaining a corporate site, you might have the following at the bottom of each of your pages:
To provide feedback on this page, send e-mail to <ADDRESS>webmaster@yourfirm.com</ADDRESS>.
Text marked up by the <ADDRESS> tag is typically rendered in italics.
When quoting a passage directly from another source, you can mark it up with the <BLOCKQUOTE> container tag to render it with indented margins (see Figure 5.12). If needed, you can nest <BLOCKQUOTE> tags to produce greater levels of indentation.
Figure 5.12 : <BLOCKQUOTE> creates an indented left and right margin for quoted material.
Some HTML authors have used the <BLOCKQUOTE> tag for entire pages to increase left and right indentation throughout the document (see Figure 5.13). While this is a valid approach to increasing indentation, the advent of HTML style sheets promises to make indenting much easier in the future (see Chapter 14, "HTML Style Sheets").
Text enclosed between the <PRE> and </PRE> tags is treated as preformatted text. This means that extra white space characters-such as tabs, carriage returns, and spaces-will not be ignored. Instead, the text renders in a fixed-width font and with the same layout as found in the source code.
This behavior made preformatted text a favorite early approach for putting tables in HTML documents. It is a simple matter to get text to line up in columns to form a table because characters and every space in a fixed-width font has the same width. For example, the HTML
<PRE> Flight Destination Departing Status 311 Albany, NY 11:15 am On-time 1718 San Jose, CA 11:58 am On-time 3217 Dallas, TX 12:25 pm Delayed </PRE>
produces the screen you see in Figure 5.14. Notice how line breaks and all of the spacing between table entries are preserved.
In Chapter 3 "Building Blocks of HTML," you learned
that HTML has several entities that it uses to reproduce reserved
and special characters on screen. Table 5.8 lists the reserved
and special characters along with their respective entities. Recall
that all entities begin with an ampersand and end with a semicolon.
| Character | Entity |
| Ampersand (&) | & |
| Copyright symbol (©) | © |
| Greater than sign (>) | > |
| Less than sign (<) | < |
| Quotation marks (") | " |
| Registered trademark (¨) | ® |
Because HTML uses the ISO-Latin1 character set, it supports reproduction of characters with diacritical marks such as accents and tildes. Chapter 3introduced you to the entities (summarized in Table 3.6) that can be used to produce Web pages in languages other than English.
One final entity that can be particularly useful in text formatting is the non-breaking space ( ). A non-breaking space goes between two words that you don't want separated by a line break. You can also use non-breaking spaces to force extra spaces where you need them.
Commenting your HTML code serves the same purpose as commenting any other type of computer code. It allows someone else to look at your work and have an idea what you were doing. Commenting HTML documents is an invaluable practice in a setting where there is more than one author working on the same document.
HTML comments are enclosed between the <!-- and --> constructs. Because tags need to begin and end with < and >, the comment construct (having the added exclamation point) isn't considered a tag since it begins with <!-- and ends with -->.
Anything between these two constructs is ignored by the browser, but people looking at your HTML code will see what's between them.
Comments are frequently found at the top of a document to indicate the original author's name, when the document was written, and, possibly, the program used to author the document. Figure 5.15 shows a dialog box from the HTML authoring program HTMLEd Pro. The dialog box pops up whenever you start a new document. Once you've entered the requested information, the program creates the file you see in Figure 5.16. Notice that the new file contains all of the necessary document structure tags and that the information you entered into the dialog box is included in comments.
Figure 5.15 : When starting a new document, HTMLEd Pro polls you for document-related information.
Figure 5.16 : The information you enter is used to construct comments at the top of the new file.
| NOTE |
The <!-- and --> comment constructs are also used to achieve server-side includes (SSIs). These are instructions to the server that it executes when serving the HTML page to a browser. For more information on SSIs, consult Chapter 33, "Server-Side Includes." |