Hour 5

Text Formatting and Alignment

As you discovered in Chapter 2, "Creating a Web Page," making your Web page can be as easy as typing some text and adding a few standard HTML tags to the beginning and end. In that chapter, you learned how to emphasize important text with headings. You also saw how to use paragraph breaks, line breaks, and horizontal rules to separate sections of text.

In this chapter, you will learn to control the appearance and arrangement of text on your pages. You'll learn to incorporate boldface, italics, and other special text formatting into your pages. You'll also see how to center text or align it to the right side of the page.

To do these things, you'll need a few more HTML tags. You'll also need to learn how to control optional settings (called attributes) for some of the tags you already know. To Do: Before you proceed, you should get some text to work with so you can practice formatting it as you read this chapter.

Emphasizing Text with Boldface and Italics

Way back in the age of the typewriter, we were content with plain text and an occasional underline for emphasis. But today, boldface and italicized text have become "de rigueur" in all paper communication. Naturally, you can add bold and italic text to your Web pages, too.

For boldface text, put the <B> tag at the beginning of the text and </B> at the end. Similarly, you can make any text italic by enclosing it between <I> and </I>. If you want bold italics, put <B><I> in front of it and </I></B> after it. You can also use italics within headings, but boldface usually won't show in headings because they are already bold.

The news article in Figure 5.1 uses the <B> and <I> tags extensively, and Figure 5.2 shows the resulting text as it appears in Netscape Navigator.

Just A Minute: There are actually two ways to make text display as boldface; the <B> tag and the <STRONG> tag do the same thing in most Web browsers. Likewise, all popular browsers today interpret both <I> and <EM> as italics. Many purists prefer the <STRONG> and <EM> tags because they imply only that the text should receive special emphasis, rather than dictating exactly how that effect should be achieved. Meanwhile, the vast majority of Web authors use the shorter and easier-to-remember <B> and <I> tags. I'll use <B> and <I> throughout this book, but if you like to be philosophically pure, by all means use <STRONG> and <EM> instead.

Figure 5.1. Use the <B> tag for boldface text, and the <I> tag for italics.

Figure 5.2. The many <B> and <I> tags in Figure 5.1 certainly add plenty of emphasis to this Web page.

To Do: Use headings, boldface, and italics to emphasize some of the text on your own Web page.

1. Use <H1>, <H2>, and <H3> to add any headings and sub-headings your page may need. (End each heading with </H1>, </H2>, or </H3>.)

2. If any of the text on your page should be in boldface, mark the beginning of it with <B> and the end with </B>. Use <I> and </I> to mark text to be italicized.

Character Formatting

In addition to <B>, <I>, <EM>, and <STRONG>, there are several other HTML tags for adding special formatting to text. Table 5.1 summarizes all of them (including the boldface and italic tags), and Figures 5.3 and 5.4 demonstrate each of them in action.

Table 5.1. HTML tags that add special formatting to text.
Tag Function
<SMALL> Small text
<BIG> Big text
<SUPER> Superscript
<SUB> Subscript
<STRIKE> Strikethrough (draws a line through text)
<U> Underline
<TT> Monospaced (typewriter) font
<PRE> Monospaced font, preserving spaces and line breaks
<EM> or <I> Emphasized (italic) text
<STRONG> or <B> Strong (boldface) text

Just A Minute: Use the <U> tag sparingly, if at all. People expect underlined text to be a link, and may get confused if you underline text that isn't a link.

Figure 5.3. Each of the tags in Table 5.1 is used in this little poem.

Figure 5.4. Here's what all character formatting from Table 5.1 and Figure 5.3 looks like.

The <TT> tag usually changes the typeface to Courier New, a monospaced font. However, Web browsers let users change the monospaced <TT> font to the typeface of their choice (under Options | General Preferences | Fonts in Netscape Navigator 3.0 and View | Options | General | Font Settings in Microsoft Internet Explorer 3.0). The monospaced font may not even be monospaced for some users. However, the vast majority of people just stick with the standard fonts that their browser comes set up with, so you should design and test your pages with those default fonts, too. (The standard proportional font is usually Times New Roman, and the standard monospaced font is almost always Courier or Courier New.)

The <PRE> tag also causes text to appear in the monospaced font, but it also does something more unique and useful. As you learned in Chapter 2, multiple spaces and line breaks are normally ignored in HTML files. But <PRE> causes exact spacing and line breaks to be preserved. For example, without <PRE> the following text: 

Qty 	Description      	Price   	 Total  1  	Rubber chicken      $7.98  	 $7.98  2  	Vibrating fake hand    $14.97  	$29.94  12  	Plastic cockroaches     $0.25  	 $3.00                    		            --------                    			


$40.92

would look like this:

Qty Description Price Total 1 Rubber chicken $7.98 $7.98 2 Vibrating fake hand $14.97 $29.94 12 Plastic cockroaches $0.25 $3.00 --------$40.92

Even if you added <BR> tags at the end of every line, the columns wouldn't line up properly. However, if you put <PRE> at the beginning of the invoice and </PRE> at the end, the columns would line up properly, and no <BR> tags would be needed.

There are fancier ways to make columns of text line up, and you'll learn all about them in Chapter 16, "Advanced Layout with Tables." The <PRE> tag gives you a quick and easy way to preserve the alignment of any monospaced text files that you might want to transfer to a Web page with a minimum of effort.

Time Saver: You can use the <PRE> tag as a quick way to insert vertical space between paragraphs or graphics without having to use a "spacer" image. For example, to put several blank lines between the words "Up" and "Down", you could type: Up<PRE> </PRE>Down

Text Alignment

Some HTML tags allow you to specify a variety of options, or attributes, along with the basic tag itself. For example, when you begin a paragraph with the <P> tag, you can specify whether the text in that paragraph should be aligned to the left margin, right margin, or center of the page.

To align a paragraph to the right margin, you can put ALIGN="right" inside the <P> tag at the beginning of the paragraph, like this: 

<P ALIGN="right">

To center a paragraph, use: 

<P ALIGN="center">

Similarly, the tag to align a paragraph to the left is: 

<P ALIGN="left">

The word ALIGN is called an attribute of the <P> tag. You can use the ALIGN attribute with just about any HTML tag that contains text, including <H1>, <H2>, the other heading tags, and some tags you will meet later. There are many other attributes besides ALIGN. You will find out how to use them as you learn more HTML tags.

New Term: Attributes are special code words used inside an HTML tag to control exactly what the tag does.

Just a Minute: Keep in mind that sometimes the same attribute word can have different meanings when used with different tags. For instance, you will discover in Chapter 9, "Putting Images on a Web Page," that ALIGN="left" does something quite different when used with the <IMG> image tag than it does with the text tags discussed in this chapter.

When you want to set the alignment of more than one paragraph or heading at a time, you can use the ALIGN attribute with the <DIV>, or division, tag. By itself, <DIV> and its corresponding closing tag </DIV> actually don't do anything at all--which would seem to make it a peculiarly useless tag!

Yet if you include an ALIGN attribute, <DIV> becomes quite useful indeed. Everything you put between <DIV ALIGN="center"> and </DIV>, for example, will be centered. This may include lines of text, paragraphs, headings, images and all the other things that you'll learn how to put on Web pages in upcoming chapters. Likewise, <DIV ALIGN="right"> will right-align everything down to the next </DIV> tag.

Just a Minute: When you look at Web pages that other people have created, you may see <CENTER> and </CENTER> used to center text. The <CENTER> tag is officially obsolete, and it may not work with future Web browsers, so you should always use <DIV ALIGN="center"> and </DIV> instead.

Figure 5.5 demonstrates the ALIGN attribute with both the <P> and <DIV> tags. <DIV ALIGN= "center"> is used to center two headings and some text at the top of the page, and all three ALIGN options are used with <P> tags to alter the alignment of the verse. The results are shown in Figure 5.6.

Figure 5.5. The ALIGN attribute allows you to left-justify, right-justify, or center text.

Figure 5.6. The alignment settings in Figure 5.5, as they appear in a Web browser.

Time Saver: Whenever you don't use an ALIGN attribute, text will be aligned to the left. Therefore, there's usually no point in wasting your time typing ALIGN="left". For example, using <P> instead of <P ALIGN="left"> for the first paragraph in Figure 5.5 would have resulted in exactly the same Web page in Figure 5.6. One place where you would need ALIGN="left" is when you want to left-align a single heading or paragraph within a larger region that has been centered or right-justified with <DIV ALIGN="center"> or <DIV ALIGN= "right">. For example, if you changed the <H2> tag in Figure 5.5 to <H2 ALIGN= "left">, Tommy Thumb's Pretty Song Book would be left-aligned while Selections from and Published in 1744 would both still be centered.
Coffee Break: To see how centering and text formatting can improve the look of a page, compare the new 24-Hour HTML Café home page to the older versions introduced in previous chapters. The new page is: http://www.mcp.com/sams/books/235-8/cafe5.htm

Summary

This chapter showed you how to make text appear as boldface, italic, or with other special formatting, such as superscripts, subscripts, or strikethrough text. You saw how to make everything line up properly in preformatted passages of monospaced text.

Finally, you learned that attributes are used to specify options and special behavior of many HTML tags, and you also learned to use the ALIGN attribute to center or right-justify text.

Table 5.2 summarizes the tags and attributes discussed in this chapter.

Table 5.2. HTML tags and attributes covered in Chapter 5.
Tag Attribute Function
<EM>...</EM> Emphasis (usually italic).
<STRONG>...</STRONG> Stronger emphasis (usually bold).
<B>...</B> Boldface text.
<I>...</I> Italic text.
<TT>...</TT> Typewriter (monospaced) font.
<PRE>...</PRE> Preformatted text (exact line endings and spacing will be preserved--usually rendered in a monospaced font).
<BIG>...</BIG> Text is slightly larger than normal.
<SMALL>...</SMALL> Text is slightly smaller than normal.
<SUB>...</SUB> Subscript.
<SUP>...</SUP> Superscript.
<STRIKE>...</STRIKE> Puts a strikethrough line in text.
<DIV>...</DIV> A region of text to be formatted.
ALIGN="..." Align text to CENTER, LEFT, or RIGHT. (May also be used with <P>, <H1>, <H2>, <H3>, and so on.)

Q&A

Q Other books talk about some text formatting tags that you didn't cover in this chapter, such as <CODE> and <ADDRESS>. Shouldn't I know about them?

A There are a number of tags in HTML to indicate what kind of information is contained in some text. The <ADDRESS> tag, for example, was supposed to be put around addresses. The only visible effect of <ADDRESS> in most browsers, however, is that the text is made italic. So Web page authors today usually just use the <I> tag instead. Similarly, <CODE> and <KBD> do essentially the same thing as <TT>. You may also read about <VAR>, <SAMP>, or <DFN> in some older HTML references, but nobody uses them in ordinary Web pages.

Q Some HTML pages I've seen use ALIGN=CENTER or ALIGN=center instead of ALIGN="center". Which is correct?

A As with tags, it generally makes no difference whether attributes are in lowercase or uppercase. It also usually doesn't matter if you include the quotes around attribute values like center. The only time you really do need the quotes is when the value contains a blank space or a character that has special meaning in HTML. In this book, I always include the quotes so that neither I nor you need to worry about when they're needed and when they're not.

Q You mentioned that <DIV ALIGN="center"> is a new tag that replaces the old <CENTER> tag. Won't my pages be incompatible with older Web browsers if I use the new tag?

A Yes, but in practice the only incompatibility will be that some text appears left-aligned instead of centered. If this deeply concerns you, you can use both the old and new tags, like this: 
<DIV ALIGN="center"><CENTER>This text will be centered in both old and 

new browsers.</CENTER></DIV>.

Quiz Questions

1. Write the HTML to produce the following:
Come for cheap free H2O on May 7th at 9:00PM

2. What's the difference between the following two lines of HTML?
Deep <TT>S p a a c e</TT> Quest
Deep <PRE>S p a a c e</PRE> Quest

3. What's the easiest way to center a single paragraph or heading?

4. How would you center everything on an entire page?

Answers

1. Come for <STRIKE>cheap</STRIKE> free H<SUB>2</SUB>O on May 7<SUPER><U>th</U></SUPER> at 9:00<SMALL>PM</SMALL>

2. The line using <TT> will look like this:
Deep S p a a c e Quest
The line using <PRE> will produce the following lines of text on the Web page (<PRE> always skips a line before and after the preformatted text):
Deep
S p a a c e
Quest

3. Start it with <P ALIGN="center"> (or <H1 ALIGN="center">, and so on).
4. Put <DIV ALIGN="center"> immediately after the <BODY> tag at the top of the page, and </DIV> just before the </BODY> tag at the end of the page.

Activities