Background Colors & Images & Link Colors


Intro
>	HTML Tutorial
>	Your First Web Page
>	Backgrounds & Link Colors
>	Formatting Text
Images
>	Adding Images
>	Aligning Images
>	Linking & Bordering Images
Tables
>	Tables
>	Table Attributes
>	Table Cell Spanning
>	Table Tips
Forms
>	Forms
>	Form Elements
>	Form Submit Buttons
Frames
>	Frames
Web Colors
>	Web Colors
>	Web Color Table
>	Web Color Names
>	Web Color Calculator

This page covers:
      Setting the Background Color
      Specifying the colors of links
      Adding a Background Image

Background Colors

On the previous page, I mentioned briefly that within the BODY element you could specify your background and text colors. This is done with the BGCOLOR and TEXT attributes of BODY. If you wanted a black page with white text, the code would look like this:

    <BODY BGCOLOR="#000000" TEXT="#FFFFFF">

Go to the hexadecimal colors page for a complete list of web colors and their hexadecimal codes. I've also written a javascript application that will convert RGB code into hexadecimal code for you if you have a color that is not a web color that you'd like to use on your page.

Link Colors

You can also specify the color of your links. Here are the link color attributes:

   LINK: the color of the links on your page
   ALINK: the color of a link while it is active (while it is being clicked on)
   VLINK: the color of a link after the page has been visited.

Here's a example of a page with a black background, white text, yellow links, red active links, green visited links:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FFFF00" ALINK="#FF0000" VLINK="#00FF00">

Click here to see this page. Then go to the hexadecimal colors page to get more color codes.

Background Images

If you want more than just a colored background, you can go for a background image. Here's the code for that:

<BODY BACKGROUND="images/background.jpg">

This code uses an image called background.jpg located in the images folder as the background. View the page with this background.

Remember that background images tile. That means that if you are using a square graphic for your background, it will be repeated ("tiled") to fill up the entire browser window. For more information and tips on using background images, visit the hardcoder.com Design Center.

Next Page: Formatting Text with HTML
Previous Page: Writing Your First Web Page