There's one basic code for adding an image to your page. First of all, however, you'll
have to know where the image is located on your computer or the Internet. If you
have your webpage up online, the image must be uploaded to your online account (each
website host has a different way of having you do this, so I'm afraid I can't be much
help here). Then you must be sure to indicate the correct folder for the image. I'll go
into further detail below.
<IMG SRC="imagename.ext"> If the image is in the same folder as the webpage where
the image is being shown, just substitute the image name into the code. Be sure to add
the extension! .gif and .jpg/.jpeg are the only two types of images you can use on the Net.
If the image is not in the same folder as the webpage file, you must indicate which folder
the image is in. If the image is in a folder inside the folder where your webpage
file is stored, use the following code:
Perhaps it is in another folder inside that. Then use:
And so on. However, if the image is in a folder above the folder in which your
image file has been stored, you must do the following:
../ will cause the computer to jump one folder above the current folder when
looking for the image. If the webpage file is inside a folder which is inside another
folder which is inside another folder in which the image is stored, you must type
Now, suppose you have three folders, each one inside the one before it. In the third is
your webpage file. But then you add a fourth folder, which is also inside the top
folder, and put the image in there. First you must make the computer jump up to the top
folder, and then go inside the last folder. So you say:
Again, if this isn't clear, just try doing it and see if you can figure it out.
So now you know how to add an image to your page. There is, however, one more way to put
an image on your page, and that is to link that image to another image on the Net. Most people dislike it when you link to images on their page, as it
takes up bandwidth space. Most have safeguards set up to keep you from doing this. Also,
if you link to an image on someone else's page and they change the filename or move the
image, it will no longer appear on your page. Be sure to obtain permission from someone
before linking to a picture on their page. Most will ask you to download the image
instead (you can do this by simply right-clicking on the image and selecting "Save Image As..."
from the list that pops up) and then upload it to your own webpage host. This is generally
the smart thing to do anyway. However, if you have obtained someone's permission to link
to their image and for some reason you cannot download it instead, simply type the
complete web address to the image in place of the imagename. For instance:
So, now that you know how to put an image on your page, how do you place the image where
you want it? First of all, you can align text beside image to the right, left, top, or
middle of the space around the image by using this code:
<IMG SRC="imagename.ext" ALIGN="xxxx">
Type in top, middle, left, or right for the x's.
<IMG SRC="imagename.ext" VSPACE=x> Putting a number in for x will create a space
that many pixels tall above and below the image.
<IMG SRC="imagename.ext" HSPACE=x> This does the same but puts the spaces on either
side of the image.
You can use some of the codes we've already covered to arrange the image's position on
the page. <CENTER> centers the image, which will otherwise be aligned to the left.
To align the image to the right, however, you must learn about tables, which come later
in my set of tutorials.
You can also control the size of the image, shrinking or stretching it. However, using
HTML to do this--especially stretching--gives the image a rough, grainy look. If you
want to adjust an image's size, I suggest an image editor such as Paint Shop Pro. For
small changes, though, you can use the following codes.
<IMG SRC="imagename.ext" WIDTH=xx%> Substitute numbers for the x's. Adding the
percent sign will make the image that percentage of its original width. Without the
percent sign, the image will be that many pixels wide.
<IMG SRC="imagename.ext" HEIGHT=xx%> This does the same for the height of the image.
Again, remember you can combine the codes.
Last but not least, you may have noticed that many pages have images as backgrounds,
instead of merely background colors. You can put an image as a background on your page
by adding another little line into your "Body" tag. It should look like this:
You can use this code in combination with any other inserts into the "Body" tag we've
already discussed (back in the "Colors" tutorial). Remember, however, that your text
must stand out well from the image, and that bright background images may give your
viewer a headache. So be careful!