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

Saving Your HTML File

After you have typed your document, you must save the file. (Be sure also to save your file periodically as you are working on it. This will prevent your work from being lost in the event your computer loses power.)

If you are creating your HTML document by manually coding the tags:

1. Choose FILE : Save As (NOT just SAVE—this would save the file in a word processing format). (NOTE: After the first time when the Save As command has recorded the location, file type and file name, you can safely use the Save button or menu option.)
2. Change to the drive and directory in which you wish the file saved.
3. Change the file type to “TEXT WITH LINE BREAKS (ASCII)” (”Text Only” also works, but your code, when viewed in the browser’s view source will continue past the right margin).
4. The file name must:

• Have no spaces
• Have an “.html” extension
• Be named “index.html” if it is your initial home page.

1. Close the document.

If you are creating your HTML document in an HTML editor that inserts the tags for you, choose the “Save As HTML” option.

About HTML

HyperText Markup Language (HTML) is a formatting “language” that World Wide Web browsers (such as Netscape, Internet Explorer and FireFox) read in order to correctly display home pages. Text files are embedded with “tags” that cause the browsers to display text in certain ways.

An HTML document is created by placing tags within a text document. The tags tell a Web browser how to display a given home page. Tags are always found within angle brackets, < >, and are generally used in pairs— “containers”—<open tag>…some text…</close tag>. Tags are closed by placing a forward slash (/) in front of the second tag.

For example,

<B>some text written here</B>

would cause the following display:

some text written here

or

<I>some more text written here</I>

would cause the following display:

some more text written here

You may type a file using your favorite word processor (any one will do, even Simple Text or Notepad) and apply the tags as you go (either manually or with an editor’s assistance), or you may open an existing text or word processed file within a word processing program or HTML editor and apply the tags manually or with the assistance of the editor.

You may occasionally find HTML documentation where some tags are opened but not closed. While this generally does not effect the page display, as browsers and the HTML “language” itself become more sophisticated, it may not remain true. For best results throughout the lifespan of your document, use both opening and closing tags.

HTML documents always follow this pattern:

<HTML>
<HEAD>
<TITLE>some title text here</TITLE>
</HEAD>
<BODY>

lots of stuff here

</BODY>
</HTML>

The <HTML> tag indicates the document type and all the pieces of the given HTML document are found within the <HTML>…</HTML> container tags.

The <HEAD>…</HEAD> container tags incorporate background information, such as editor-specific information, the title information, and other pieces of information used by search engines, documentation, and background information useful to the developers or users of the presentation.

The <TITLE>…</TITLE> container tags contain information that will appear in the colored ribbon at the very top of the browser window. It should contain a short, concise descriptor of your page.

The <BODY>…</BODY> container tags contain all the information you wish to present to your audience.

HTML Editors

Many HTML editors can be found on the Internet and most computer applications now come with HTML editors built into the application itself, allowing you to create your document, then “Save as HTML” or “Save as Web Page”. HTML editors allow you to create your documents in a word processing-like environment, generally in WYSI–A–WYG (What You See Is –Almost– What You Get) mode so that you seldom need to directly add HTML codes or understand exactly how they are working.

FrontPage is the Microsoft HTML editor. There is few Ver of Front Page FrontPage 2000, FrontPage XP, or FrontPage 2003 they are Microsoft products, they have a familiar interface if you are already used to working in Word.

DISCLAIMER: Editors are simply computer programs and are only as good as their creator(s). While most HTML editors are good, if your document is complex with a number of specially formatted sections (especially tables and/or columns), you will most likely find that you need to go directly to the HTML code and “clean-up” sections in order to have it display as good as possible or to correct codes that may have become “confused” during translation or use a stand-alone HTML editor such as FrontPage.

Some URLs to check out (in no order of recommendation, whatsoever):

• CoffeeCup: http://www.coffeecup.com/html-editor/ (for Windows)
• FrontPage: http://www.microsoft.com/frontpage/ (for Macs and Windows; NOTE: FrontPage has been discontinued by Microsoft; new versions will no longer be released)
• DreamWeaver: http://www.adobe.com/products/dreamweaver/ (for Macs and Windows)