Lists << Images >> Links
Images, like colors, create web pages that stand out and get noticed. They can also be the "make it or break it" factor. You don't have to be an expert at drawing. Just imagine what you would like to see on your page. Most images are already available to use through the internet, CD ROM, or other media sources. Anyone with a scanner or image software has an even larger resource to create and edit images.

Images, graphics, pictures, etc.. There are so many different ways to describe them. For the purposes of these tutorials, I will refer to them as images.


There are two main supported types of images. GIF and JPG. There are many other image types such as BMP, TIFF and PNG, but they have limited or no support with some browsers.

GIF Graphic Interchage Format.
Maximum 256 colors.
Best used for created images such as icons, buttons, etc.
JPG Joint Photographic expert Group.
Able to contain millions of colors.
Best used for photographs.

You CANNOT re-name an image file of a different extension type to change it. You MUST use an image editing software to convert image file types. Re-naming the file type only changes the surface name. Underneath it remains the same type of image. If you do not have an image editing software, you can download a trial version of Jascs PaintShop Pro or you can try Adobe PhotoShop.

Saving Images

Saving images from the internet is done by :

  1. Place your mouse pointer over the desired image.
  2. "right click" your mouse.
  3. "Save Image As..."
  4. Name and save the image in a place you will remember.
Many images on the internet are FREE and available to be saved and used. It is best to e-mail the site's designer and ask permission to use their images. Most people don't mind the copy of images, but sometimes ask for a link back to their site in exchange. There are some images that have a copyright on them. These definitely should NOT be copied without approval.

Using Images

The IMAGE tag is used in the BODY of web page coding.

<IMG SRC="sampleimage.gif">

IMGIMaGe. An image will be placed on the web page.
SRCSouRCe of the image. The image file name and extension.

The SRC acts like a pointer. It shows the IMG tag where to find the image for display. If the image is located in a sub-directory (or sub-folder), the path MUST be stated in the reference field before the image name.

If your image is in a sub-directory called "pictures", the SRC must show that :
<img src="pictures/car.gif">


Any word in an SRC path that ends with a forward slash / is considered a sub-directory or sub-folder of the current directory where the HTML file is located. When the SRC gets to the end word (no forward slash after it), it knows this is a file to display.

SRC will show the image on your page, but to make it function better, some properties should be assigned.

WIDTHPixel width of the image.
HEIGHTPixel height of the image.
ALTAlternate description if the image does not display.
BORDERPixel thickness of a border around the image.

<img src"car.gif" width="160" height="70" border="2" alt="car picture">

car picture

These properties are not essential for images, but they do help the browser pre-determine what is going into that particular place.

The WIDTH and HEIGHT properties can be adjusted to change the size of the image on the page, but it is NOT recommended. Anything other than the correct settings tend to produce a blurry or skewed image. Image editing software is the best way to create the image in a new size without degrading it. If the WIDTH and HEIGHT properties are not declared, the default will determine the correct settings and use them.

Here's my car picture at WIDTH 400 and HEIGHT 100.

car picture

BORDER is the pixel width outline around the image.

ALT or ALTernate text will display while the image is loading or if the browser does not have image capability. If you place your mouse pointer over any internet image, you will usually see the ALT message appear.

Images can be used for the BACKGROUND property. This setting is found in the <BODY> tag. The image will be "tiled" or repeated continuously to the end of the web page. Any text or images in the web page area will show "on top" of the background.

<title> Example </title>

<body background="car.gif">

main code area


Click Here to see example

As you see, the BACKGROUND property is entered into the current BODY tag. DO NOT use a new BODY tag. Having multiple BODY tags will confuse the browser and only a blank page will show. A web page is allowed only one set of BODY tags.

Note : It is a great idea to have both a BGCOLOR and a BACKGROUND setting for your pages. If the visitor does not have image capabilities, the color will show for them.

Note : Do not use a distracting image as a background. It is there to support the contents, not over-come them.

Note : Be sure to load your images to the online server and the IMG SRC or BACKGROUND is pointing at the correct area to find them.

Note : Be sure to check the spelling and CaSe LeTtErInG of the IMG tag and the actual image file. They MUST match exactly!

Other image properties, not commonly used, are :

ALIGN - Aligns the image on the page.
- Values can be LEFT or RIGHT.
HSPACE - A space border along the sides of the image.
- Specified in pixels.
VSPACE - A space border along the top and bottom of the image.
- Specified in pixels.

Using the ALIGN property in an IMG tag is not the same as a regular ALIGN. It will place the image to one side, but the next text or object will be placed on the next available space instead of the next available line. This creates an illusion of some text or objects beside the aligned image. This can be confusing and hard way to create this effect. An easier and more productive way is to use a TABLE format.

HSPACE and VSPACE are self explanitory. They create some 'white space' around the image Horizontally and Vertically. Similar to creating a border buffer.
Lists << Images >> Links

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads