NOTE: In the following article, all html tags have been bracked with [ and ] instead of the standard "less than" (<) and "greater than" (>) signs. When doing your own html, remember to replace the brackets with the caret signs.

ONCE upon a time, in the dark ages of the Early Internet, there were no images on the web pages (in fact, this is poetic - no images, on the web pages). There were just links. Hyperlinks, hyperlinks everywhere, and not an image to click.

But as the Internet and the browsing technology improved, web developers were able to incorporate images, and as the HTML matured, images could also be used as Hyperlinks. And now some developers develop imageless web sites just as some 'arty' filmmakers want to make black and white silent movies.

Graphics enhance the look of a page, they make it more informative (One picture is worth a thousand words, etc.), and they give your page an identity.

But don't go overboard - the total size of one page should not, ideally, exceed 25 KB. There are many other issues involved with web-based graphics, but at this moment, we are just covering the HTMLization of graphic files. Assuming that you know a wee bit about basic HTML Tags, you would use the following TAG definition to insert an image into a web page:

[img src="graphics/imaginary.gif"]

Ok, try to use tags in the small caps, as soon there will come a time when uppercased tags will be loathed by the browsing and developing protocols.

You notice that an [img] tag does not have an accompanying [/img] tag, which, almost all HTML tags have. 'src' is the source of the image file you feel like inserting. Take care, that if the image file is not stored in the same folder where your web page is, you specify the complete path of the file.

Here, I have used the path 'graphics/imaginary.gif', as by habit, I store all my image files in a folder called 'graphics'. Of course first I create this folder on the server, which, tells you that you can name the folder anything as long as you can use it.

My experience has taught me another thing: be careful about getting mixed up with uppercase and lowercase alphabets while naming your files and folders. 'imaginary.gif' is different from 'IMAGINARY.GIF' or 'Imaginary.gif'. Unix, especially, is very temperamental about such issues and hence gives you a royal snub at the slightest aberration.

Moving further, you can add the 'width' and 'height' attributes too, to the image tag in the following manner: [img src="graphics/imaginary.gif" width="115" height="100"]

This you can use for displaying thumbnails of larger images. It is advisable to specify the dimensions of the image because then the browser loads them faster.

Two more attributes are "align", valign and "alt". "align" can have the following values: 1. center, 2. left, 3. right..

"valign" is for verticle alignment and can hold values such as 1. top, 2. bottom, 3. absmiddle.

But do remember if the alignment is coming from the top (a centrally aligned table cell in which you are inserting the image, or a left aligned[div] tag), the "align" attribute of the [img] tag doesn't work.

These are the elementary values that are used by 99.99% web pages. There are a couple of geeky values I cannot recall.

The 'alt' attribute is used to provide the 'alternate' text. What happens is, some people don't appreciate your inclination towards graphics. They turn graphics off on their browser settings so that image files are not loaded - this speeds up the loading of the web page. So in such scenario, the text supplied within the 'alt' tag shows up, and tells the visitor what the image cannot.

So now we re-write the [img] tag using all the attributes we have learnt here.

[img src="graphics/imaginary.gif" width="115" height="100" align="left" valign="absmiddle" alt="There is an image of a stripper here!"]

Images can also be used in place of the text being displayed as a hyperlink in the following manner:

[a href="http://www.sheddingpets.net"][img src= "graphics/imaginary.gif" border="0" width="115" height="100" align="left" valign="absmiddle" alt="There is an image of a stripper here!"[/a]

Quietly I've introduced another attribute in the [img] tag here, viz., 'border'. Actually, when you use an image as a hyperlink, it is enclosed within an annoying border if you do not use border="0".

There are mainly two graphic formats used for the web pages: .GIF and .JPG. Other formats, like .WMF, .PNG, .BMP, .TTF are there, but they are not very popular. Vector graphics (probably .PNG) are going to be used extensively in the near future, as they don't distort with increase-decrease in size.

.GIF files are used for basic animations and images with transparent backgrounds.

.JPG files are used for photographs (for instance, a stripper).

Well, by now you know how to utilize the potential of graphics while building a web page. You can create your own graphic images (you can use tools like Photo Shop, Paint Shop Pro, Corel Draw, etc.,), get them scanned, or steal them from other web sites. A safer option, if right now you can't create your own images and just want to use them in your HTML, is to go to Google and search for "free graphic images", or something like that. There are hordes of sites eagerly giving out free images.

Again, do not freak out on graphic files. Use them consciously, and where there are necessary. Keep in mind that if your web page has good information and if the visitors are coming for that information, don't make them load twenty images before they can view the information. If it takes two long, they'll leave.

So all the best, and as usual, you can write to me if you want to know more.

Copyright 2001 Amrit Hallan

Amrit Hallan is a freelance web designer. To visit his web site and subcribe to his newsletter click on Amrit

• Backup -
  mysteries
  revealed
• Finding -
  files fast.
• Organise -
  your PC.
• Build -
  your own
  website

• Design sites
• Learn about scripts
• ...forms or tables
• Meta Tags
• Understand FTP
• Accept payments
• Write good copy
• ..and lots more