To add an image to your Web page, you'll have to provide the browser with the location of an image file. There are many types of image files on the Web, but two of the most common are GIF files, which end in .gif, and JPEG files, ending in .jpg. Note: make sure that whenever you use text or images from the Web, you follow the guidelines for use posted by the Web site's creator.

The <IMG SRC=" . . . "> tag tells the browser what the image source is, letting it know what file to retrieve. When you're constructing a web page, it's often easiest to keep the images in the same directory as your HTML document. For example, if you had an image file in your directory called "image.gif," then to insert it into your Web page you would include the line:

<IMG SRC="image.gif">

If the image you want to display is in another directory, the process is only slightly more complicated. You'll have to tell the browser exactly what directory the image is stored in. For example, assume "image.gif" is not in the directory containing your HTML document, but is instead in another directory, right next to it on the desktop, called "graphics." In order for the browser to find the file, you will have to add the name of the directory where "image.gif" is located:

<IMG SRC = "graphics/image.gif">

By using this format you can direct the browser to an image in almost any directory, even one that's located on another server. In general, however, your life will be much easier if you either 1) store your images in the same file as your HTML document. This may be best for small, simple sites; or 2) store all your graphics in a single directory, with a name like "graphics," that's easy to locate and add to the path name in the tag. This method is common with larger, more complex sites, and where a designer wants to reuse a graphic in multiple pages on a site.

SoYouWanna know more? Check out our full-length article SYW design your own web page?