WHAT IS A "URL"?
URL is an acronym for Uniform Resource Locator and is a reference (an address) to a resource on the internet. You may have heard it called 'a web address', which is the same thing - an address of a website or webpage.
You need to know a website or webpage's URL (or address) to be able to link to it. You may also need to know the URL of images if you use them on your website.
All URLs (for accessing things over the internet) start with the protocol http:// or https://. This tells your browser to look on the internet for whatever you specify after the http:// or https:// part.
http stands for HyperText Transfer Protocol, and the s part of https:// means Secure
For example, let's say there is a website called www.website.com. Its URL would be http://www.website.com. Modern browsers will allow you to type www.website.com into their address bar and will automatically prepend the http:// part for you.
There are 2 types of URL - Absolute and Relative.
A simple way to remember what type of URL to use is this: If you're linking to something outside your website - use an Absolute URL. If you're linking to something inside your own website - use a Relative URL
An Absolute URL is a URL that identifies where that page/image is - no matter where you place the link. If you create a webpage, and on it create a link to an Absolute URL of http://www.website.com, then it doesn't matter where you upload your webpage to - clicking that link will always take you to the correct place.
You can use Absolute URLs for every link you ever make, but there are some disadvantages - mainly that while building & viewing your website locally (on your computer) some Absolute URLs won't yet exist on the internet - making it difficult for you to check if everything is working correctly.
A Relative URL is a URL that refers to a webpage/image relative to where you are now. If you create a webpage and use an image called picture.jpg on that page which is stored in a folder called images in your hosting (webspace), you could link to it using it's Absolute URL of http://www.mywebsite.com/images/picture.jpg, but wouldn't it be easier to use its Relative URL of images/picture.jpg?
This is especially useful when building & viewing your site locally (on your computer) because all links and images will work, and as long as you keep the directory struture the same when you upload your site - they'll still work there too!
To explain Relative URLs better, take a look at this:
The first directory of this site is called the root directory. Anything uploaded here is accessible to the internet. This is where you would upload the first page of your website (index.html).
In the root directory, we've created 2 directories called images & downloads.
In the downloads directory, we've created another 2 directories called movies & programs.
To link to something in the same directory as the page the link is on - simply use the file name as the URL.
Example:
<a href="index.html">My Link</a>
To link to something in a directory 1 level DOWN - simply use directoryname/ plus the file name.
Example:
<a href="downloads/index.html">My Link</a>
To link to something in a directory 2 levels DOWN - simply use directoryname/, then directoryname/, plus the file name.
Example:
<a href="downloads/programs/index.html">My Link</a>
To link to something in a directory 1 level UP - simply use ../ plus the file name.
Example:
<a href="../index.html">My Link</a>
To link to something in a directory 2 levels UP - simply use ../ twice, plus the file name.
Example:
<a href="../../index.html">My Link</a>
Whichever directory you're in - you can use / to take you back to the root.
Example:
<a href="/">My Link</a>
Using the directory structure in the image above:
Lets say you wanted to create a link from the index.html page stored in the root directory, to a page called test.html which is stored in the programs directory.
The link using an Absolute URL would be:
<a href="http://www.mywebsite.com/downloads/programs/test.html">My Link</a>
The link using a Relative URL would be:
<a href="downloads/programs/test.html">My Link</a>
What if we wanted to do the opposite, and create a link from the test.html page stored in the programs directory, to the index.html page stored in the root directory.
The link using an Absolute URL would be:
<a href="http://www.mywebsite.com/index.html">My Link</a>
The link using a Relative URL would be:
<a href="../../index.html">My Link</a>