::: The HTML Survival Kit - Color and Margin Tags Combination :::

FONT Color

COLOR=#rrggbb|color alias

Each color value is composed of 3 values representing the amount of red-green-blue (=RGB color) triplet variable=#rrggbb. For example, RGB color for red is #FF0000. This #FF0000 color is combination of red=FF green=00 blue=00 where each color value has a range of 00-FF Hexadecimal (or 0-255 in decimal system).

Decimal vs. Hexadecimal
Each number is represented in hexadecimal as opposed to decimal.

Decimal (10 digits) 0,1,2,3,4,5,6,7,8,9

Hexadecimal (16 digits) 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

Each color value has a range of 0-255 (00-FF HEX) Here is an example of converting the decimal number 211 to Hexadecimal. (211/16)= 13 in hexadecimal 13 is represented with the digit "D". after subtracting (13*16) from the 211 the remainder is 3 thus the hexadecimal number is "D3".
Suggestion
You will experiment with various font color combinations for sure. However, color too loud or strong make your page very difficult to read. Color should be used as an aesthetic|functional enhancement to your page, not a deterrent. Think, why you created the page in the first place.

Frequently used RGB color combinations are shown below. You can also use a color alias (enclosed by parentheses just below the RGB values such as 'aliceblue' for #F0F8FF for example) instead of the #rrggbb expression.

RGB Color Combination Chart


"Time is the best teacher. Unfortunately, it kills all its pupils" - Hector-Louis Berlioz	<FONT COLOR=#000080 FACE="Book Antiqua, Palatino, New Century Schoolbook, Serif"> "Time is the best teacher. Unfortunately, it kills all its pupils" - Hector-Louis Berlioz </FONT>

"Pluralitas non ponenda est sine necessitate" - Multiplicity is not to be asserted when it is unnecessary	<FONT COLOR=darkred FACE="Courier, Monospace"> "Pluralitas non ponenda est sine necessitate" - Multiplicity is not to be asserted when it is unnecessary </FONT>

"'I see!', said the blind carpenter, as he picked up his hammer and saw" - William Shakespeare, MacBeth	<FONT COLOR=#778899 FACE="Verdana, Tahoma, Arial, Helvetica, Geneva, Sans-Serif"> "'I see!', said the blind carpenter, as he picked up his hammer and saw" - William Shakespeare, MacBeth </FONT>

"Never trust anybody who says "trust me." Except just this once, of course" - John Varley	<FONT FACE="Arial, Tahoma, Verdana, Helvetica, Geneva, Sans-Serif"> "Never trust anybody who says "trust me." Except just this once, of course" - John Varley </FONT>

"That was Zen. This is Tao" - Peter da Silva	<FONT COLOR=darkorange> "That was Zen. This is Tao"- Peter da Silva </FONT>

"To my daughter Leonora: Without whose never failing sympathy and encouragement, this book would have been completed in half the time" - P.G. Wodehouse	<FONT SIZE=2 COLOR=#FF0000> "To my daughter Leonora: Without whose never failing sympathy and encouragement, this book would have been completed in half the time" - P.G. Wodehouse </FONT>

Background and Link Color

BGCOLOR

background color for the whole page

BACKGROUND

In case of you want to use an image as the background of the whole page, i.e., wallpaper. Only Gif or Jpeg file format is valid. Some browser allow to use Bmp or Png file format, however they're not a HTML standard, and should be avoided for compatibility.

TEXT

Default color for the text. If omitted, standard black text color will be used.

LINK

Color for the new (or un-visited) link. If omitted, a defult blue color will be used.

ALINK

Color for the active link. Here, 'active' means the momemnt when user press mouse button on the link. If omitted, a defult blue color will be used.

VLINK

Color for the old (or visited) link distinguishing it from the new link. If omitted, a defult purple color will be used.

Decimal vs. Hexadecimal
Each number is represented in hexadecimal as opposed to decimal.

Decimal (10 digits) 0,1,2,3,4,5,6,7,8,9

Hexadecimal (16 digits) 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

Each color value has a range of 0-255 (00-FF HEX) Here is an example of converting the decimal number 211 to Hexadecimal. (211/16)= 13 in hexadecimal 13 is represented with the digit "D". after subtracting (13*16) from the 211 the remainder is 3 thus the hexadecimal number is "D3".
Suggestion
You will experiment with various background colors and images combinations for sure. However, color/image too loud or strong make your page very difficult to read. Color/image should be used as aesthetic|functional enhancement to your page, not a deterrent. Think, why you created the page in the first place.
Trick
Certain color values cause strange results with some browsers. An example would be in setting the Text color to white (TEXT=#FFFFFF). Rather than the white text you would expect, you might get a white filled in a rectangle. In such case, reducing one of the color values by one fixes the problem, i.e., changing TEXT=#FFFFFF to TEXT=#FFFFFE usually does the trick.

Still not for sure about this 'hexadecimal' RGB triplet stuff? O.K., here's another RBG Color Triplet chart for you.

Margin Control

<BODY  LEFTMARGIN=px
             TOPMARGIN=px
             MARGINWIDTH=px
             MARGINHEIGHT=px

You can control the display margin of the webpage by using the above elements in your <BODY> tag. Hence 'px' means pixel. You can assign various margin combinations to suit your need.

Most frequent use of MARGIN elements is to force the the webpage to align at upper-left corner of the browser display without having the default margin built in every browser. (so that it looks tighter) This can be achived by assigning '0' pixel to all four MARGIN elements.

You may still wonder what is this all about. O.k. take a closer look at left and top edges of this page. As you can see, there are small amount of margins that is the default built in every browser. Now, click here to see the same page with all four MARGIN elements set to '0' pixel.

Horizontal Rules

The <HR> element draws a horizontal dividing line. By default, the <HR> element is center aligned.


	<HR>

	<HR SIZE=10px COLOR="green">

	<HR WIDTH=50>

	<HR WIDTH=50%>

	<HR WIDTH=50% ALIGN=left>

	<HR WIDTH=50% ALIGN=right>

	<HR SIZE=5px>

	<HR SIZE=5px NOSHADE>

Jump back to HTML Survival Kit Table of Contents (TOC)