Section 9 . Add and Format Text | Sams Teach Yourself Creating Web Pages All in One

9 . Add and Format Text

BEFORE YOU BEGIN

2 Use HTML Tags

7 Set Up a Web Page's Basic HTML Structure

SEE ALSO

6 About Proper HTML Coding

In the last task, 8 Add a Title and Head , we finished coding the head, but the head doesn't have a great deal of information that's going to be displayedin fact, the only thing displayed from the head is the title, and it will be displayed in the title bar of the browser. So it's time to get to work filling your page with content.

The content will go in the body of your pagein other words, between the <BODY> and </BODY> tags.

1.	Create Headings The first thing you should do is organize your page into headingsthe major points that you want to make, or the main information you want to present. You can organize the page into major headings, and then several levels of minor headings beneath each major heading. HTML allows for six levels of headings in all. Start with the major headings, and if those need to be subdivided, put minor headings beneath them. You can then further subdivide minor headings, and so on. To create a heading, use the heading tag, which requires an opening and closing tag, like this: <H1>Anna Karenina Was Tolstoy's Greatest Novel</H1> To change the size of the heading, change the number next to the H . The number 1 is the largest- sized heading, and the number 6 is the smallest heading. Make sure that when you close the tag, you include the number of the heading as wellin other words, use the tag </H1> , not </H> when closing an <H1> heading. Here are the sizes of six headings: H1 24 point H2 18 point H3 14 point H4 12 point H5 10 point H6 8 point (9 point on the Macintosh) 9. Add and Format Text. TIP It's best to keep your web pages short. People tend not to spend a great deal of time on any single web page; they get antsy and click away. Long pages also take a long time to load. So keep individual pages simple and to the point. Try not to have more than three major headings on a single page. If you have more than that, look at the content you're presenting, and try to break it up into more than one page. You also have control over how the heading sits on the pagealigned left, aligned right, or centered. To do that, use the ALIGN attribute. Here's how to center the heading: <H1 ALIGN="Center">Anna Karenina: Tolstoy's Greatest Novel</H1> To align the heading to the left, type Left as the value, and to align it to the right, type Right as the value.
2.	Add Paragraph Text Now it's time to put some text on the page. Inline, underneath the heading, type in text. Note after you use the <H> and </H> tags, you don't need to use the paragraph tag to start a new paragraph. The <H> tag pair includes a line return, as do several other tags. When you're done with your first paragraph, end it with the </P> tag. HTML doesn't absolutely require that you do this, oddly enough, but it's a good idea to get used to doing it. To start a new paragraph, type in <P> . Type in the text. Keep adding as many paragraphs as you want that way.
3.	Format Paragraph Text We now have a reasonable enoughlooking page. But the text in the paragraph could use some help, by changing colors and fonts, and using boldface and italic. NOTE There's a text-handling tag that lives in infamy, and may well be the most reviled tag ever inventedthe highly annoying BLINK tag. Surround text with <BLINK> and </BLINK> and your text will blink in maddening fashion. Don't ever use it; you'll only chase people away. Internet Explorer doesn't recognize the tag anyway; it will only make text blink when viewed with Netscape Navigator. You add emphasis to text by making it boldfaced or italicizing it. To italicize text, surround text with the <I> and </I> tags, like this: <I>War and Peace</I> To make text bold, surround it with the <B> and </B> tags, like this: <B>Richard Pevear and Larissa Volokhonsky</B> You can also nest the <B> and <I> tags, to make text bold italic, like this: <B><I>Anna Karenina</I></B> If you're nesting the tags, make sure that you close off the innermost one before closing the outermost one. In other words, close the most recent tag you've created before closing off earlier tags. (For more details, see 3 About Empty Tags and Nesting .) You can use the italic tag with headings, not just for text. So if you want to italicize words in a heading, it will look like this: <H1 ALIGN=Center><I>Anna Karenina</I>: Tolstoy's Greatest Novel</H1> Don't bother to try to use the <B> tag with a heading, though. By default, heading tags are boldfaced already.
4.	Change the Font There will be times when you want to change the font on your page, and to do that, you use the font tag <FONT> and </FONT> . It lets you change the font of the text, but goes beyond that: With it, you can also change the size of the text and the color of the font, among other things. To change the font, use the attribute FACE along with the <FONT> tag, like this. (For more details about using attributes and values, see 4 Use Attributes and Values .) <FONT FACE="Verdana">While some may prefer</FONT> That will change the text to the Verdana font. There's a problem using the font tag to specify a particular font, though. The browser will only display the text in that font if the PC doing the browsing has that specific font installed. If the font isn't installed, the font won't be changedit will stay as the Times New Roman font that a browser normally displays. To get around the problem, you can use several fonts as values, separated by spaces and commas. The browser will try to use the first font, but if it isn't installed, it will instead use the second font, and so on. If none of the fonts are on the system, the browser will use Times New Roman. Here's how to specify several fonts: <FONT FACE="Verdana, Arial">While some may prefer</FONT> You can also change the font size, using the SIZE attribute, and a number between 1 and 7, like this: <FONT SIZE="4">While some may prefer</FONT> The default size for a font is 3 , so if you use a number below 3, you'll be making the text smaller, and if you use a number above 3, you'll be making the text larger. To change the color of text, you use the COLOR attribute. There are two types of values you can use along with this attribute in order to specify a color. You can type in the names of any of 16 common colors, such as red, blue, and so on. Or else you can specify the color using hexadecimal code. This gives you greater control over the precise color, but is a bit harder to do. For our purposes, for this chapter, we'll go with typing in a color name . Here's how you do it: <FONT COLOR="blue">While some may prefer</FONT> All of these attributes can be used at once to specify the font, size, and color, like this: <FONT FACE="Verdana, Arial" SIZE="4" COLOR="blue">While some may prefer</FONT> The resulting text will be in the Verdana font, will be blue, and will be larger than normal text. KEY TERM Hexadecimal A numbering system that uses 16 unique symbols, the numbers 0 through 9, and the letters A through F. These symbols are used individually, or combined. So, for example, the number 15 is represented in the decimal system by F.
5.	Use the BASEFONT Tag If you want to change all the text on your web page to a specific font, you can use the BASEFONT tag. It's an empty tag, which means that it doesn't use a closing tag. The BASEFONT tag uses the same attributes and values as does the FONT tag. So putting the following tag at the beginning of the body of your document will force all text to be in the Verdana font, blue, and larger than normal. <BASEFONT FACE="Verdana, Arial" SIZE="12" COLOR="blue">
6.	View the Page If you haven't already saved the page, save it now. View it in your browser. Look for any errors, such as the font being the wrong type or size.