Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter
*
 

Tutorials
Cookies
ASP
Advanced HTML
Frames & Tables
.htaccess
Rounded Table Corners
Flash 5
FTP
Beginners
Javascript
PHP/MySQL
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics
XHTML
Stylesheets
XML
PHP
*

125x125

Related Links
More HTML - The Basics Sites
*

 
Sitemap | Contact | Link To Us | Advertise
Report A Problem

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