Why go for those dingy shabby black and white pages when you are given the option to spice up your web pages with interestingly colored or marvelously textured backgrounds?! When designing your web pages, color selection is of the utmost importance and it should so be selected that it does in no way impede the readability factor. So, choosing the right color with the right textured background should certainly top your list of priorities. It is the page colors that take you a long way in expanding your site visitors’ comfort zone and thus acquire their trust, faith, belief and reliability. So let’s begin our coloring session, and I’m sure you’ll all love it!
Welcome to Lesson 17 – Background Colors & Textures in HTML
When it comes to coloring, HTML however does not owe any such copyright tags. It’s all done courtesy an attribute enclosed in another tag, such as the table tag or a body tag or a row tag. It’s just these 5 letters – COLOR – that makes your web pages undergo a phenomenal change in terms of appeal and readability (or sometimes unreadability!). As such, a piece of advice for all of you out there: colors should be used, but wisely! If you consider the pages of this tutorial lesson, it’s a complete white color that has been used throughout, and what is the outcome? It has resulted in a tolerant environment. The pages are neither loud nor are they exciting; they are readable, and that is the key factor.
Shade your web page backdrop with color palettes by making subtle modifications to the <body> tag. But prior to that, it is important that we acquire some knowledge about the Red-Green-Blue (RGB) values and also their "hexdec" illustrations.
Know about the COLOR BASICS
A web browser brings to you loads of system colors, colors to color even colors to shade the backgrounds. Now the question is how are colors identified in the world of HTML? Simple, they are defined by their RGB values. The RGB values range from 0 to 255 i.e. the color that has the minimum RGB value of 0 (R=0, G=0, B=0) is black, and the one with the maximum value i.e. 255 is white. And apart from black and white, all other colors in the palette bear different values.
So in your HTML document, how do you define the BG color? Let’s find out. When defining the background color, each HTML code comprises of a # symbol followed by 6 letters or numbers. These numbers can be interpreted by following the hexdec chart. For example "FF" in hexadecimal symbolizes 255 in Decimal. The general color code format for HTML is as follows:
<body bgcolor=#******>, where ****** is the hexadecimal representation (preceded by #) of the pet color.
Listed below are some of the most commonly used HTML color codes:
Changing the background color of an HTML page is simpler than you could have ever thought. It can be done in 3 easy steps as listed below:
- Open the index.html file in your text editor.
- Find the <body> tag and change it to:
<body bgcolor=#000000 >
- Once done, save and load your HTML file in your web browser.
And what do you see? It’s a black out! Where are your texts gone? And the headings… where are they?! It has all been merged with the BG color. Now did you get my point when I meant to say that colors affect the readability? Yes… you must have understood it well. But hold your hats guys, I’ve something more to say. So what if the background color has merged with that of your text. We do have the provisions to change even the color of the text and even the hypertext items. This is how you do it:
<BODY BGCOLOR=#***** TEXT=#***** LINK=#***** VLINK=#*****>, where the ***** values will determine the color of the bg, the text, the link and even the vlink.
Now let's try and give some different shades to these default items:
<BODY BGCOLOR=#000000 TEXT=# FF0000 LINK=#0000A0 VLINK=#800080>
The outcome:
Following the background color, comes the texture. Vibrant colors undoubtedly spice up your web pages, but options are always there to make things look all the more gorgeous! Say for instance, you want to set a certain image file in the backdrop of your web page. How do you do it? This is where the role of HTML textured background comes into play! When adding textured backgrounds, keep in mind the following things:
file size: BG texture is fine, but take care that the file size is not too big. Keep the file size of your BG texture as small as possible.
Readability: Be selective when choosing the background texture. Very light or highly loud textures are recommendable. And also keep in mind the contrast factor.
Effect: Initially the content of a web page used to get displayed only when the downloading of the background file was complete. Although it is not the case now, still keep a note of the load time.
The general HTML format for adding a background image file is:
<body background="bgfile.gif">, where bgfile.gif is the name of the image file.
Now that I’ve given you a complete overview of the background designing, try and implement the same in our working HTML document! I hope this has been a good and helpful practice session!
Original Authors: Rajat
Edit Update Authors: M.A.Harris
Updated On: 26/05/2009
