So, have you been wondering how to add an image to your page? Well, let's take a look at the image tag:

<IMG SRC="image.gif">

The IMG stands for image. The SRC stands for source. The source of the image is going to be the net address of the image. Most often, you will be able to just type the filename of the image here, like this:

<IMG SRC="image.gif">

The filename does not have to end with .gif . You could also use a .jpg file as well. These are the two most common image file extensions used on the internet. If you have images in other file formats, you need to convert them to .gif or .jpg . This can be done with most image editing programs.

Now, if your images are in a directory other than the one your html document is in, you will want to link to it using the full address of the image. So, if your image is located at http://www.disney.com/pictures/image.jpg , you would use this url as the image source:

<IMG SRC="http://www.disney.com/pictures/image.jpg">

If you aren't sure, go ahead and use the full address just to be sure it will work correctly.

Note: It is considered bad practice to link to an image on someone else's site, as it can affect their server's resources, as well as making it very slow to load. If you have the right to use their image, it is better to copy it to an images folder within your local site and link to that.

Now let's work with a real example. One image I have on this site is called "next.jpg". The address for the image is: http://www.mysite.com/images/next.jpg . If my image and html file were in the same directory, I would type:

<IMG SRC="next.jpg">

Otherwise, I would use the full internet address, like this:

<IMG SRC="http://www.mysite.com/images/next.jpg">

Either option would display the image on the page, aligned to the left, like this:

If you want to center the image on the page, you would place the CENTER tag around the image tag, like this:

<DIV Align="center"><IMG SRC="http://www.mysite.com/images/next.jpg"></DIV>

This will place the image in the center of the screen:

Now, this doesn't give us everything we could possibly want, but it will allow you to add an image to your page on its own line. More on working with images follow in the next few tutorials.