| |
|
|
HTML - The Basics Tutorial
Part 5 - Images & Backgrounds
Introduction
images are a very important part of an HTML page. They make it different from an e-mail or just a printed page. They can be used as a design element to make pages look better and can be used as the background to make the page more interesting.
Images
Images are added to pages very easily. All you need to do is use an <img> tag. You must use some variables with it, though, or it will show:
![]()
Which is not very helpful. You must use the src= variable to choose the image to insert. Like a hyperlink this can either be a relative reference or a direct reference including the site's url. For example:
<img src="http://www.gowansnet.com/images/gnet.gif">
If you include an image in a hyperlink it will, by default, display a blue border round the image. To turn this off you should use the:
border="0"
variable for the image.
Resizing Images
You can resize images inside the browser using two other image variables - width and height. Even if you do not want to resize the image it is useful to specify its size using these variables as it will put a placeholder in the browser and the page will not change much when the image is loaded.
These tags can also be use to make an image bigger or smaller. All measurements are in pixels. Here is an example:
<img src="http://www.gowansnet.com/images/gnet.gif" border="0" width="80" height="30">
or
<img src="http://www.gowansnet.com/images/gnet.gif" border="0" width="10" height="10">
It is good to remember that it is probably better to resize an image in an image editing program if you are making it smaller. This is because the smaller image will have a smaller file size and will load quicker. This would not be the case if you resized it in the browser.
Alt
The final variable of an image is the alt variable. This tells the browser what the alternative text for an image should be if the browser has images turned off. It is used like this:
<img src="http://www.gowansnet.com/images/gnet.gif" alt="The Gowansnet Logo">
Finally you should also remember to use gif or jpeg images as the file sizes are much smaller.
Background Colors
You can change the background color of the page using the bgcolor variable of the <body> tag. It is used like this:
<body bgcolor="#0000FF">
which would set the background color as blue. You could also use an HTML color word.
This is a very simple tag to use as there is really no more to it. You should always remember to ONLY use a light color text on a dark background or a light color text on a dark background. NEVER use blue on red or red on blue. It is generally thought that a white background with black text is best.
Background Images
Background images can be placed on a web page. A background image is an image which is tiled behind the text. It is done using another variable of the <body> tag. It is background and it is used like this:
<body background="myimage.gif">
It is sometimes a good idea to include a background color as well so that people can read the text on the right color before the background image has loaded. Again, you should remember only to use contrasting colors.
Summary
That is the end of this tutorial. You have learnt how to create an HTML page with formatted text split into paragraphs, insert images, link between pages and link to different parts of you
r page. Watch out for our tutorials on how to create frames and tables.
©
1999 - 2001 FreeWebmasterHelp.com
| |
