Linking Internal and External Pages (v1)

Introduction

Links are the glue holding the web together, so make sure you understand how to properly link to external websites AND internal files.

Learning Outcomes

  • What’s the difference between internal links (/somepage) and external links (http://www.somesite.com/somepage)?

  • When on a webpage should you use the full URI (with the http://yoursite.com/somepath) and when should you use the relative path (/somepath)?

  • How do you navigate the document tree with links (../../someotherpage)?

  • How do you open links in external windows?

  • What are all the possible pseudo-states (e.g. :hover) of a link and when are they actually activated? How do you change styles based on them?

Server Paths Explained

(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 href="http://www.YourDomain.com/pictures.html">Pics</a>

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:

<a href="pictures.html">Pics</a>

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…

<a href="page.html">

page.html is located in the current directory.

<a href="tips/page.html">

page.html is located in a folder (directory) called tips. The "tips" folder is located in the current directory.

<a href="tips/other/page.html">

page.html is located in a folder called other that is located in a folder called tips that is located in the current directory.

<a href="../page.html">

page.html is located in a folder one level up from the current directory.

<a href="../../page.html">

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 Author: Dennis Gaskill

Study

  1. Read Lena Shore’s explanation of the difference between absolute and relative paths.

  2. Browse Boogie Jack’s article on link paths.

  3. Read Six Revisions’ article on link pseudo-classes .

Additional Resources

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 18.03.2021

CONTRIBUTORS: