So you’re building a website for a class project or for your job and you’ve finished creating all of the content. Everything looks nice and orderly, just as it should. Then you go to upload the pages onto your web server only to find out that the links on your webpages don’t work. What could be wrong? A little bit of background on relative and absolute addressing could be helpful.
In the world of web design, you can create links to other pages in one of two ways: use absolute path URLs, or use relative path URLs. These concepts may sound complicated, but they’re really simple.
First, lets assume that your website file structure looks something like this (red indicates a folder, blue indicates files):
- index.html
- Folder 1
- firstPage.html
- secondPage.html
- Images
- image1.jpg
When you use absolute path URLs, you link to the specific location somewhere on the internet (i.e. http://cis.bentley.edu/sandbox – make sure include the http:// part as well). Say for example you want to create a link on your page to Engadget, you would simply include the code:
<a href=”http://www.engadget.com”>Some text</a>
But you probably already knew this. Relative path URLs, on the other hand, are used when you want to link to a webpage that is on your own web server. So lets say you’re creating code for index.html and you want to link to firstPage.html. In this case, you would link to firstPage.html relative to where index.html is. What exactly does this mean though? First, think about where you are (you’re currently working from index.html) and use that as a starting point. Now, you want to link to firstPage.html, and it is located in Folder 1. So you would use the relative path URL: Folder 1/firstPage.html:
<a href=”Folder 1/firstPage.html”>Some text</a>
If you were working from firstPage.html and wanted to link to secondPage.html, just use the same steps and determine where secondPage.html is relative to firstPage.html. Its in the same directory, so you would do:
<a href=”secondPage.html”>Some text</a>
It’s as simple as that! But suppose that you are in firstPage.html and want to link to image1.jpg, how would you go about this? Use relative addressing; however, this time you would use the starting point as the top of your directory. You know that image1.jpg is located in Images so you would use the path URL /Images/image1.jpg:
<a href=”/Images/image1.jpg”>Some text</a>
Cool note: if you were to use an absolute path URL to link to your image1.jpg, you would use <a href=”http://www.yourwebsite.com/Images/image1.jpg”>Some text</a>. So if you were to take away the http://www.yourwebsite.com” part, you’d have the URL you just used to link to image1.jpg. So if you’re having some difficulty understanding how to start at the top of your directory and linking to a specific file on your web server, think about how you would link to that file if you were using an absolute path URL and just take out the domain name (i.e. http://www.yourwebsite.com).
Remember: when creating links on your webpages, make sure you don’t put the url as something on your computer (i.e. C:\WebsiteFolder\index.html), as it will not work. When you upload all of your webpages to the server, the server does not have access to your computer, so either the link won’t work or you will be brought to a page that says that the page is unavailable.
In the real world, many organizations may change their website from time to time and may move their old website files to somewhere else on the server (to an archive folder named /oldwebsite, for example). In this case, if you have an images folder in the same level as your index.html file, you could use relative addressing (images/image1.jpg instead of /images/image1.jpg) and still preserve part of the file hierarchy if you moved the entire website. If you do images/image1.jpg then, in the new file hierarchy, the browser would know to look in the same level for the images folder and thus your images would still show up. If, however, you used /images/image1.jpg then your images might not work because it would try to look for the images folder in the same level as the /oldwebsite, which is nonexistant.
If you were to move your entire website to /oldwebsite, your links to the other pages in the file hierarchy may get broken. For example, supposed you linked /folder1/folder2/folder3/aWebpage.html to /folder1/folder2/anotherPage.html under the new hierarchy (i.e. in /oldwebsite the links would not work because you would be telling the browser to start looking for the page from the top of the directory, which would be the same level as /oldwebsite; thus, it would be looking for a folder named folder1 in the same level as /oldwebsite, which again is nonexistant.
Both methods have their advantages and disadvantages in terms of moving the entire website to another part of the server
