Learn Flash: Relative Links	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Links/Hyperlinks

Free Flash Tutorial

Step Five: Web Address: Relative Links

A relative address is where you don't put the full URL, just the file name. The relative address of this page would be:

index.php

If I used this in my Flash example above, it would open this page, but only if the Flash Movie is in the same location as the page you are trying to open. If you don't specify the full URL, just the name of the HTML page, the browser will look for it in the same directory (folder) and at the same address as the page you are currently viewing.

You use relative links to pages on your own site. There are two reasons for this.

One: When you test you work off-line straight from your hard drive a relative link will find the relative file on your hard drive. If you place the full URL the browser will look on-line for the page, which gets confusing, and may give you incorrect results.

Two: You can move your entire site from one server to another or from the Intranet to a local hard drive or even to a CD or Floppy disk and the site will still work.

Warning: If you don't use Relative Links within pages on your own site and you latter wish to move your site to a new location (web address) or let users view it via a CD you would have to up-date every link on every page and that's no fun! There are link checking programs that can help you do this - but still it is better to just use relative links from the start.

For example I could move the entire site from webwasp.co.uk to webwasp.com and theoretically everything would still work (in reality I would not do this as even if the internal links still worked external links coming into the webwasp site from other sites would not work). But it does mean that I can move the site to a laptop and work on the site off-line from anywhere - I don't need to be connected to the Internet or on my own machine. The site can be updated, all the internal links can be checked off-line and when everything is perfect - uploaded. You could not do this with absolute links.

Definition: Internal Links are links within a site. External Links are links coming from and going to, other web sites.

Web Address: Relative/Folders

For a relative link to work you do not have to have all your files in the same folder. The location of this page is:

http://www.webwasp.co.uk/tutorials/a15-hyperlink/05.php

http://www.webwasp.co.uk/ - The root directory for the site.
tutorials/ - The folder for all the tutorials on this site.
a15-hyperlink/ - The folder for all the files for this tutorial.
05.php - This HTML file that is this web page.

If I want to link from the Home page to this page, the relative link would be:

tutorials/a15-hyperlink/05.php


Folder Structure: The bottom index.php is the site's home page and the other is this page.

Note: I do not use index.html or index.htm but index.php The reason is not important to this tutorial and in truth they are all very similar. They are all web page files. If you wish to learn about PHP see the tutorial: PHP

The other way around - a link from this page to the home page would be:

../../index.htm

../ makes the page go up hill or to the folder one level up. The home page is up two levels from this point. Remember the location of this file is:

tutorials/a15-hyperlink/

Thus the home page is up two levels. After this there is no where to go as you will be in the root directory and that is the end of a relative links possibility.

If you find this folder business confusing just place all your files in one folder or location. Relative links will then work.