HTML Basics:
Page Format Guidelines

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

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

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/FPXTo subtopics
    Images in HTMLTo subtopics
    FormattingArrow - Subtopic open
        Page Format
    icon-footprintPage Colors Table: Named Colors
    icon-footprintBackground Image
        Text Format
    icon-footprintFormat Text
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Colors: Text vs. Background

Examples: good and bad

1 black on white abcdefghijklmnopqrstuvwxyz
2 gray on black abcdefghijklmnopqrstuvwxyz
3 purple on aqua abcdefghijklmnopqrstuvwxyz
4 white on navy abcdefghijklmnopqrstuvwxyz
5 blue on green abcdefghijklmnopqrstuvwxyz

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.


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

Color examples in gray scaleYour 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

Default color choices for hyperlinks: LInk in blue, visited link in purple, active link in redYour 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.


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.


Background: Water  

Background: Holly

Image edges blend together when tiled

Background: Page using Water background
Background: Page using Holly background

As tiled on page

Obvious Repeat

Background: Bells
Background: Globe


 Object images for repeating backgrounds


Background: Page using Bells
Background: Page using Globe

As tiled on page

Side Border

Background: Green side border, White on rest
Background: Butterfly side border



Side border background images
[Images have been cropped
on the right side for display here.]


Background: Page using Green sideborder
Background: Page using Butterfly side border

Side border as repeated down the page

TipAn 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.

Hector's page with butterfly background repeatingProblem: 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

Icon: Left mouse click Try out a cool Color Picker Icon: Off-site location utility at Joe Barta's 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.