When you're creating links to documents and images on the web, you need to think about how you're

going to link to them. There are two standard ways to create links: absolute paths relative paths Absolute Path URLs Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a web element is also often referred to as the URL. For example, the absolute path to this web page is: http://webdesign.about.com/od/ beginningtutorials/a/aa040502a.htm You typically use the absolute path with the domain to point to Web elements that are on another domain than your own. For example, if I want to link to the Graphics Software Guides site I need to include the domain in the URL: http://graphicssoft.about.com/. So a link to her Photoshop review would look like this: <a href="http://graphicssoft.about.com/od/productreviews/gr/Photoshop.htm"> Review of Photoshop</a> If youre referring to a web element that is on the same domain that youre on, you dont need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name. For example, my article How to Create a Web Page with HTML has the URL: http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm If I were to link to this URL from another page on my site, I could link to it in this way: <a href="http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm">How to Create a Web Page with HTML</a> It is a good idea to use absolute paths, without the domain name, on most websites. This format insures that the link or image will be usable no matter where you place the page. This may seem like a silly reason to use longer links, but if you share code across multiple pages and directories on your site, using absolute paths will speed up your maintenance. Relative Path URLs Relative paths change depending upon the page the links are on. There are several rules to creating a link using the relative path: links in the same directory as the current page have no path information listed filename sub-directories are listed without any preceding slashes weekly/filename links up one directory are listed as ../filename How to determine the relative path: 1. First define the URL of the page you are editing. In the case of this article, that would behttp://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm 2. Then look at the directory path for the page. For this article, that is/od/beginningtutorials/a/ 3. Get the URL of the page you want to link to. For this example that would be the How to Create a Web Page with HTML article:http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm 4. And look at the directory path for that page: /od/beginningtutorials/ss/ 5. Compare the two paths, to determine how to link to it. From this article I would need to step up one directory from the /a/ directory and then go back down to the /ss/ directory using the code ../ss/aasspagehtml1.htm. 6. Write the link: <a href="../ss/aasspagehtml1.htm">How to Create a Web Page with HTML</a>
Here are the URL components: http://www.example.com/en/public/img/logo.gif \__/ \_____________/\_____________________/ #1 #2 #3 1. scheme/protocol

2. host 3. path A URL is called an absolute URL if it begins with the scheme and scheme specific part (here // afterhttp:). Anything else is a relative URL. A URL path is called an absolute URL path if it begins with a /. Any other URL path is called a relative URL path. Thus:

http://www.example.com/en/public/img/logo.gif is a absolute URL, ../../public/img/logo.gif is a relative URL with a relative URL path and /en/public/img/logo.gif is a relative URL with an absolute URL path.

URLs, as I mentioned earlier, are used to locate anything, anywhere. Since their scope is so large, they often get very long. It is often the case that we can abbreviate URLs in the form of relative URLs. All the URLs we've looked at until now were absolute URLs. They identified a resource independent of their context. The URL http://WebReference.com/html/ identifies HTML with Style whether it's typed into your browser, scribbled on a napkin in a bar for a friend or just remembered in your head. Relative URLs are a way to identify a resource relative to their context. To give a rough analogy, if you're in your house with some friends and someone asks where your next-door neighbor Mark lives, you'll probably say "Oh, he's next door." You probably wouldn't say "On a planet called Earth, in the United Stated of America, in Acmetown, on 32 Foobar St." if this conversation is taking place in the living room of 31 Foobar St. For one thing, it's a waste of breath. Relative URLs are something like that; they're the equivalent of saying "down the road, turn left, walk on for a few blocks, you can't miss it." They only make sense if they are given within a certain context. And this context is called a Base URL. As we mentioned earlier, relative URLs can only be used with generic URLs like the ones described by the httpscheme. The reason for this is that all generic URLs, like those defined by the http scheme, have a pathname. The Base URL of a resource is everything up to and including the last slash in its pathname. Here are some examples: Table 1: Examples of Base URLs Absolute URL Base URL http://WebReference.com/ http://WebReference.com/ http://WebReference.com/html/ http://WebReference.com/html/ http://WebReference.com/html/about.html http://WebReference.com/html/ http://WebReference.com/foo/bar.html?baz http://WebReference.com/foo/ Now, say that in the document http://WebReference.com/html/about.html , I want to refer to the documenthttp://WebReference.com/html/links.html. What I would do is use the relative URL links.html. This will be added to the base URL to form the URL that I want to match. In most cases, figuring the absolute URL from a relative URL is just a matter of concatenating the base URL and the relative URL, as in the example above. There are, however, a few special cases:

A directory called .. (two periods) in a relative URL indicates the parent directory, essentially stripping off everything up to the previous slash in the the Base URI. Note

that this only has meaning inside the pathname, so you cannot use this notation to go up higher than the root directory. A directory called . (one period) refers to the current directory. A relative URL that begins with / (a slash) always replaces the entire pathname of the base URL. A relative URL that begins with // (two slashes) always replaces everything from the hostname onwards. These notations are best illustrated by example, in the following table. The table shows relative URLs which are all assumed to have the base URL http://WebReference.com/html/, and the absolute URLs that they translate into: Table 2: Resolving relative URLs relative tohttp://WebReference.com/html/ Relative URI Absolute URI about.html http://WebReference.com/html/about.html tutorial1/ http://WebReference.com/html/tutorial1/ tutorial1/2.html http://WebReference.com/html/tutorial1/2.html / http://WebReference.com/ //www.internet.com/ http://www.internet.com/ /experts/ http://WebReference.com/experts/ ../ http://WebReference.com/ ../experts/ http://WebReference.com/experts/ ../../../ http://WebReference.com/ ./ http://WebReference.com/html/ ./about.html http://WebReference.com/html/about.html Also note that a relative URL that is empty (consisting of no characters) points to the resource in which it exists.

Previously, I mentioned that relative URLs save time typing. Indeed they do, but that is not the reason for their use. There are other ways to save time if you're that lazy, such as editors with shortcut features. But relative URLs are much more important than that: they point to a resource relative to their context. This is very important, because URIs may not always be used in the same context. But we'll explain that later on after we've explained hyperlinks.