Guidance portal

World of Guidance and Education

Insert Background Color

In this chapter we will learn to change background colour on webpages. The default background color is white which may not be suitable for the contents of webpage. It might be possible the contents of webpage requires different parts of webpage to have differnet background colors. For example webpages of games websites or entertainment websites are colorful pages.

Lets start by inserting "blue" background on our whole website, then changing the background of diffrent parts of the web page with different colors.

The syntax of background color is shown below.

     <body bgcolor="#0099FF">

bgcolor shows the color of body (background). "#0099FF" is the progamming code of blue color. You may use any color of your choice. The programming code of most common colors is given here.

Now lets write the compleate code and see the disply on browser.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body bgcolor="#0099FF">
    </body>
    </html>



Note

If you are designing a web site for educational metarial then use same background for all pages and avoid differnt colors.


    Browser view

Now lets make a colorful webpage having diffrent backgrounds on the same webpage. The concept for making such formatted webpage is as follows.

Concept

Consider the whole page as a big table (table has been explained in previous chapters). Give the whole table a background color. Then define the row and columns in the table. Given the color of your desire to each column of the row. Close the columns, rows and eventually the table. This has been shown in the below code as well.

See the code carefully.

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body bgcolor="#CCCCCC">
    <p><table width="545">
    <tr>
    <td width="137" height="33" bgcolor="#9966FF">your text (content)</td>
    <td width="289" bgcolor="#FFFFFF">your text (content)</td>
    <td width="103" bgcolor="#6666FF">your text (content)</td>
    </tr>
    <tr>
    <td height="203" bgcolor="#99CCFF">your text (content)</td>
    <td bgcolor="#FFFFFF">your text (content)</td>
    <td bgcolor="#FF99FF">your text (content)</td>
    </tr>
    <tr>
    <td height="51" bgcolor="#CCFFCC">your text (content)</td>
    <td bgcolor="#CCFFCC">your text (content)</td>
    <td bgcolor="#CCFFCC">your text (content)</td>
    </tr>
    </table></p>

    </body>
    </html>

     

Note

Without table you can not insert the different backgrounds on you webpage.

    browser view

 

comments powered by Disqus