|
HTML Basic Tutorial
Lesson 5
Background Color
Background Image
Practice HTML (Use
it or Notepad)
Color
chart: Click here to chose color for your background.
Back ground Color:
Now let's see how to add background color in our html
document.
Please note so far we were puting codes inside the <body>
</body>tags.
Now for the bg color of the web page and background we will put code within
the <body> tag.
Ok our body tag is:
<body>
</body>
Now for background color the attribute is bgcolor
it will go inside the body tag.
And color code will be the value for bgcolor attribute. so it will be
bgcolor="pink"
Ok let's type our basic html tag and new attributes of <body>
tag in Notepad or Practice HTML.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body bgcolor="#FCD2FC">
<font size="3" color="red"
face="arial"> It is our text.</font>
</body>
</html> |
Now your page will look like this. Here you can see your
page color is pink and text is red.
You can use color name or hexadecimal (RGB) value for it. You can add
any color to your page.
Use color chart (top of the page) to get different color values.
Background Image:
Ok now let's try background image instead of bgcolor.
Save this background in your hard drive. To save right click (click
with right mouse button) on this image and click on save as. Now a pop
up box will open up save it in c: drive's Html folder which we created
earlier. Give file name as bg.gif or so. Ok so image file's address will
be c:/Html/bg.gif
Note: Always save your image file in .gif
or .jpg or .jpeg format, otherwise your image will not work
in web pages.
If you do not know how to save click
here to learn more about it. Method is almost the same.
Now let's see how our html code will look like for our background
image.
For background image our code will be <body background="
"> </body>
Please note we've replaced bgcolor by background and instead of color
name we'll add our image address or location were the file is.
Note: When you upload your files in server
the location of your image files also will change according to your page's
http:// address and according to your image files location.
It means you've to upload your image file also in server because server
will not be able to show your pictures from your local hard drive. We'll
learn it later in detail. so instead of your image file location c:/Html/bg.gif
it will be something like this..http://yourpage.com/images/bg.gif
or .http://yourpage.com/bg.gif
Let's again add our basic html tags.
Now type this html codes and save it in your notepad and look it
in your browser.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body background="c:/Html/bg.gif">
<font size="3" color="red"
face="arial"> It is our text.</font>
</body>
</html> |
When you save in Notepad Ex.
you save your file in c: drive, html folder and
file name lesson1.htm
Now to open this file in browser type in your browser something
like this c:\Html\lesson1.htm
or test it in our Practice HTML.
Your page will look like this in your browser.
Your page will look like this in Practice HTML
The same way you can add any desired image in your background.
|
