Enterprise Software

Add text to your Web page

If you're just beginning to learn HTML, you may need not know how to add text to a Web page. Here's some information that will help you do just that.

By Fred Dekker and Donald St. John

It's time to say something on our page. You've already set the basic colors of your text using the attributes of the <BODY> tag, but now you can start adding the words that will appear in your page. We'll start with a headline. Let's say the company's motto is, "E-Z Accounting: Tax Services That Aren't Too Taxing." Go ahead and add it to the page beneath the <BODY> tag:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#33FFFF" VLINK="#330066" ALINK="#330066">
E-Z Accounting: Tax Services That Aren't Too Taxing
</BODY>

Kind of dull, eh? It's just plain text with nothing to call attention to it. You could use specific tags to make it bold or italic and bump the size up, but what you really want are header tags, which do all that for you. Header tags range from <H1> to <H6>, with <H1> the largest and <H6> the smallest. Let's see what adding header tags does. Delete the colon in your headline and surround the text with <H1> and <H2> tags, like this:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#33FFFF" VLINK="#330066" ALINK="#330066">
<H1>E-Z Accounting</H1>
<H2>Tax Services That Aren't Too Taxing</H2>
</BODY>

That's better. Notice that the headers automatically break the line for you. Notice, too, that each line is automatically aligned to the left. Wouldn't these lines look better centered? Add the <CENTER> tag:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#33FFFF" VLINK="#330066" ALINK="#330066">
<CENTER>
<H1>E-Z Accounting</H1>
<H2>Tax Services That Aren't Too Taxing</H2>
</CENTER>
</BODY>

Now we're getting somewhere.

Let's tell the viewer more. Under the </CENTER> tag, let's type in:

Are you a freelance Web designer looking for a good accountant—one who's up on all the latest changes in the tax laws? Try E-Z Accounting. You'll get top-notch service from an honest accountant who's inexpensive, knowledgeable, and—best of all—knows the Internet and the type of work you do.

Ready to save some money? Let E-Z Accounting tell you more about our services, fees, and background.

Save and view the file in your browser. (Selecting File/Open or File/Open Page in most browsers will prompt you to enter the location of your saved file.) Depending on your browser, you'll notice one of two things: either the text continues beyond the right side of the page and off into cyberspace, or it fills the entire width of the page no matter how wide or narrow you make the browser window. (The former happened more frequently in older browsers; with modern browsers the text will most likely just wrap.) Even if you type hard line returns when you enter the text, HTML doesn't recognize them. (Note that in our example, the two paragraphs have merged into one.) If you want to take back control of your text, you need a couple more tags: <BR> and <P>.

<BR> forces a line break without adding any white space after the tag. This tag is a good choice for creating line breaks inside paragraphs. Keep in mind, though, that manually broken lines often look awkward when a viewer's browser window is sized narrower than usual: the text runs across the screen, wraps to the next line, and then breaks again a few words later. For that reason, stick to using <BR> only when you need to force a line break for reasons of design or content.

The <P> tag breaks the text and inserts a blank line, which is useful for separating paragraphs from each other. By default, both the <BR> and the <P> tags start the text following the tag on the left side of the page, but the <P> tag's ALIGN attribute can change that. Use <P ALIGN=RIGHT> to align the paragraph with the right side of the page or <P ALIGN=CENTER> to center the paragraph.

Since we want our example to break into two separate paragraphs, insert a <P> tag before each text paragraph, like this:

</CENTER>
<P>
Are you a freelance Web designer looking for a good accountant—one who's up on all the latest changes in the tax laws? Try E-Z Accounting. You'll get top-notch service from an honest accountant who's inexpensive and knowledgeable, and—best of all—knows the Internet and the type of work you do.
</P>
<P>
Ready to save some money? Let E-Z Accounting tell you more about our services, fees, and background.
</P>

Not bad, but your text is still pretty plain. You can make some points jump out by using the <I> (italic) and <B> (bold) tags. You can also "nest" these tags to create bold italicized text (remember: First on, last off). You can use the <PRE> tag to preformat text and the <TT> tag to use teletype or monospaced text. Apply these tags judiciously, of course. Too much emphatic text makes a page look annoyingly busy.

Fred Dekker is one of the Founders of The H.E.L.P. Community, an online resource for beginning Webmasters.

Donald St. John was the founding Webmaster at PC Games magazine.

Editor's Picks