Make your own free website on
:: crazy8 #web_resources ::

Placing Images
Tutorial by
Mr. Baldy

Different webmasters see placing images difficult. If you follow some steps, it can be much easier. First of all, you need to know the exact location of the image. NOTE: It is best to have the image in the same folder where the document is, or in another folder called IMAGES or something, just to keep track of them. I personally keep them in the same directory. If you put them in the same directory, it is much easier when placing them. Also, you need to know the EXACT filename of the pic, not just "pic", but also the extension "pic.*", usually .gif or .jpg.

Now that you know the exact location of the images in relation to the HTML document ( EX: "pic.*" for in same dir... "../pic.*" for in dir one down... "images/pic.*" for dir inside current dir ), you can place it generally in the document.

First of all, you need the IMG ( Image ) tag:


Again, there is no ending tag, since it is an element, not an attribute. Now, you need to place the image's source ( SRC ):

<img src="pic.*">

Of course where "pic.*" is, you put the exact file in the exact directory. NOTE: Do not put the folder as it would show on your hard drive, because it won't work on the web. Put in the directory as it would show when you upload the page to the host. Another thing, when dealing with different directories, ALWAYS make this slash ( / ), instead of the ( \ ) one.

Open the page. If the pic doesn't show up, and there is a 'broken' pic shown, you have done something wrong. Either you have the SRC wrong, the filename wrong, or the pic is in a different directory as you wrote in.

Now then, another attribute you can add is the ALT item. It tells the text to be displayed when the image is loading and when you put your mouse over the pic.

<img src="pic.*" alt="Whatever">

It's good to put something descriptive in there, so viewers with auto-loading images turned off can view the ones they want.

There is an ALIGN embedded item, but I prefer to use the DIV tag.

Now on the the image border. Whatever number you put is like a HR around the image. It's good to set the border to 0, especially if you don't want that disgusting border on linked images. Just add this:

<img border="0">

Those are the important things to know about placing images. They are very widely used and can make a good site great. Even if you are good at making images, please do not jam pack tons of pics in one page. They take forever to load, and most people with lower-end machines will have to wait a long time, and usually give up. Please be reasonable.

<< back  |  top  |  next >>

. . . . . . . . . . . . . . . . . . . . . . .
All html, graphics, and javascript is © 1999 crazy8 #web_resources
All quake, quake 2, and quake arena content is © id software
All unreal content is © epic megagames, and half-life © valve software
Page designed by mr. baldy ( webmaster )
home tutorials free gfx design tips templates reviews consultation contact