• Shrink your paragraphs dramatically. Reading text on a computer screen can be tiring and trying to decipher the meaning of a huge paragraph makes it worse. Keep your sentences and paragraphs short.

• Don't overdo the styles, colors, and fancy fonts. Not only will your effects lose meaning, but your webpage might take on the look of an obnoxious Hawaiian shirt.

• Break up your text with bulleted lists or indented text. It's easier to read and better to look at.

Now with all that in mind, let's get to some coding.

Basic Text Attributes

Most HTML tags that modify text need an opening and ending tag. Any text that you place between these tags will show up according to the attributes you select.

Try these tags:

<B></B>-- Bolds

<I></I>-- Italicizes

<U></U>-- Underlines Warning, this can confuse your reader, as links often appear underlined as well.

<strike></strike>-- Strikes through text

The <FONT> tag lets you change the color, size, and font face of your text. Before you get all excited thinking you can have brilliant fonts appear to all your readers, know this. Without offering a downloadable font, the only fonts you can control are fonts that already exist on your viewer's computer.

Although this might seem like a hindrance in some ways, it can actually be a blessing for viewers of potentially font-happy sites. Imagine trying to read a whole page of text that has been presented to you in a gazillion different type faces. It isn't pretty.

But if you do need a little emphasis on your page, so be it. This is the perfect time to realize that less is more.

You place the attributes of the <FONT> tag inside the tag itself, with spaces separating each attribute. <FONT COLOR=#000000 SIZE=+1 FACE=ARIAL> will display text one size larger than the base font, in black, in the font arial. You can be fairly certain that most computers will recognize common fonts such as Arial, Helvetica, and Times. Sans-serif fonts are usually easier to read on the Web.

Format Your Text

You can format your text in numerous ways. The more creative you are, the more you can do with the tags you have available.

Indent with blockquote

The <BLOCKQUOTE> tag indents text. It creates a break and a space, then shortens the margins on each side of the enclosed text. You can nest blockquotes, which means you can use several in a row to achieve the amount of indentation you need. Just be sure to use an ending blockquote for each starting blockquote.

Lists are another way to format your text. They can be bulleted (unordered) or numbered (ordered). Use numbered lists in lieu of typing in the numbers yourself. The ordered and unordered list tags will wrap long text under the text rather than the number and will make your site look a lot cleaner.

How to create lists

For an ordered list:

<OL>
<LI>First item in list
<LI>Second item in list
</OL>

The results:

1. First item in list
2. Second item in list

For an unordered list:

The <UL> tag will insert bullets instead of numbers in front of each list item. The <LI> tag will start a new line for the next item on the list, but if you want a space between items, you will need to add a <P> tag in between.

Get centered

Draw the line

<HR> creates a horizontal rule, or line, across the screen. These help divide a page.

The horizontal rule tag has the following attributes: size, width, noshade, and align. Size refers to the amount of pixels a line is high.

You can set the width as a plain number, which refers to pixels, or as a percentage of the screen's width. For example, you can create a 200-pixel line by adding WIDTH=200 inside the <HR> tags. Or you can make the line take up half the page by writing WIDTH=50%.

Noshade will provide you with a plain line without shading. Align lets you choose left or right. The default position for this tag is center.

<HR WIDTH=350 SIZE=4 ALIGN=LEFT> will display this line:

Keep your formatting

The <PRE> tag will present your text as you typed it. That is, if you use returns and spaces, the PRE tag will display this formatting without the use of paragraph or break tags.

Headers

Header tags bold and increase the size of your text according to their hierarchy. Ranging from H1 to H6, header tags allow you choose the style of header you wish to use.

This is a <H1> tag

This is a <H2> tag

This is a <H3> tag

and so on.

Odds and ends

Here are some odd text effects you might need one day.

<sup>-- Superscript lets you make exponents²
<sub>-- Subscript lets you make dropped text₃

HTML Help on the Web

We have only provided you some basic tags for playing with your text. These tags will work on older browsers, but newer tags have since been created. If you would like to find out about the latest HTML tags and specifications, visit the World Wide Web Consortium, also know as the W3C.

Here you will find all the information you need about the latest browser support, useful links for coders, as well as discussion forums and related topics.

(If you aspire to be a Web developer, bookmark the W3C and return often. It sets the standards for HTML and other Web protocols.)

If you would like to easily pick out some nice colors for your site, Brain Hall's Java ColorServe is a great tool. Not only does it allow you to pick out colors for your background, text, and links, but provides you with the codes to insert into your body tag.