HTML Basics:
Page Format Guidelines

español
Did you want IE9+, Chrome, Firefox; Notepad?

Choosing Colors

Naturally you want your page to be attractive.  You will want to use colors and images that look pretty together. People can have quite different opinions about that!

You must think like an artist while remembering that what your viewers actually see depends on their hardware and software.

How colors appear on the screen will depend on:

• Operating system (Windows, Mac,...)
• Color depth of the display (gray scale, 256 colors, 16 bit color, 32 bit color...)
• Video card
• Manual settings on the monitor (brightness, contrast, gamma correction)
• Browser

Colors: Text vs. Background

The colors for your page background and text make an amazing difference in the look and feel of your web page.

Choose wisely. It is easy to get carried away with bold color schemes. Don't make the text hard to read!

Dark vs. Light

Dark text on a pale background is easiest to read.

Light text on a dark background is second best. Use it sparingly because it is more tiring to the eyes in large quantities.

Contrast

Keep a sharp contrast between the text color and the background color.

Your page may be printed or viewed in gray scale. Quite a difference!

Note example 5, which had blue text on a green background. On some printers these colors  print in nearly the same shade of gray! Not much fun to read!

Colors: Links

Your browser assigns a default color for each of the three states that a hyperlink can be in - unvisited, visited, active.

Consider carefully before assigning different colors. People now expect that underlined blue words are links and that underlined purple words are visited links.

If you change the colors, pick colors that have the same kind of relationship to each other:

• A visited hyperlink is darker/dimmer than an unvisited hyperlink.

• An active hyperlink is a bright color that is in sharp contrast to the other two colors.

Careful choices help your viewers recognize which links are which. Of course, all of the colors should be easy to read against your background.

Underlines:

Do not underline words that are not part of a link!

Use italics or bold or colors for emphasis. Underlining for emphasis was OK in the olden days of typewriters, which could not do bold or italics. Be modern!

Background Images

You can use an image as the background for a page instead of using a solid color. Normally the browser will tile the image, repeating it across the page and then down the page until the whole window is filled. The smaller the image, the faster the page will display.

A texture is a background that creates an overall effect on the page. Realistic textures look like sand, grass, water, brick, wood, etc. Some people call all small background images textures. A bit confusing.

A watermark is a background which does not scroll when you scroll the page. The name comes from the world of paper. High quality stationary has a faint design in the paper called a watermark. You can see the design when you hold the sheet of paper up to the light. 

Types of background images:

• Blended- Edges of the repeated image blend together for a continuous pattern. It is difficult to create such as image.

• Obvious repeat - Pattern cannot be strong or it competes with the text too much for easy reading.

• Side border - Solid color or a picture at the left with contrasting solid color to the right.

An image that is interesting by itself is probably a bad choice as a background. It will drag the eye away from the text and make the page hard to read.

Problem: Text falls on top of side border

Unless the border is very narrow, you must design your page carefully to keep the text off of the side border. One common method is to put your text in a table with an empty column over the border.

Problem: Side border repeats across page

If the side border image is not as wide as the window, it will be used more than once across the page. To avoid such repeats you must be sure that the image is wider than the window you expect your viewers will be using. Large monitors are getting cheaper all the time, so more and more people will be able to use the higher resolutions and large window sizes. A width of 1300 is probably needed these days.

Experiment with Page Formatting

Try out a cool Color Picker utility at Joe Barta's PageTutor.com. You can experiment with various color combinations for your background color, background image, text, and links. There is even a version you can download to play with offline.

Your resource files include some background images that you can use in the Color Picker.

~~  1 Cor. 10:31 ...whatever you do, do it all for the glory of God.  ~~

Last updated: 30 Apr 2012