The MGA With An Attitude
RELATIVE ADDRESSING and
PORTABLE WEB PAGES - WP-103
This is a discussion on the merits of Relative addressing vs Absolute addressing for the location of internet files, and the Portability of web pages between servers. The point of this lesson will be to explain the easy way to specify web addresses within your own web site, and how to make it very easy to move web pages around after they are complete and working. You see, as a good engineer it is my thing in life to be basically lazy, and so always looking for the easiest way to do things.
When you have a visitor in your living room, and you want to explain where to find the bathroom, you don't have to give instructions starting from the expressway, only where to find the next room starting from your current location. When you're building a website the same logic applies (usually). In most cases the next web page you will be linking to, or the next image you want to display on your page, will most likely be in the same directory (folder) as the current page, or at least in some other directory very close at hand still on your own web site. The easiest way to give directions will be relative to your current location.
Start by looking at the Address: or Location: line at the top of this browser window. It is at the top of your browser window, yes? You will notice that the page you are currently viewing is named "webpage3.htm", and that the current directory is "offtopic". That complete address line is the full instruction to find this page from the expressway, the World Wide Web (www). That is what is technically called the URL (Universal Resource Locator), but you can call it the absolute address.
Now if I want you to look at an image named "chip.jpg", and this file is in the current directory, the desired relative address is simply "chip.jpg", and I don't have to specify the complete URL to find it. The HTML code to link and display that image is <HREF="chip.jpg">. When I actually put that into the page code I say I want you to look at the chip. For anyone else far, far away in the outside world on the internet the full URL would be: "www.mgaguru.com/offtopic/chip.jpg", but when you're already sitting right here with me it can just be "chip.jpg". Simple stuff, right?
If there was a subdirectory here named "images" (another folder within this folder), and the same image was in that directory, then the relative address would be "images/chip.jpg". Don't get bored yet, it does get better. If the same image was in the parent directory (the directory immediately before the current directory), then the relative address would be "../chip.jpg". The older computer geeks among us will recognize the "../" as a DOS command meaning to back up one directory level.
Now you remember those navigation buttons at the bottom of most of my web pages? There is a yellow arrow there called "uparrow.gif". The complete URL to find that file is: "www.mgaguru.com/pictabs/uparrow.gif". As you can see it is not in the current directory, and not in the parent directory either, but it is in a different directory under the parent directory. The relative address from here (the current directory) to that file is "../pictabs/uparrow.gif". In common words that address (or instruction) says to back up one directory level, then proceed into another subdirectory named "pictabs", and find the file named "uparrow.gif". The HTML code to link and display that image is <HREF="../pictabs/uparrow.gif">, and when I put that into the page code I say I want you to look at the yellow arrow.
Okay, that's all there is to relative addressing. With just very simple steps backwards and forwards in the directory structure you can easily get to any file on the same web site. When you are building a web site with many web pages and lots of different directories (folders) to hold all of the files, you can (and should) use relative addressing for everything you refer to that is contained within the same web site (at least as long as the entire web site is contained on a singe internet server). The only time you ever need to use an absolute address is when you are linking to something that is "off site". If that was all there was to it, the simplicity of relative addressing would be reason enough to do it, but in fact there are a few more very good reasons.
On the internet (www), when you specify a relative address the search engines and routers do not have to start from scratch and go looking for your web server. Because they have already figured out the routing to your current location on the net, the tiny change specified by the relative address is very fast for the network to execute, and the new file is found and downloaded much more quickly than if you were to specify the absolute address. This may sound like a trivial thing when finding and downloading any one item, but when you have links to maybe 20 other files specified in the HTML code for your web page, there can be a significant reduction in search time to finish downloading your web page for your visitor. This may help to make your visitor very happy, and to make you (or at least your web site) very popular. In this world of cars and web sites we should all hope to satisfy the feeling for the need for speed.
Another reason for using relative addressing is that it allows you to work on your web pages off line on your local computer, and once you have your act together and the page is working well with all of the related files present, then you can quickly upload these files to your on line web server, and you have what appears to the rest of the world to be instant new web pages, or instant changes to existing web pages. When you have all of the related files for a single web page contained in the same directory as the page file itself, this is very simple, you just upload all of the files into the same directory on the server, and the page immediately works on line exactly the same as it does on your local computer. Among other things this avoids the problem of you fiddling around with changes to the page on line when a visitor might be trying to view the page at the same time. It can be a little embarrassing to receive an e-mail message saying "What happened to that nice web page that was working yesterday?".
When you start creating web pages with links that spread over several different directories, then the discipline of organization gets a little more important, but relative addressing and offline editing can still work just as well. What you need to do is to create identical directory structures on your local computer and on your web server, and always upload your files to the web server into the same directory(s) as used on your local hard drive. This way the web pages still work just the same on line as they did locally, which totally avoids any need to tinker with your web pages on line. Once you get to this point you have effectively created a mirror image of your web site on your local hard drive, and vise versa. If you keep all of these files in both places the web server effectively acts as a data backup for your local hard drive, and your hard drive is a data backup for your files on the web line server.
By this time, whether you realize it or not, you have already conquered the problem of portability of your web pages, and of your entire web site if necessary. To the internet, one web server computer is pretty much the same as another. When you have faithfully used relative addressing on all of your web pages when linking to anything on your own web site, then your entire web site will still work the same no matter where it is physically located on the net. Suppose you have a falling out with your current on line service, and you would like to cancel your account and move your web site to a different server. Once you have arranged the new account and have the web address and space on the new server, then you just create the identical directory structure on the new server, proceed to upload all of your web files to the new server, and give your friends the new address for your home page. Almost like magic you can have your website up and running on the new server without changing one iota of HTML page coding.
The fallout from this move is the problem of how to get all of your friends, and maybe a lot of other folks you don't even know, to update their bookmarks to point to your new web site address. Even more exciting is the idea of trying to contact anyone and everyone who may have some link from their web site to yours, and getting them to change their page code to point to your new web site address. About the time that thought starts to send chills down your spine it may dawn on you that the next logical step up is to register a domain name for your web site. When you do this the domain name will be programmed to be routing the link to any location on the net that you specify, which of course would be pointing to your home page, wherever that may be located on the net. Then if you should decide to change servers, all you need do is to have the domain name server reprogrammed to point your domain name to your new location on the net. But this time the changeover should be totally transparent to the rest of the world, such that anyone linking to your domain name will still find your web site no matter where you have moved it, and they will never notice, and all of the links in the world pointing to any of your web pages will continue to work.
One last word about off-site links. When you install an off-site link on your web page, such as the link to my web site http://mgaguru.com , You might consider having the off site page open in a new window, like this:
<A href="http://mgaguru.com" target=new>MGA with an Attitude</a>
This is specifying a name for the target window, and you can open any number of pages in this same single window.
Or like this:
<A href="http://mgaguru.com" target=_blank>MGA with an Attitude</a>
This is specifying an unnamed target window, and each time you open a new page this way it will open in an additional separate window. I personally prefer the first case so the visitor only gets one extra window and not a whole screen full of them (or many layers of them).
The reason I suggest doing this is so your visitor doesn't get totally lost (sidetracked and distracted) while browsing about the web and never return to your site. If you open the off site page in a new window, your own web page still remains on the screen in the original window. When YOUR visitor has finished fiddling with the off site page(s) he is likely to close the extra window, and your page will still be there in the original window. That way you don't have to depend on the visitor clicking the Back button lots of times to back out of whatever-he-was-fiddling-with for who-knows-how-long to get back to your page (and sometimes it doesn't work anyway). Less likely to loose your visitor that way.
Enough of that fun. Now you may go on to a review of the do's and don'ts of selecting an internet server to host your web site.