Phantom Maelstrom

Welcome to the second installment of the Basic HTML tutorial guys and gals. Last time, I discussed some of the basics of HTML (see here), this time, I am going to continue the lesson from where I left off. Today's post will be covering background colors. Every website has one, usually, the default is white (if background color is not set), but if you want to assign new background colors to your site, then read on...

Background color can be assigned in the body of the page. It can also be inserted in div or divider elements, in texts, and in tables. But in this tutorial, since this is the basics, I am only going to cover the background color of the page.

Note that background color is an attribute rather than an element. An attribute is what gives an element its properties. We will go deeper into that on the advance lessons later on, but for now, let's know what is the attribute to use...

The attribute to use is bgcolor, it is displayed as bgcolor="x", where x=any color. Depending on a browser, it may be able to read high level languages such as "white", "blue", "red", "yellow", etc. However, I recommend using the hexadecimal color attribute which is triggered by a sharp (#); since this is the standard.

The hexadecimal color calling comes in 6 digits and starts with an # for example, #000000.

Now the digits are grouped by twos. ie. 00 00 00, each group corresponds to a color. See the diagram below:



The first two corresponds to red. The next two digits following the first group corresponds to the color green while the last two to blue. Also note that the values are in hexadecimal so it can range from 0-9 then a-f, where "0" is the lowest value and "f" is the highest. Hexadecimals by count appears like this when in order 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0a, 0b, 0c, 0d, 0e, 0f, 10...

Now, let's have a demonstration... assuming we want a page to have a red background...

to do this:


Here's the explanation, the body by default has a background color of white, however, using the bgcolor attribute, we can choose a different background color for the page, and since we pick #ff 00 00, we get a red page.

This is how it'll look like when opened in any browser.



Now, what if we pick #00 ff 00?

Well, it should come out like this:



Since we render red and blue to 0, both colors are no longer active, and by increasing the value of the digits corresponding to green to the highest, we end up with a bright green color.

Of course, aside from the 3 colors, you can make out other colors by combining the three. You can get purple, yellow, brown, etc. if you know how to mix them properly. In which case, you should refer to the color wheel.

Finally, aside from the hexadecimal value, you can also use the rgb value. It is written as bgcolor="rgb (0,0,0)", where the first digit corresponds to red, the second to green, and the third to blue, however, instead of displaying it in hexadecimal, we use whole numbers 0-255, where 0 is the lowest, and 255 is the highest value. 255 also corresponds to ff.

For example:


The result:



It's yellow, because combining red and green yields yellow.

So that completes our tutorial, do some experimenting with the colors. Until next time...

Related

Basic HTML Tutorial