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:
<IMG SRC="foldername/imagename.ext">
Perhaps it is in another folder inside that. Then use:
<IMG SRC="foldername/secondfolder/imagename.ext">
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:
<IMG SRC="../imagename.ext">
../ 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 ../ twice:
<IMG SRC="../../imagename.ext">
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:
<IMG SRC="../../imagefoldername/imagename.ext">
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. WARNING!!! 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:
<IMG SRC="http://www.website.com/Folder1/Folder2/imagename.jpg">
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:
<BODY BACKGROUND="imagename.ext">
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!