Coming Soon

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

Wallpaper

Any image that can be viewed in a home page can also be used as “wallpaper.” This is another option which may be used with the body tag. The tag with this option would read: <body background=”name.gif”> where “name.gif” is the name of your image file. You should choose a subtle background with few colors that does not interfere with the presentation of your information.

Many web designers choose to use both a wallpaper as well as a background color that matches a dominant color in the wallpaper. This causes the browser to immediately set the color while loading the wallpaper “on top” of the color. In this way, your reader will see a color that links visually to your page without having to wait on the image to load.

Wallpaper appearance can be enhanced by increasing the brightness and lowering the contrast to soften the image. Keep in mind that many people may have difficulties viewing a home page with a busy or bright background due to physical impairments or hardware incompatibilities.

The background image will automatically tile across the width AND height of your home page. For example, this image will fill the space behind your home page. The tiling allows you to use a much smaller graphic than you would need to actually fill the page; thus, your page loads faster. Most wallpaper images are about 100×100 pixels; a minimum size for most efficient processing is 64 x 32 (w x h).

If you create a wallpaper with an image or design on the background (as opposed to a pattern or texture only), you will need to experiment with placement of the design in a graphics package. Generally, you will find that the overlying design will need to be offset toward the lower right of the background, rather than centered, in order to achieve the effect of a centered design behind the page’s text. Also, when creating wallpapers, make sure that you do not unintentionally leave a “seam” that will give a checkerboard appearance on your home page.

HTML Color

Color Effects

All computer-displayed colors are made up of red-green-blue (rgb) combinations. This allows colored backgrounds for those pages where you want a simple, solid color on your home page. These same rgb values also specify the color of text, links, and “followed” links (links that you’ve clicked then returned to).

When you set colors, they are set for the entire home page file. Generally, you can’t “mix-and-match.”

See samples of colors that are use able by all Web browsers.

Warm colors (reds, yellows, oranges) appear to “approach” the reader while cool colors (blues and greens) appear to “recede from” the reader. Generally you will want to choose cool colors for backgrounds so that the background does not compete with the foreground and make it more difficult to read.

“Browser-safe” colors are those that remain true across computing platforms and whether viewed in 256 colors, 16- or 24-bit color settings. Other colors may pixelate (appear dotty) or band (ribbons of, rather than blended, color). Browser-safe colors always are combinations of 00, 33, 66, 99, cc, ff. All of the colors identified in the hue and value charts above are browser-safe colors.

Rather than using the <body> tag alone, you may add any combination of the options for background, text, links, and visited (followed) links color.

NOTE: These options may be placed in any sequence after “body” within the tag.

The tag, with options, would follow this format: <body bgcolor=”#xxxxxx” text=”#xxxxxx” link=”#xxxxxx” vlink=”#xxxxxx”> where “xxxxxx” is the rgb value.

Testing The HTML File

Testing your file using Web browsers (e.g., Netscape, Internet Explorer, Firefox), allows you to see a more realistic representation of what your page visitors will see when they view your page on the Web.

NOTE: in the instructions below, “Web Browser,” means Internet Explorer, Netscape, or Firefox. Sometimes menu choices are worded slightly differently in the various browsers. Alternate wording choices are in parentheses.

1. To test an HTML Web file, start your Web browser.
2. Choose FILE : Open (or Open Page).
3. Click Browse (or Choose File).
4. Change to the drive and directory where you saved your Web page file. When you see your file, click once on the file name to select it, then click Open.
5. You will see that the browser has placed the file information in the text box. Click Open (or OK).

Now you will see a “working” copy of your Web page. If you have correctly placed your images in the same folder / directory, the images will display correctly in the working copy.

Remember, at this point, your HTML document is simply a file on your local computer (hard drive, floppy disk, or other removable storage media). No one can see your “goof-ups” except you (of course, they can’t see your triumphs either!).

To test your file, start your Web browser and choose FILE : File Open.

By changing to the drive and directory where you saved your home page file, you can select your file and see a “working” copy of your home page. Later, after you have placed your graphic file(s) in the same directory, your graphics will also correctly display in the working copy.

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.

Finishing Your HTML Document

Just as books have appendices, indices, forewords and glossaries, it is important to include a type of “footer” section in your Web page for your user’s benefit. This type of information can be included in the <ADDRESS>…</ADDRESS> tag. The address tag is used for citing author information. I encourage this series at the bottom of each and every HTML document:

<ADDRESS>
Author’s Name (or Issuing Department)<BR>
Creation Date (or Last Revision Date) (in form of: Jun 10 2008)<BR>
URL: http://www.yoursite.org<BR>
</ADDRESS>

Converting Graphics

Most graphics packages allow you to save images in .gif or .jpg format. However, if yours does not, there are packages to do conversions for you. For example, PhotoShop, not only allows you do save the file in the necessary format, but will also allow you to “clean-up” the image if desired. In a pinch, you can even use FrontPage; just insert the image, then right-click the image and choose Picture Properties. Select either .gif or .jpg as the format to convert to.

Creating Images

One of the most time-consuming, but personal, solutions is to create a digital image using a graphics application. There are many possibilities if you choose this route: PhotoShop^®, Illustrator^®, Freehand^®, Painter^®, Paintbrush^®, MacDraw Pro^®, etc.

If the artist in you (or in someone else you know) is better suited to paper, pen and ink or some other medium (such as photographs or slides), you may use a scanner to scan your image into a digital format that can be used on your home page.

With flatbed and slide scanners for both Macs and PCs, you can preview your scans, zoom and do other simple manipulations before choosing the final scan and saving the image in the desired graphic format.

Once your image is in a digital format, you may choose to manipulate the image. Suppose, for example, that you find an old photograph of your childhood pets, Dog and Cat. Unfortunately, Bossie the Cow is also in the photograph and your home page is only about dogs and cats. By using a graphics application, you can erase Bossie from the picture, paint the barn a brighter red, and erase the clouds on the horizon!