Special Text Effects

You can affect both the color and the size of text by using the <font> tag. The two options you can use with font are color and size. As with any option, you can use these individually or together depending on the effect desired.

Text Colors

To change the color of a word or phrase, you can use the font option “color.” For example,

<font color=”xxx”>HOT! HOT! HOT!</font>

where “xxx” is replaced by one of the recognized colors. (Remember, you can refer to the section on browser-safe colors to determine which of the named colors will most likely be displayed correctly.)

While there are many colors that can now be referred to by name and generally recognized by both Internet Explorer and Netscape, there are only sixteen colors that are standard HTML and recognized by the W3C (displayed in the following paragraph).

The colors as recognized by HTML standard are: Black (#000000), Green (#008000), Silver (#C0C0C0), Lime (#00FF00), Gray (#808080), Olive (#808000), White (#FFFFFF), Yellow (#FFFF00), Maroon (#800000), Navy (#000080), Red (#FF0000), Blue (#0000FF), Purple (#800080), Teal (#008080), Fuchsia (#FF00FF), and Aqua (#00FFFF).

NOTE: Be somewhat cautious in using the blue color since many readers from the earlier days of Netscape assume that the blue color indicates a link that they may click on.

Super / Subscript Text

To superscript characters: ¹. A “superscript” example:

See Dante²

To subscript characters: ₂. A “subscript” example:

H₂O

Pre-formatted / Spacing

As you know, HTML does not recognize word processing features such as multiple spaces, tabs, and carriage returns. Text contained within the <pre> … </pre> tag retains its spacing. Thus, this tag is good to use when you have simple tabbed columns or unique spacing. The downside to using this tag for spacing is that it will change the font to a courier style.

For example to create the following effect, you would place the appropriate spaces preceding each line in your HTML document, but enclose the entire poem within the “pre” container:

Mary had a little lamb
   Its fleece was white as snow
     And everywhere that Mary went
        The lamb was sure to go.

Monospaced / Typewriter Text

Text contained in the <tt> … </tt> tags will be monospaced. For example:

Type this text.

Text Alignment

To center align text:

<center>Indiana University School of Nursing</center>

For example:

Indiana University School of Nursing

You can also right align paragraphs of text, such as I’ve done with this one: <p align=”right”>

Underlining Text

Be careful when electing to use underlined text since some readers associate it with hypertext links. However, when you do decide you must use underlining, the HTML code is:

<u>important!</u>

For example: This is important!

List Item Styles

You can change the number style of the list item in a numbered list, as well as the symbol style of the list item in an unordered list. You can also specify the value of the starting number of an ordered list. Number styles used with the ordered list are A (upper alpha), a (lower alpha), I (upper roman), i (lower roman), and 1 (arabic numbers). Choices used with the unordered list are disc, circle, and square. Notice in the examples that you place the type style or value in the <UL> or <OL> tag rather than in each list item.

Block Quotes

Block quotes indent from both the left and right margins and are used when citing long pieces of information. For example:

<blockquote><p>Four score and seven years ago, our fathers brought forth to this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.</p>

<p><em>from The Gettysburg Address<br>
A. Lincoln</em></p></blockquote>

Would result in:

Four score and seven years ago, our fathers brought forth to this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal.

from The Gettysburg Address
A. Lincoln