Using HTML code to add an image to a Web site looks something like this:

<IMG SRC="images/graphic.gif">

The HTML code breaks down as follows:

< > – surrounds the HTML code

IMG – stands for image

SRC – stands for Source and tells the browser where the image is located, this can be in two forms:

• Absolute – specifies the path in the form of a complete URL, for example: <IMG SRC="http://www.networksolutions.com/images/graphic.gif”>
• Relative – specifies the path from the page where the image HTML is located to where the actual image is located

o If the image directory is under the same directory as the Web page with the image then the code would appear as: <IMG SRC="images/graphic.gif">

Root directory

- Web page with image (file)

- Images (directory)

- Image.gif (file)

o If the image directory is in a different directory than the Web page with the image then the code would appear as: <IMG SRC="../images/graphic.gif">, where the ../ tells the browser to go up one directory level to look for the images directory

Root directory

- Images (directory)

- Image.gif (file)

- Files (directory)

- Web Page with image (file)

Normally, relative paths are used whenever possible, as this reduces Web page load time.

If the image can't be found, or can't be displayed for any reason, there will be a “broken image” icon. This is typically because the path specified in the HTML code for the image is incorrect. In this situation, try using the absolute path to correct the problem.

Note For convenience, many Web site builders put all of their images in one directory, often called "images," although you are not limited to this naming convention.