October 22, 2011

HTML - Understanding Color

Like I said a while ago, you can modify the color of your webpage using HTML but the W3C recommends using CSS in doing this in HTML 4.01 and XHTML. The name of the color could be like "red", "green", "blue", “yellow”, “black”, “white” etc. The World Wide Web Consortium (W3C) has listed 146 valid color names for HTML and CSS (another mechanism for adding style to web documents and stands for Cascading Style Sheet). This includes aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Another method of stating the color value is with the use of the HEX (hexadecimal) code. Use the format “#RRGGBB” in specifying the color using the HEX code. The first two letters “RR” can be replaced with a number value 0 - 9 or the letters A - F. "0" symbolizes absence of red color, while the letter "F" represents the most amount of red color. The next two letters “GG” stands for green and can be replaced with the same values as for the color red. The last two letters “BB” stands for blue and can be replaced with the same values as for the previous two colors. The hex code for black is “#000000” while for white is “#FFFFFF”.

Examples are:
  • Red = “#FF0000” — the color red is the first two numbers after the pound sign and it has the highest value(FF), while green and blue is set to zero.
  • Green=”#00FF00” — the color green is the 3rd and 4th numbers after the pound sign and it has the highest value, while red and blue is set to zero.
  • Blue=”#0000FF” — the color blue is the 5th and 6th numbers after the pound sign and it has the highest value, while red and green is set to zero.

Modifying the Background Color of a Webpage

In modifying the background color of your webpage you need to use the bgcolor attribute of the<body> tag. Open your text editor now and type the next code.
<html>
<head>
<title>Colors</title>
</head>
<body bgcolor="#00FF00">
Text on a green background.
</body>
</html>

The previous code will be rendered in Mozilla Firefox this way.

About the Code:
  • The bgcolor is an attribute of the <body> tag used in changing the background color of a webpage.
  • The bgcolor attribute value “#00FF00” is the hexadecimal code for the color green. As mentioned earlier, you can also use the name of the color as the value of the bgcolor attribute. Color name examples are aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Try using them to change the background color of your webpage.

Modifying the Color of the Text on your Webpage

Modifying the color of all the text on your webpage can be done through the <body> tag.  Launch your text editor now and key in the next code.
<html>
<head>
<title>Colors</title>
</head>
<body text="brown" link="red" alink="green" vlink="orange">
<h3>I am a text with brown color.</h3>
Links:<br />
<a href="formatting.html">Formatting Your Webpage</a><br />
<a href="header.html">Header Tags</a><br />
<a href="hr.html">Horizontal Rule</a>
</body>
</html>

The code will be rendered in Google Chrome browser this way:

About the code:
  • The attribute text=”color” tells the browser to change the color of all the text on your webpage.
  • The attribute link=”color” tells the browser to change the color of all links on your webpage from the default color blue.
  • The attribute alink=”color” which means active link tells the browser to change the color of active link from the default color red. Active link color can be observed when you click and hold down the mouse pointer over the link.
  • The attribute vlink=”color” which means visited link tells the browser to change the color of all the links in the web page after having been visited.

Changing the Color of a Block of Text

Modifying the color of a block of text on your webpage can be done through the <font> tag. Even though <font> tag is already deprecated it is still important to give you an idea about the function of this tag. Let’s start modifying the color of block of text by launching your text editor and typing in the next code.

<html>
<head>
<title>Font Tag</title>
</head>
<body>
<font color="blue">This is blue.</font><br />
<font color="red">This is red. </font><br />
<font color="green" size="5" face="Arial Black, Gadget, 
sans-serif">This is green</font>
</body>
</html>

About the code:
  • The <font> tag is used to specify not just the font color but also the font size and font face of text.
  • The attribute “color” is used to specify the color of the text.
  • The attribute “size” is used to specify the size of text.
  • The attribute “face” is used to specify the typeface of the text.

NOTE: Strict version of HTML and XHTML requires web designers to use only class (to specify a class-name for an element), id (to specify a unique id for an element), style (to specify an inline style for an element) and title attributes. Instead of using align, width, size, noshade and other attributes, web designers require to use the cascading stylesheet and with the help of the class, id and style attributes in designing webpages. The font tag is already deprecated since HTML 4.01, W3C requires web designers not to use this tag anymore.

0 comments: