This page includes:

Understanding Paths

We won't beat around the bush. Understanding how paths work is, without a doubt, the most difficult thing to learn for a beginning web page creator. Broken links, or bad paths, are the reason why we didn't want you to use an HTML editor as you began to go through our beginning tutorials. HTML editors can create bad paths for you that you wouldn't know how to correct. The good part about getting through this tutorial is that you will be completely ready to use an HTML editor after this point, because you will know how to correct any mistakes it may make. Hooray!

Examples of bad paths:

  • The link worked on your computer, but when you uploaded the page, the link no longer worked.
  • Your link to a downloadable file no longer works.
  • And last, but certainly not least, the ever-popular, missing graphic!

Absolute and Relative URLs

There are two types of paths in HTML, known as relative paths and absolute paths. An absolute path contains the full URL of the item being referenced. A relative path contains directions to the item relative to the HTML page.

Example: you're creating a page that will be uploaded to:
http://www.webdiner.com/example/ and the page is named index.htm, so that page's URL will be
http://www.webdiner.com/example/index.htm. In the example below, you'll see the specifics of that URL:

You can have directories within directories as well. In the example shown below, there is a subdirectory of the example directory. The subdirectory is named new:

Important: Domain names are not case sensitive, but directories and filenames are!

You'll have an easier time understanding this if you've dealt with DOS or UNIX where files are not kept in icon-assigned folders, but instead you have to navigate the tree structure of your directories. If you've only used a Mac or Windows 95, you may need to fight your way through understanding URLs and paths a little harder.

Let's say there's an image, also in the directory (folder) that is named "example", and the image is named voyage.gif.

Using the IMG SRC tag, which adds a graphic to a page, the absolute path for the image would be:

<IMG SRC="http://www.webdiner.com/example/voyage.gif">

The relative path for that image, from the index.htm page, would be:

<IMG SRC="voyage.gif">

This would point to a graphic named voyage.gif, uploaded to the same directory on the web server as the HTML page that referenced it.

Relative URLs are preferred for your own pages. If you change domains, and you've used relative URLs for your graphics and web pages, you won't need to edit the links if you do change domains. If your web site grows and grows (as ours did!) you might need to change hundreds of links if you ever move your web site.

More Relative URL Tips

Let's say that the page you are writing will be uploaded as:

http://www.webdiner.com/example/index.htm

and a graphic, in another folder, at the URL

http://www.webdiner.com/images/fiddle.gif

The path from the HTML page to the graphic:

Absolute Path:
<IMG SRC="http://www.webdiner.com/images/fiddle.gif">
 Relative Path:
<IMG SRC="images/fiddle.gif">

The relative path tells the browser to look in a directory named images for a file named fiddle.gif. If the image was located at the URL:

http://www.webdiner.com/images/music/fiddle.gif

The relative path would appear as:
<IMG SRC="images/music/fiddle.gif">

Let's say that the page you are writing will be uploaded as:

http://www.webdiner.com/example/index.htm and the graphic you want to link to is located at:

http://www.webdiner.com/tuba.gif

The path from the HTML page to the graphic would look like this:

Absolute Path:
<IMG SRC="http://www.webdiner.com/tuba.gif">
 Relative Path:
<IMG SRC="../tuba.gif">

The ../ in the HTML tag tells the browser to go up one directory level. If the graphic was up two directory levels, the relative path would look like this: <IMG SRC="../../tuba.gif">

At this point, we've created relative paths to images that are in the same directory, in a directory on the same level, and in a directory that is up one level, and a directory that is up two levels. Phew!

Most HTML editors will create links for you. However, some HTML editors will create an absolute link to a graphic...on your hard drive! This will, of course, be useless once you upload your web page. A bad link to a graphic created by an HTML editor will look like this:

<IMG SRC="c:\\pagemill\images\filename.gif">

Yowza! If you see anything like that in a problem web page, edit the HTML to create a correct link. The giveaway that this link won't work is that it contains slashes going the wrong direction, and a reference to c:, or the c drive on a computer.

Also remember that you will need to mirror your directory structure on your computer and on your web site. This way, links will work both when you test the page on your computer and also once you upload both the HTML file and the graphic.

HTML for Paths - A HREF and IMG SRC

To create a link in a web page, you use the <A HREF="filename.htm"> tag, which is followed by a closing </A> tag. Any text between the Anchor H Reference, or A HREF tag, and its closing tag, will become a clickable link. The default color for this clickable link text is blue. If you would like a different color, you will need to specify it with a hexcode.

You can link to anything on the web, using either a relative or absolute URL.

<A HREF="http://www.yahoo.com"> Search the Web! </A>
<A HREF="index.htm"> Our home page </A>

Using an Image as a Link

To add an image as a link, you'll use the IMG SRC tag to point to the image:

<IMG SRC="icon.gif">

And then create your link:

<A HREF="http://www.yahoo.com"> <IMG SRC="icon.gif"> </A>

This will create a clickable image. The icon will have a border (the default is a blue line, determined by the LINK attribute of the BODY tag). You can remove the "blue line" around your image by including the BORDER=0 attribute:

<A HREF="http://www.yahoo.com"> <IMG SRC="icon.gif" BORDER=0> </A>

Troubleshooting Links and Images

Q. Help! My web page is all a link! I only wanted a short text link
A. You're missing the closing tag for your link, the </A> tag. Place the tag wherever you wish the link text to end.

Q. My image doesn't show up on my web page!
A. Whoo, boy, if Web Diner had a dollar for every time this question was asked! Anyway, check the following:

  1. Hit the "Reload" or "Refresh" button on your browser. Sometimes it's a simple server glitch that prevents the graphic from loading.
  2. Has your graphic been uploaded?
  3. Check that the name of your graphic matches exactly, case (upper case, lower case) the IMG SRC tag in your HTML page. Make sure your graphic file name does not include any spaces or symbols (like & or #)
  4. Check that your HTML file has all the essential tags in the correct order.
  5. Still no graphic? Try reuploading your graphic, and make sure that it is being uploaded as binary and not ASCII.
  6. Make sure your graphic is either in GIF or JPG file format. Although Internet Explorer will display files in BMP format, Netscape will not. BMP files are also much larger than a GIF would be.
  7. Make certain that you are not missing any quotation marks from your IMG SRC or other HTML tags. A single quote, for example <IMG SRC="notes.gif> can cause a missing image.
  8. Open the graphic in a paint program like Paint Shop Pro, Photoshop, etc. to make sure that it will open. If the graphic won't open, then the file is corrupted and you need to create a new graphic.

Create Your Own Web Adventure with the Web Diner!

All content copyright of Web Diner Inc., 2000. Do not redistribute or repost this content.
Tutorials | Home | Glossary