Html Tutorial Lesson 5: Adding Colours to a Web page

[Lesson 4]<<[Contents]>>[Lesson 6]

Lesson 5: Adding Colours to a Web page

Adding colors to your web pages could achieve certain visual effect and make them more appealing. However, you should select colours carefully and do not overuse them. You can add color to your web page background and the text as well.

5.1 Adding Colour to the Background

You can specify the color of the page’s background using the bgcolor attribute  of the body element, as shown below:

<body bgcolor=color>

The color attribute can be specified using normal words like red, yellow, blue etc. or by using hexadecimal codes. Hexadecimal is a base 16 number system. Hexadecimal uses A for decimal 10, B for decimal 11, C for decimal 12, D for decimal 13, E for decimal 14 and F for decimal 15. Every color code in HTML is made up of 6 hexadecimal digits, from 000000 to FFFFFF. The hexadecimal codes might seem very complex, however, they actually make up of combination of three primary colors, i.e. red, green and blue(RGB). The last two digits specify the amount of red color, the middle two digits specify the amount of green color and the first two digits specify the amount of blue color.

For example:

0000FF=maximum red            00FF00=maximum green      FF0000=maximum blue.

For other combinations, click here for the RGB color codes.

Now, try out the following example:

Example 5.1

<html>
<head>
<title>Background Color</title>
</head>
<body bgcolor=cyan>
The background color of this web page is cyan. You can change the background color anytime by changing the color attribute specified by the bgcolor code. Try using the hexadecimal codes like bgcolor=”#ff00cc”.
</body>
</html>

Copy and paste the above codes to your notepad and save as bgcolor.html.

The Output is as shown below:

The background color of this web page is cyan. You can change the background color anytime by changing the color attribute specified by the bgcolor code. Try using the hexadecimal codes like bgcolor=”ff00cc”.

 

5.2 Adding color to the text.

5.2.1 Specifying  the Color of the Normal Text

You can specify the color of the normal text  (the default text is black) using the text attribute of the body element, as shown below:

<body bgcolor=”blue” text=”white”>

You may use normal words for the color attribute or use hexadecimal notation.

Now, try the following example

Example 5.2

<html> <head>
<title>Text color</title>
</head>
<body bgcolor=”blue” text=”#ffffcc”>
The text color can be formatted using the text=”#color code”. It is important that the color of the text is not the same as the background color, otherwise you won’t be able to see the words.
</body>
</html>

Copy and paste the above codes to your notepad and save the file as txtcolor.html

The output is as shown below:

The text color can be formatted using the text=”#color code”. It is important that the color of the text is not the same as the background color, otherwise you won’t be able to see the words.

 

5.2.2 Formatting  Individual Font Color with the Font Tag

If you wish to add color to an individual character, word, sentence or paragraph, you may use the font tag. Font tag can also control font size and typeface of fonts.

The codes are as follows:

<font color=red>Red color text</font>
<font size=1 color=blue>Blue text with font size 1</font>
<font face=”Times New Roman”>Text in Time News Roman</font>

Now, copy the following codes and paste them into your notepad and save the file as font.html.

Example 5.3

<html>
<head>
<title>Manipulaton of Fonts</title>
</head>
<body bgcolor=”#ccffff”  text=”blue”>
<font color=”red “size=”4″>Manipulation of </font><font color=”brown” size=4>Fonts</font>
<hr>
<p>
<font color=”green” face=”Arial”  size=2>You can manipulate font color , size and font type using
the font tags</font>.<font color=”#aaaa00″ size=”2″ face=”Times New Roman”>It can be done fairly
easily by anybody. Most important you must try it out yourself and dare to experiment with
anything.</font>
</p>
<hr>
This part of the text will appear blue.
</body>
</html>

The output is show below:

Manipulation of Fonts


You can manipulate font color , size and font type using
the font tags
.It can be done fairly
easily by anybody. Most important you must try it out yourself and dare to experiment with
anything.


This part of the text will appear blue.

 

[Lesson 4]<<[Contents]>>[Lesson 6]