home Java Script MS Access Perl HTML Delphi C ++ Visual Basic Java CGIPerl MS Excel Front Page 98 Windows 98 Ms Word Builder PHP Assembler Link to us Links |
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.
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.
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
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.
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.
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.) |
<DIV ALIGN="center"><CENTER>This text will be centered in both old and new browsers.</CENTER></DIV>.