Playing with Color

Color plays a very important role in designing an HTML page. It makes items stand out and divides the page into different sections. It creates the look and feel of the Web site and provides an opportunity for you to show off your creativity.

In this chapter you will:

Change the background color of a Web page
Change the color of a text

At the end of this chapter your Web pages will look as follows:

Background color of a Web page - homePage.html file

To add background color to the homePage.html Web page, do the following:

Open Windows Explorer.
Go to drive C, select justin folder where the homePage.html file is located.
Double click the homePage.html file to view it on the browser.

Viewing the source code of the HTML page

Return to Windows Explorer, highlight the file about.html, right-click with the mouse and choose Open With, and then choose Notepad.

Typing the content

In Notepad, position the cursor on the <body> tag between the letter y and the symbol >.
Change the background color of the homePage.html to a yellow-orange color, whose RGB is #FBE995.
```
<body bgcolor="#FBE995">
```

Note - Computer monitors display in RGB mode: R = Red, G = Green, B = Blue. The #RRGGBB is NOT case sensitive, so you can write #FBE995 or #fbe995 and even #FbE995.

To create background color for a Web page, use the bgcolor attribute of the <body> tag. Determine the actual color either by denoting the RGB or by denoting the actual name of the color: red, silver, olive, navy, aqua, black, blue, fuchsia, gray, green, teal, lime, purple, yellow, maroon, white.

black	silver	gray	white	maroon	red	purple	fuchsia
green	lime	olive	yellow	navy	blue	teal	aqua

Font color of a text

Change the color of the heading:justin's site to navy.
```
<h2><font color="navy">justin's site</font></h2>
```
Save the changes you made in the homePage.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the homePage.html file.

Figure 6.1:The Home page with background color.
Go to the Notepad window containing the homePage.html content.
In the homePage.html file, change the color of the word "grandfather" into teal (a color between green and cyan).
```
<font color="teal">grandfather</font>
```

Format the word grandfather in bold:

<font color="teal"><b>grandfather</b></font>

Save the changes you made in the homePage.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the homePage.html file.
Close the browser window displaying the homePage.html file.
Close the Notepad window displaying the homePage.html file.

Background color of a Web page - about.html file

Add a background color to the about.html Web page. This is the same procedure that you followed with homePage.html file.

Go to Windows Explorer.
Select the justin folder on drive C where the about.html file is located.
Double click on the about.html file to view it on the browser.

Viewing the source code of the HTML page

Return to Windows Explorer, highlight the file about.html, right-click with the mouse and choose Open With, and then choose Notepad.

Typing the content

In Notepad, place the cursor on the <body> tag.
Change the background color of the homePage.html to a yellow-orange color, whose RGB is #FBE995.
```
<body bgcolor="#FBE995">
```

Font color of a text

Change the color of the heading (the text: About)to navy.
```
<h2>
<font color="navy">About</font>
</h2>
```
Save the changes you made in the about.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the about.html file (see figure 6.2).

Figure 6.2: The About Web page with background color.
Close the browser window displaying the about.html file.
Close the Notepad window displaying the about.html file.

Background color of a Web page - links.html file

Add a background color to the links.html Web page. This is the same procedure that you followed with homePage.html file.

Go to Windows Explorer.
Go to drive C and navigate to the justin folder where the HTML file you built, by the name of links.html, is located.
Double click on the links.html file to view it on the browser.

Viewing the source code of the HTML page

Return to Windows Explorer, highlight the file links.html, right-click with the mouse and choose Open With, and then choose Notepad.

Typing the content

In Notepad, position the cursor on the <body>tag.
Change the background color of the links.html Web page to a yellow-orange color, whose RGB is #FBE995.
```
<body bgcolor="#FBE995">
```

Font color of a text

Change the color of the heading, the text: Links, to navy.
```
<h2>
<font color="navy">Links</font>
</h2>
```
Save the changes you made in the links.html file.
Go to the browser window and click the Refresh\Reload button to view the changes you made in the links.html file.

Figure 6.3: The Links Web page with background color.
Close the browser window displaying the links.html file.
Close the Notepad window displaying the links.html file.

Part I

Part II