Saturday, October 14, 2017

Html Backgrounds

Hello guys! morning and welcome to this tutorial, in my last tutorial i talked about HTML blocks and the types of HTML blocks available, in this tutorial am gonna be talking about HTML backgrounds.
By default, your webpage background is white in color, i know you won't like it and that why we gonna discuss how to change this default background color to any other color of our choice.
HTML provides you with two good ways of decorating your webpage background.

1.            HTML Background with Colors
2.            HTML Background with Images

Now lets quickly take a look at both methods mentioned above with an appropriate example.

Html Background with Colors  
The bgcolor attribute is used to control the background of the HTML element, specifically the HTML page body and table backgrounds. Following is the syntax to use bgcolor attribute with any HTML tag.
<tagname  bgcolor="color_value" ...>
 The color_value can be given in any of the following formats;
<! First format  -  use color name -->
<table bgcolor="orange" >

<!-- Second format  - use hexadecimal value -->
<table bgcolor="#000000" >

<!-- Third format  -  use color value in RGB terms-->
<table bgcolor="rgb(0,0,120)" >

Note that this are just formats to use and not an actual example, now lets take a look at the example below.

Example 
<!DOCTYPE html>
<html>
<head>
<title>Background Colors</title>
</head>
<body>
<!-- First format  -  use of color name -->
<table bgcolor="green" width="80%">
<tr>
<td>This background is green</td>
</tr>
</table>

<!---- Second format -  use of hexadecimal value-->
<table bgcolor="#6666FF" width="80%">
<tr>
<td>This background is sky blue</td>
</tr>
</table>


<!---- Third format -  use of RGB values-->
<table bgcolor="rgb(255,0,255)" width="80%">
<tr>
<td>This background is green</td>
</tr>
</table>

</body>
</html>

You can try the above example to see for your self how this formats works and feel free to ask your questions, they will be attended to as soon as possible.
Now lets move to how to use images as background.

Html Background with Images
The background attribute can also be used to control the background of a HTML element, specifically a page body and table backgrounds. You can specify an image to set background of your HTML page or table. Following is the syntax to use background attribute with any HTML tag.
<tagname background="image url"....>
The most frequently used image formats are JPEG, GIF and PNG images. Now lets look at the example below.

Example
 <!DOCTYPE html>
<html>
<head>
<title>Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background="/images/html.gif"  width="80%"  height="70">
<!--   Note the url specified above is just for the purpose of this example, you should specify the url of the image you want to make use of from your computer -->
<tr>
<td>This background is filled with HTML images</td>
</tr> 
</table>

</body>
</html> 
You can practice using your text editor for better understanding and feel free to ask questions.

Patterned and Transparent Backgrounds
You might have seen many pattern or transparent backgrounds on various websites. This can be simply archieved by using patterned or transparent image in the background.
It is adviced while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible even as small as 1*1 to avoid slow loading.

Example
<!DOCTYPE html>
<html>
<head>
<title>Background Images</title>
</head>
<body>
<!-- Set table background using pattern -->
<table background="/images/pattern.gif"  width="80%"  height="70">
<!--   Note the url specified above is just for the purpose of this example, you should specify the url of the image you want to make use of from your computer -->
<tr>
<td>This background is filled with a pattern image</td>
</tr> 
</table>

</body>
</html> 
You can also try the above code out using your text editor.
Alright guys thats it for this tutorial, see you guys in my next tutorial,bye for now.


Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image LinksHtml Frames , Html Iframes , Html Blocks
 
Share:

0 comments:

Post a Comment