The difference between a relative addresses or paths and an absolute address can be confusing.
The short answer is that you should build your website using relative paths. That way you can build it on your local disk and copy it to your web server and it will still work. It also allows the site to be moved from the Parsons’ A server to your own hosting service when you get around to making it part of your identity.
An absolute web address is unique on the web. That way you can go to that address when you click it, no matter where it is located on the web, hard disk, thumb drive, etc. Relative links, on the other hand, indicate locations relative to the file itself.
Anchor and Image Tags
Anchor tags <a> use the href="hyper_reference-location" attribute to hyper reference or link to another page. Images use source, the src="image-location" attribute for the image that will replace the code when the page is displayed.
Absolute References
An absolute reference or address would be the complete address, all the way back to the root. An absolute address on your computer will look something like this: file://localhost/Users/onno/aWork/Parsons_Fall_2012/03-absolute-positioning.html.
This says that the file 03-absolute-positioning.html is located in the Parsons_Fall_2012 folder, located in the aWork folder, located in the onno folder, located in the Users folder in the root directory of my computer, called localhost.
In the same way, the absolute address for this page on the World Wide Web is: 01-absolute-and-relative-addresses/. Some browsers hide http:// and there may or may not be a wwwdepending on the way the hosting service is set up. Browsers can also hide that information, so all you may see is b.parsons.edu/~dejongo/01-absolute-and-relative-addresses/.
Relative References
Relative addresses originate from the page on which it is written. Relative address directions you would give someone who asked how to get to the store a few blocks away. You would say, “Walk this way for two blocks, make a right turn, walk another block, and the store is on the left.” The directions are relative from where you are standing and giving directions.
Relative addresses are relative to the file in which they occur. If only the name is given, it assumes that a file or folder with that name is in the same folder as the file in which the link appears.
If the file is located in a folder (directory), or even buried several folders down, each of the folder/directory names would have to be spelled out with a slash between each of the names. <a href="down-two-blocks/right-one-block/store-on-left"> directions to the store </a>. You get the idea.
This allows you to drill down to any and every folder or file on the website.
But what if the file itself is enclosed in a folder, and it has to go back up the directory structure?
The way to go up the directory structure to the parent folder that’s holding the file is done with two periods and a slash (signifying a change in directory/folder)../. <a href="../../index.html"> two folders up </a>.
An external CSS file located in its own CSS folder that references a picture in an image folder located in the parent directory will need to go up one level and then go into the image folder before it can access the file. The url would look something like: url(../images/file.jpg).
The ability to move up and down the directory/folder hierarchy is crucial to building web sites. Make sure you understand this before you continue.
Careful; the Internet Bites Back
If you do not name your files correctly, you cannot expect the internet to fix your problem. The links just do not work.
You should be made aware that the computer does not see a difference between an upper and lower case letter, a and A, but to the server, they are two completely different letters. This can result in your website working correctly on your computer, but when you move it to the web, the links break.
The computer also sees the space as a completely different character, so do not use any spaces when naming web files. You can use the underscore and the dash. The underscore links words together when you double click, while the dash separates them.
The space is an example of a reserved character and is changed to a percent-encoding. It also effects: " % , . < > / ^ ` { | } so do not use these reserved characters when you name a folder or file.
The Slash at the End of the Address
An address that ends in a slash instead of a file name often means to go to that folder, though it could also signify a custom permalink. In content management systems like WordPress, a database query like ?p=123 is replaced with a custom URL structure to improve the aesthetics, usability, and forward-compatibility of the links.
The Default Index
When a link does go to a folder, it will default to the index.html file. If there is no index.html file, it will show the contents of the folder, if the server has not disallowed that. It is recommended that you have an index.html file in every folder, as that will keep people from exploring files you may not intend for public consumption.
Target A New Blank Window or Browser Tab
Another oft used attribute is to target a new window if you do not want the visitor to leave the page when clicking on the link. The target attribute usually takes the new page value: target="_blank" or <a href="" target="_blank" > new window </a>.
Email Address
You can also address an email using the format <a href="mailto:dejongo@newchool.edu"> email Onno </a>.