WEB DESIGN TUTORIAL HTML PART-016

Web Design Tutorial HTML part-016

At first, Thank for my all Post Readers. Today HTML parts 16 post. This is Full HTML Web Page in the Tutorial. you can learn a full HTML web design it. I hope so. Let's start....

HTML Backgrounds

By default, your webpage background is white in color. You may not like it,
but no worries. HTML provides you following two good ways to decorate your
webpage background.

Html Background with Colors
Html Background with Images

Now let's see both the approaches one by one using appropriate examples.
Html Background with Colors
The bgcolor attribute is used to control the background of an HTML element,
specifically page body and table backgrounds. Following is the syntax to use

bgcolor attribute with any HTML tag.

<tagname bgcolor="color_value"...>

This color_value can be given in any of the following formats:


<table bgcolor="lime" >

<table bgcolor="#f1f1f1" >

<table bgcolor="rgb(0,0,120)" >

Example

Here are the examples to set background of an HTML tag:

Example
Here are the examples to set background of an HTML tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>

<table bgcolor="yellow" width="100%">
<tr><td>
This background is yellow
</td></tr>
</table>

<table bgcolor="#6666FF" width="100%">
<tr><td>
This background is sky blue
</td></tr>
</table>

<table bgcolor="rgb(255,0,255)" width="100%">
<tr><td>
This background is green
</td></tr>
</table>
</body>
</html>

This will produce following result:

This background is yellow

This background is sky blue

This background is green

Related Content WEB DESIGN TUTORIAL HTML PART-015

Html Background with Images

The background attribute can also be used to control the background of an
HTML element, specifically 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.
Note: The background attribute is deprecated and it is recommended to use
Style Sheet for background setting.

<tagname background="Image URL"...>

The most frequently used image formats are JPEG, GIF and PNG images.
Example
Here are the examples to set background images of a table.

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>

<table background="/images/html.gif" width="100%" height="100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>

This will produce following result:

This background is filled up with HTML image.

Patterned & Transparent Backgrounds

You might have seen many pattern or transparent backgrounds on various
websites. This simply can be achieved by using patterned image or
transparent image in the background.
It is suggested that while creating patterns or transparent GIF or PNG images,
use the smallest dimensions possible even as small as 1x1 to avoid slow
loading.
Example

Here are the examples to set background pattern of a table:

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>

<table background="/images/pattern1.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>

<table background="/images/pattern2.gif" width="100%" height="100">
<tr><td>
This background is filled up with a pattern image.
</td></tr>
</table>
</body>
</html>

This will produce following result:

This background is filled up with a pattern image.

.........................................................................Thank for All Reader

Featured post

How to get 1000 up Visitor per video on your Youtube channel Make Money part 2