Once you have created your basic HTML document, it is easy to enhance it by adding color or images. This page shows examples of the effects of adding color, backgrounds and/or images to a simple HTML document. The basic document includes a title and a bulleted list containing three hyperlinks, each described in a one sentence paragraph. The only enhancements are horizontal rules (created by the <HR> code) separating the title from the rest of the document, and the use of bold (created by <BOLD> code) to emphasize several words in each description.
To quickly see the effect of adding color or images to a simple document, click on each of the links below. Use the VIEW/Document Source menu command in Netscape to try to find the code that produced the changes. For more information on how the changes were made and for links to sources for the color codes and images used, read through the rest of the document.
NOTE: Since the interpretation of HTML code is browser-dependent, if you are not using Netscape 2.0 or later, the changes may appear differently than described below. To best see the intended effects, use the default background, text and link colors (as defined in Netscape by removing all custom colors from the OPTIONS/General Preferences/Color dialog box). If you do not see the described color changes, make sure that you have not selected the "Always Use My Colors, Overriding Document" box in Netscape's preferences (color) dialog box.
You can change the color of the background, the text, and/or the links. To change colors for the entire document, add one or more of the attributes described below to the <BODY> code near the beginning of your document.
Colors are represented by the 6-digit hexadecimal code that specifies the amount of Red, Green, and Blue included in the color. The background color is changed by adding the BGCOLOR attribute to the <BODY> code. The format is:
<BODY BGCOLOR=#RRGGBB>where RRGGBB is the hexadecimal RGB code for the color.
In the first enhanced document the background color has been changed to a light yellow by modifying the <BODY> code to read:
<BODY BGCOLOR=#FFFFCC>
where FFFFCC is the hexadecimal code for the shade of yellow displayed. There are a number of on-line resources which include charts of colors and their RGB codes. For this document I used the RGB Hex Triplet Color Chart.
Often when you change the background color, you also wish to change the colors of the text or the links. The attributes to do this are also contained in the <BODY> code. The format is:
<BODY TEXT=#RRGGBB LINK=#RRGGBB VLINK=#RRGGBB ALINK=#RRGGBB>The second enhanced document includes changes to the link and visited link colors. The basic text color and the active link color were not changed. If all of the links are green, click on one of the links so that you can see the visited link color. The code which changed the color of the links is:where TEXT is the text color, LINK is the color for unvisited links, VLINK is the color for visited links and ALINK is the color links briefly turn when you click on them.
<BODY BGCOLOR=#FFFFCC LINK=#007700 VLINK=#FF9900>where 007700 is the hexadecimal code for the shade of green of the active link and FF9900 is the hexadecimal code for the orange visited link.
The other simple method for enhancing the appearance of a document is by adding images. In addition to images which relate specifically to the content of your page, you can use background images, lines, buttons, and icons to make the page look more interesting.
You can use a graphics package to create your own images or you can download (copy) them from the Internet. In copying images from the Internet you must be careful to follow copyright rules. However, there are a number of sites which contain libraries of images which can be copied for free, particularly if your page is non-profit or if you include a link to the site from which you took the image. Before downloading images, read the page carefully to see what the copyright implications are.
Two resources with links to image libraries are:
You may also want to use the search capabilities of the Yahoo ClipArt Directory to find specific images.
To download an image that you find on the Internet:
Backgrounds are images that are repeated ("tiled") on the page. They may be colored images, but are often transparent so that they interfere less with the text. Textured backgrounds (such as the one used in this page) are also frequently used. The code to add a background image is an attribute of the <BODY> code and has the format:
<BODY BACKGROUND="name_of_image_file">
The third enhanced document includes a tiled transparent image of a cat as the page background. The code used to create this is:
<BODY BACKGROUND="plbgcat.gif">where plbgcat.gif is the name of the image used as the background. This image was taken from Paul's Greyscale Animal Textures.
Using a colored bar or other line image is a more interesting way to separate parts of the document than using a horizontal rule. The code used to include any image is:
< IMG SRC="name_of_image_file">where the name_of_image_file should be an exact copy of the name you gave the file when you saved it, including case (capitalization) and any extension (file type).
The fourth enhanced document combines a line image with a colored background while the fifth enhanced document includes a line image and a background image. The codes for these images are:
<IMG SRC="patsquli.gif"> (fourth enhanced document) and <IMG SRC="redline.gif"> (fifth enhanced document). The source for these images is Ender Design - Realm Graphics.
There are a great variety of images available. Some are even animated. Once you've found and saved an animated image, you can include it in your document by using the same tag as you used for an unanimated image. The sixth enhanced document includes an animated image of a moving bus. The code for the image is:
<IMG SRC="magicbus.gif">. The image is taken from Animated Clip Art.
It is sometimes difficult to control the placement of images. If you want to include one image to add visual interest to your document, the easiest place to position it is centered at the top of the page. Even then you may need to size the image so that it is not too large or small for your document. The <HEIGHT>, <WIDTH>, and <ALIGN> attributes give you some control over the size and placement of the image.
The <HEIGHT> and <WIDTH> attributes are included in the <IMG SRC> code as follows:
<IMG SRC="name_of_image_file" HEIGHT=height_in_pixels WIDTH=width_in_pixels>The seventh enhanced document includes a picture centered at the top of the document. The height and width attributes have been used to decrease the size of the original image. The code is:where height_in_pixels and width_in_pixels are the number of pixels for the desired height and width of the picture.
<CENTER> <IMG SRC="csis.gif" WIDTH=130 HEIGHT=130> </CENTER>
The ALIGN attribute can be used to align an image with respect to adjacent text. The format of the attribute is:
<IMG SRC="name_of_image_file" ALIGN=position>where position indicates the position of the image with respect to the following text. The values that the align attribute can take are left, right, center, top, bottom, middle, absmiddle, baseline or absbottom.
Other codes such as <P>, <BR>, and <BLOCKQUOTE> often need to be used in conjunction with the align attribute to move lines of text down or keep adequate space between the image and the text.
The eighth enhanced document uses an image of a small ball instead of bullets to emphasize each of the items in the list. The codes used to align the image on the left of the line and control its height and width are:
<IMG SRC="clrball1.gif" ALIGN=LEFT HEIGHT=20 WIDTH=20>The clrball1.gif image was taken from The Ball Boutique Free Graphics, Presented by Octagamm Web Design and Hosting. Use the VIEW/Document Source menu item in Netscape to see how the <BLOCKQUOTE> tag was used to space the adjacent blocks of text.