The first three parts of this article concentrated on content-- getting ideas from your head into the heads of your readers. You may also want to add texture or color to your webpage, to make it more visually interesting and thereby attract more readers. Please use these effects in moderation, because something that looks "cool" on your own computer may look garish and unreadable when viewed:
You can use the BACKGROUND modifier of the BODY command to create a
background image for your webpage. The basic Hypertext Markup
Language (HTML) framework for your webpage looks like this:
<HTML>
<HEAD>
<TITLE>Title of Your Webpage</TITLE>
</HEAD>
<BODY BACKGROUND="filename.ext">
Contents of Your Webpage
</BODY>
</HTML>
This background image will be "tiled"-- repeated horizontally and vertically as many times as needed to fill the webpage or browser window. A light image works best as background for dark text. A dark image works best as background for light text. If you want to use an image with a mixture of dark and light areas as a background, use a photo-editor program to reduce the contrast, then adjust the overall lightness/darkness to provide adequate contrast with your text.
Another technique to brighten up your webpage(s) is to use colors. The <BODY> command lets you set:
"Color" may be the name of a color, such as "black", "white", "blue", "yellow", "red", etc., or may describe the color content in the form "#rrggbb". The latter specifies the red (rr), green (gg), and blue (bb) content in hexadecimal, where 00 is none and ff is the maximum. In this color model, "#000000" results in black, and "#ffffff" results in white. See http://members.iglou.com/jrbarnes/webcolor.htm for colors that are frequently used in webpages, along with their names and #rrggbb designations.
You can also set the background color of cells in tables using the BGCOLOR="color" modifier in <TH> and <TD> commands.
Depending on their displays and the color modes your readers have selected for their computers, they may have:
If your webpage has more colors than the reader's computer will handle, their browser may lump similar colors together to stay within the display limits. Or their browser may texture an area with pixels of the available colors to come close to the desired color (similar to pointillism in painting). Either way, the webpage will not look quite the way you intended. One good strategy is to deliberately limit the number of colors that you use on each webpage. The "web-safe colors" use six reds, six greens, and six blues, for a total of 216 possible colors. In "#rrggbb" notation, rr, gg, and bb use just the values 00, 33, 66, 99, cc, and ff for web-safe colors.
The <FONT>text</FONT> command lets you change the color, size, and typeface for a section of text. To set the color put a COLOR="color" modifier in the <FONT> command. To set the size (height and width of text) put a SIZE modifier in the <FONT> command. Browsers usually default to SIZE=3, but your readers may change this default depending on their vision and their monitor. You may set SIZE=1 (smallest) up through SIZE=7 (largest). Each increment in size is about 20% taller and wider than the one below it. Or you may use the SIZE=+n modifier (make text larger than the default) or SIZE=-n modifier (make text smaller than the default). You may also change the typeface with a FACE="typeface" modifier in the <FONT> command, where "typeface" is the name of the desired font such as "Arial", "Courier New", etc. The problem with this last modifier is that the reader's computer must have the font installed, or the reader's browser will just use its default font.
It is all too easy to make one small mistake creating a webpage, and get things badly balled up. Writing your webpage from the outside in, and indenting your HTML for readability, will prevent most of these problems. But you can still get into trouble when adding to/ modifying your webpages. The following websites will critique your webpage(s) and suggest corrections and improvements. Some of them will give you "grades" showing how well you have followed the HTML standards and which aspects of your webpage may be incompatible with certain browsers:
Most of the information for this article came from:
Jakob Nielsen's free newsletter on designing and testing webpages for usability has also been very helpful to me. You can sign up for it at http://www.useit.com/