|
|
| |
|
FONT Color
|
|
-
|
<FONT COLOR=#rrggbb>...</FONT>
|
| |
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
|
-
|
|
<BODY BGCOLOR=#rrggbb
BACKGROUND="image-URI"
TEXT=#rrggbb
LINK=#rrggbb
ALINK=#rrggbb
VLINK=#rrggbb>
|
| |
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.
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 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.
|
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
|
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
|
-
|
|
<HR SIZE=px
WIDTH=px|%
ALIGN=left|right
NOSHADE>
|
| |
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>
|
|
|
|
|
