Links are an essential part of the web development since they are responsible for holding the web together. Therefore it is essential to know how to properly link to external websites and internal files.
Understand the difference between internal links (/somepage) and external links (http://www.somesite.com/somepage)
Explain when we should use the full URI (with the
http://yoursite.com/somepath) and when we should use the relative path (
/somepath) on a web page.
Explain how to navigate the document tree with links (../../someotherpage).
Explain how to open links in external windows.
Understand all the possible pseudo-states (e.g.
:hover) of a link and when they are actually activated.
Explain how to change styles of a link based on the pseudo-states.
(This is an article found at this link that is included here due to an outdated HTTP hosting provider.)
What is a server path?
A server path is the path through the server’s directory structure between two files. In order to link two files together, such as placing an image on a web a page, you need to know the path through the computer from the web page to the image in order to tell the browser where to find it.
When you are building your web site on your computer, the "server path" is the same thing in principle, it’s the path from one file to another on your computer. If you set up your web site on your computer as it will be on your hosting company’s server space you’ll be able to check all your internal links before uploading your site.
Two Types of Paths
In regards to the Internet, there are two kinds of paths, relative and absolute. An absolute path is the full URL to a file. If you had a link on your index page to your picture page, the absolute path might look like this:
A relative path points to the location of the file you want to link to in relation to the page being viewed, all within your server space. If the page you’re linking to is in the same directory as the page being viewed, then the relative path is simply the page name. Using the relative path for the same page above, you’d code it:
So which is best?
Both links take you to the same page, but there’s a big difference in the way they perform. By using a relative path, the browser knows to just look within your own web site’s server space for the linked file. However, if you use the absolute path, the browser goes back out onto the Internet and finds your site all over again, then finds the file within your directory. So, if you’re linking to pages on your own site, using a relative path will make your site respond quicker. It’s all about speed!
If you’re linking to something off your site, then you must use the absolute path because there is no relative path to use.
What if my file isn’t in the same directory?
Good question, Gleeblefumber! You can still use relative paths as long as the file is within your own server space. Look at the table below to see how some relative path variables would work.
Server Path… What it means…
page.html is located in the current directory.
page.html is located in a folder (directory) called tips. The "tips" folder is located in the current directory.
page.html is located in a folder called other that is located in a folder called tips that is located in the current directory.
page.html is located in a folder one level up from the current directory.
page.html is located in a folder two levels up from the current directory.
If you link to a page that is in another folder (directory) on your site, then you can see how to do that in the first three examples. To have a link on a page in one of the other folders go back to the main directory, you can see how that is done in the last two examples.
../ represents one level up to the browser.
Clear as mud now? Well go take a shower, for goodness sakes.
Source: Server Paths Explained
Read Lena Shore’s explanation of the difference between absolute and relative paths.
Read Six Revisions’ article on link pseudo-classes .
In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.
The archived old version of this post can be found here