Text Formatting and Alignment

Frequently I receive questions regarding the alignment of "text" within a webpage. Though I cannot possibly answer them all in this brief page I will attempt to cover as many as possible.

Emphasizing Text with Boldface and Italics

When we used typewriters we had to content ourselves with plain text or use the underline for emphasis. Today, we can use boldface or italicized text in documents and in our Webpages.For boldface text, put the <B> tag at the beginning of the text and </B> at the end. You can make the text italic by enclosing it in the <I> and </I> tags. If you want bold italics you can use <B><I> in front of the text and </B><I> after it. It isn't useful most times to place boldface in headings because it usually won't display because headings are already bold. But, italics can be used within headings and will be visible. Document Headings

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

This is <H1> heading size


This is <H2> heading size


This is <H3> heading size


Character Formatting

In additon to the <B> and <I> tags there are several other HTML tags for adding special formatting to text.

HTML tags that add special formatting to text.

<SMALL>
<BIG>
<SUPER>
<SUB>
<STRIKE>
<U>
<TT>
<PRE>
<EM> or <I>
<STRONG> or <B>
Small text
Big text
Superscript
Subscript
Strikethrough (draws line through text
Underline
Monospaced(typewriter) font
Monospaced font, preserving spaces and line breaks
Emphasized (italic) text
Strong (boldface) text

Note: 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.

The <TT> tag usually changes the typeface to Courier New, a monospaced font. However, Web browsers let users change the monospaced font to the typeface of their choice. The monospaced font may or 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 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. Multiple spaces and line breaks are normally ignored in HTML files, but <PRE> causes exact spacing and line breaks to be preserved. For example, with out the <PRE> the following text:

Qty     Description                  Price           Total
 1      Rubber chicken               $7.95           $7.95
 2      Whoopee cushion              14.97           29.94
12      Rubber spiders                0.25            3.00
                                                     ......
                                                     $40.92
would look like this:

Qty Description Price Total 1 Rubber chicken $7.95 $7.95 2 Whoopee cushion 14.97 29.94 12 Rubber spiders 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 the <PRE> at the beginning of the bill and the </PRE> tag at the end, the colums would line up properly and no <BR> tags would be needed.

There are fancier ways to make columns of text line up but you need to examine the Tables section to learn about them. The <PRE> tag gives you a quick and easy way to preserve alignment of any monospaced text files that you might want to transfer to a Webpage with a minimum of effort.

Note: 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">

The tag to align a paragraph to the left is:

<P ALIGN="left">

The 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> and other heading tags.

When you want to set the alignment of more than just one paragraph or heading at a time, you can use the ALIGN attribute with the <DIV>, or division, tag. By itself <DIV> and it's 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 the 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 other things which can be put on Webpages. By changing the attribut ALIGN to ="right" or ="left" everything aligns in that direction.

The preceding are the normally used tags for text and alignment. There are others which can be used and will be discussed in a page yet to be constructed. Bookmark the HTML Help Page and return to view "updates and additions" as they are added.

Go to this page for the "formatting of "LISTS".

Text Color

Text can be colored in a couple of ways. You can use the HEX value for a color, or you can use the COLOR NAME. Text color can be defined in the HTML <BODY> tag or in a <FONT> tag. For help with displaying FONTS go here.

For a resource you can use to select a color and convert it to a HEX value can be accessed by clicking this link.

For

Main HTML Help

Site ©1996-2003 Copyright by dcrum@infionline.net