References

When creating a link to another page, an image or a stylesheet, you must use either an absolute reference or a relative reference.

Absolute References

Use an absolute reference when you want to link to a page or image on another website. An absolute reference includes the full URL including the protocol (e.g. HTTP), the server name (e.g. students.depaul.edu) and the file location including folder names (e.g. it130/mypage.html). Here is an example:

     <a href="http://depaul.edu/academics/index.asp">DePaul Academics</a>
    

Relative References

Use a relative reference when linking to a page, image or CSS file that is among your folders of web files. The reference indicates where to find the file relative to the location of the current page.

The main advantage of relative references is that you can move your files to a different location and your links will still work, provided that you move your folders and files all together.

Relative links in the same folder

If you want to link to a file that is in the same folder as your current page, you only need to provide the file name. For example, if you want to link to a page called "mybio.html" that is in the same folder as the file you are editing, you could create this link:

     <a href="mybio.html">About the author</a>
    

Relative links in a sub-folder

If you want to link to a file that is in a folder inside of the folder with your current page, you only need to provide the name of this subfolder, plus a "/", followed by the name of the file. For example, if you want to link to an image called "mypict.jpg" that is in a folder called "images" and is in the folder of the file you are editing, you could create this image reference:

     <img src="images/mypict.jpg" alt="Picture of author" />
    

Relative links in a separate folder at the same level

If you want to link to a file that is in a separate folder at the same level as the folder of your current page, you need to indicate that getting to the folder involves going up one level and then down to the separate folder. Two periods in a row (i.e. "..") indicate going up a level in a relative path. For example, if you want to link to an stylesheet called "mystyles.css" that is in a folder called "styles" at the same level as your current folder, you could create this reference:

     <link href="../styles/mystyles.css"  rel="stylesheet" type="text/css" />