Basic Guide to HTML

Images please

Guess what its another tag!

<IMG SRC="path/file.xxx" WIDTH="" HEIGHT="" ALT="" BORDER="" ALIGN="">

Looks horrible doesn't it. Stop panicing its not that bad.

Lets look at the separate bits..

IMG
This is simply saying this is an image.
SRC=""
This is where the browser finds that image. SRC stands for source and gets used for lots of things in the more advanced HTML. It is just like the path/file.xxx of the html file.
Ok a few quick tips here.
  • Put all your images in a sub-directory called images. This means that no matter where you are in your site you will be able to find the images easily.
  • And make sure the xxx is the right one or it the browser will not be able to find the image. Most web images are either .gif or .jpg as every one can deal with then (what they call industry standards.) Try to avoid obscure formats as some browsers will not be able to use them.
Like the HREF it is possible to have absolute SRC.
WIDTH="" HEIGHT=""
This tells the browser how large the image should be. Usually this is the number of pixels,Info you should be able to get from the art package you made the picture in
However you can use percentages. In this case it is the percentage of the window variable this an image with a WIDTH=50% will take up half of the browser window.
Ok. confession time. You don't actually need this information in your <IMG SRC="">, but if you don;t included it the rest of your web page can not be loaded until the image has arrived. If the image is very large and the world wide wait up to its usual snail pace this could leave people waiting a long time to read what you have to say. At least with the width and heigh set they can read your page whilst they wait for the images to appear
ALT=""
ALT stands for alternative. It has a number of uses, but the most important and helpful is to include a brief description of the image. This means that whilst people are waiting for the image to down load you can give them some clue as to what its a picture of.. and if its worth waiting for.
It is also useful as some people use browsers with out images (for example braille browsers used by the blind) so this way they know what they are missing.
BORDER=""
Border command makes a box around the image. The higher the number the thicker the line of the box.
example imageborder="0"
 example imageborder="1"
example imageborder="2"
 example imageborder="3"
ALIGN=""
Similar to the align instruction we used with the paragraph tag. But the image align is more wide ranging.
example imageleft - Puts the image to the left and the text to the right.
example imageright - Puts the image to the right and the text to the left.
example imagetop - Aligns the text with the top of the image.
example imageabsmiddle - Aligns the text with the middle of the image
example imagebottom - Aligns the text with the bottom of the image.
There are others, but these are really the only ones you will need.

The bad news is that align =center does not work. If you want an image in the middle of your page you have to surround it with the <CENTER> </CENTER> Tag. to get this effect.

example image

This tag can also be used with <P> tags if you want large number of things in the middle of the page.

Background images

There is another place where images are used. And these needs going back to the body tag

<Body background="path/file.xxx">

So how is this going to look?

The path/file.xxx is just the same as the ones above. This image will then be tiled to make the background of the page.
The mechanics of this is easy, but using background images can be dangerous.

  • They have to be simple enough so they do not make the text impossible to read.
  • It is also important to keep them small so they load quickly.
  • It can be hard to find a single text colour that works over all the colours you use in your image.
  • It helps to set the background colour of the page to the same basic colour of the images, so that the text can still be read even if the image does not load for some reason.

However despite these 'dangers' a well designed back ground image can be very effective. Just make sure it tesalates well or the edges will show and it will look strange.

So thats the basics of images. Easy really isn't it.
Ok I'm assuming that you have looked at the source of these pages and you will have noticed that there are one or tow things I haven't told you about. Don;t worry I'm not going to keep this to my self...
Lists and tables and things.