Tell a Friend About Our Cool Software
Chapter 2: Specifying the Image URL
In order to avoid the problem of broken image links on your Web pages, you need to understand how to specify the image URL in an <img> tag. There are two types of URLs you can use, relative and absolute.
A relative URL gives the location of the image file relative to the location of the HTML document that contains the tag. This is the type of image URL you will use when the image file is on the same server as the document, which is almost always the case. If the image file and Web page are in the same folder then all you need to include is the image file name. For example:
<img src="logo.gif" />
The browser translates this as "the file logo.gif in the same folder on the same server as the current document." Keeping your HTML documents and images together in the root folder is okay for small Websites, but it is generally preferred to have a separate folder for the images--usually called "images", as you might expect. This folder will be a subfolder of the root folder where the HTML document is located as in this diagram:
Then, you would write an <img> tag like this:
<img src="images/logo.gif" />
Another situation has the Web page and the image in separate subfolders, as diagrammed here:
In this case you would write the <img> tag as follows:
<img src="../images/logo.gif" />
The .. notation means "move up one folder level" so this URL is translated as "move up one folder level then down to the Images subfolder to find the file logo.gif."
Using relative URLs in <img> tags is common practice. You just have to be sure the URL is correct! One disadvantage is that if you move either the Web page or the image to another folder, you must change all the URLs to reflect the new location. This is one reason to select a good folder structure for your Website and stick with it--don't move things around without a good reason.
An absolute URL specifies the precise location of the image file--the location of the Web page itself does not matter. An absolute URL identifies the Website, the file name, and the folder (only if the file is not in the site's root folder). Here's an example:
<img src="http://www.coffeecup.com/images/logo.gif" />
You can use an absolute URL to refer to a file that is on any Website in the world. Of course, you cannot display someone else's images on one of your Web pages without permission. You could use an absolute reference to refer to images on your own Website, but relative URLs are easier to use for this purpose. One advantage of using absolute URLs for <img> tags is that you can move the Web page (but not the image file) without having to revise the URLs.
You can also omit the Web address in absolute URLs for images and other files that are on your Website. This tells the browser to start at the root fo your Website and go from there. I feel this is the best way because you can move your pages around and they will always point the images and other files you reference in the same way.
<img src="/images/logo.gif" />
CoffeeCup Software started in a real Coffee House 1996. Our first program was the HTML Editor. Over the last 10 years we have created a lot more Web Design & Flash Software. Our philosophy has always been to create software and services so you can make better Websites. We are dedicated to helping you by offering extraordinary support so we can succeed together. Consider us a partner and a friend, because we really are about Fresh Software and Warm People.
