Relative and Absolute file paths

Let's say, for example, that you are in the middle of making a web page and you decide to insert an image that you have saved on a floppy disk, but you've been saving your web page to the desktop. If you insert the image by pointing to the image file on the floppy, your web editor will save an absolute path to the file on the floppy drive. If you post this page on the web, computers everywhere will be looking for the image file on their floppy drives. What's the likehood that the user has the same image file on a floppy disk in their computer--ZERO!

Notice how the "URL is relative to page location" is not selected and how the "Image Location" is file:///A:/jordan.jpg. This is NOT GOOD.

What should you have done?

You want your web page pages to use relative file paths when they are looking for image files to insert or other web pages you've created to link to.

• First, when you save your image file you should save it to the same place that you are saving your web pages. In this example, I'll save to the Desktop. Remember how to save image files that you find online...
• Right click (CTRL + Click on a Mac) on the image and select "Save Picture As..." or "Dowload image to Disk..." or something that is similar to one of these choices. DO NOT select "Copy"!
• DO NOT just click on Save...make sure you save to the right place.

• If I already had image files on a floppy, I'd drag them onto the Desktop.
  
  
• In Composer, when you insert the image file, navigate to the Desktop (or wherever you are saving both your web pages and image files).

• The web editor will insert the relative path to the image file

Notice how the "URL is relative to page location" is selected and how the "Image Location" is simply jordan.jpg. This is GOOD!

• When you upload both files to a web server (for us the server is eprentice.sdsu.edu), the relative path will continue to work.

A metaphor: "Won't you be my neighbor"

Think of it this way...
When you link files together (i.e. inserting an image or linking to other web pages you've created) you want to make them "next door neighbors" on your computer. When you publish them to a server they will still be "next door neighbors" and the links will continue to work.

If webpage.htm and jordan.jpg are joined together as "neighbors" (i.e. relative file path) on your computer, then when they are put in your Eprentice folder they'll still be joined as "neighbors"

Save your web page first

Some web editors, such as Composer, will insert absolute image file paths if you insert the image before you've saved the web page. After you've saved the web page, then Composer can create file paths in relative terms.

• So, it is always a good idea to be sure that you have saved a web page in the folder you want to work in (usually the desktop) before adding in any images (or other links to your files).

Save your webpage before you insert any images or links to other files.

How can I check (and fix) problems?

Okay, you thought you were done, but when you brought up your web page, some images don't load. What next?

• First, check to make sure you did upload the images to the web server. Once you've ensured that, then you need to look at the image file paths that are being used. There are several ways you can do this.
  • On a PC, if you right click on a picture (even one that's not loading) in an Internet Explorer window, you can choose "Properties" and you will see the path.
  • On a PC or Mac, in any browser, you can look at the HTML source code to see what is being specified. Look under "View" and "Source". The HTML will be displayed. Look through it to find where it says "img src". This stands for "image source", and what follows will be the path the browser is directed to to find the image.
  • Or, just go back to the web editor and load in the page you created (you'll probably see the image now, in the editor). Double click on the picture to see the picture properties for the image in question. It will show you the path. If it's not relative, then delete all the junk in front of the file name.
    • For example, change file:///A:/jordan.jpg to jordan.jpg.
    • Or just delete the image and reinsert it.