The Beginners Guide to HTML Color Codes  – PART 3

How to spruce up your web pages with HTML easy background color codesHTML color code tutorial

Have you noticed some web pages have their entire background as a color other than white?  Some websites might have a blue, pink, light tan or gray background.

When designing a web page with a background color, you must still use the HTML color codes in your page to get a background color.

This doesn’t necessarily mean the entire site must be this color.

You can still insert tables over the background and make the tables different colors to create a contrast.  It all depends on the look and feel you’re trying to accomplish on a web page.

Take a look at this example page:

http://www.webmastercourse.com/articles/html-color-codes-part3/example.htm

HTML Background Color Code for the Entire Web Page

The code that sets all colors for a page can usually be found at the top of the HTML code of a page’s “Body.”  Where the body begins in plain HTML is where the actual design codes are found that will become the foundation of a web page’s design.

Here’s the HTML background color code and other main settings of the example page you viewed a moment ago.

<body style=”color: rgb(0, 0, 0); background-color: rgb(153, 102, 51);”
alink=”#ff0000″ link=”#ff0000″ vlink=”#990000″>

Notice the background color code is:    rgb(153, 102, 51)

This is the color code for the brownish colored background you see on the example page.  This html color code can also be read:  #996633

Notice in the code above there are other color codes as well.  These are for the page’s links.  The reason there are three link color codes is these each stand for different phases of a link, or the color a link will be when first seen on a web page, the color it will be when the mouse moves over it, and the color it will be after being clicked.

Choosing HTML Background Color Codes

Be careful when choosing an HTML background color code.  Just as with text colors, the background color can look entirely different on other computer systems besides your own unless you choose a “Web safe” color.

If you must use an unusual color, make it a “background image” instead of a background color code.  A background image can be any color or design you want, but it may slow down your web page loading time.

Table Background Colors

When inserting a colored table on a web page, this too will have a background color for the table.  The example page shows a table with a background of pale yellow, or #ffffcc.

This is only the background for the table, which can be changed in the table’s HTML code settings.  This is not the background for the entire page.  So, you can use tables to create the look and colors you want no matter what the page’s background color.

If you already have a web page, or are just getting started with a web design program such as Netscape Composer, try out several backgrounds and tables with various HTML color codes to see how it works.

You’ll be amazed at the different looks you can accomplish!

In the next lesson, we’ll experiment with some different HTML background color combinations.  It will be our final lesson….

Are you ready to take your beginner designing skills to the next level? If you want to get a full course of lessons to learn about planning, creating pages, HTML color codes, background design or other aspects of becoming a webmaster, you’ll want to take a look at the beginner course for website design.!

Filed under: Web Design