Links in an HTML document

There are different hyperlinks that can be used in any given html document, like in this post.

One of the most common things students get confused about is linking to other pages and sites, especially when absolute and relative paths come into play. But do not let your several failed attempts of creating hyperlinks within your html document deter your willingness to learn and progress in html programming / coding. Creating links — relative and absolute alike — is actually fairly easy. Read on, and by the end of this article, you’ll know the difference between these two types of links, as well as when and how to use them.
Of course, it’s still important to understand how relative and absolute links work, so let’s see…..
First off, as you know and have notes of my class, you would use the following code to create a link in HTML:

If  you were going to link to ets.html, <a href=”ets.html”>Enfermedades de transmision sexual</a>; ok, now, looking at the hyperlink, ets.html is the webpage you want to link to, and Enfermedates de transmision sexual would be the blue, underlined link that the page displays. In the example above, we used a relative path. You can tell if a link is relative if the path isn’t a full website address. (A full website address includes <a href=””&gt;link me</a> <a href=””&gt;NTC</a> )

This link points to a filename, with no path provided. This means that ets.html is located in the same folder as the page where this link appears. If both files were located in the root directory of the Website , the actual website address the user would be taken to is

In your web folder that we created at the beginning of this course, 2nd semester 2015-2016 ending in May, 2016;  you have the following:

4to A Media and/or 4to B Media (It depends on which of the classroom you are in then  your main web folder or root directory will be 12th A or B)

  • introduction.html   (These three html pages are in the same location)
  • Listofcontents.html
  • directorylist.html
  1. images ( sub-directory)
  2. html reference (sub-directory)
Examples: working with the structure of a this webfolder 4to A Media, we will see a few relative links examples…
  1. <a href=”listofcontents.html”>Listado de contenido</a>
  2. <img  src=”/images/png/myschool.png” width=”90″   height=”90″  alt=”vista frontal de mi escuela”>

Relative Paths

  • index.html (this is your home page)
  • /graphics/image.png (This is within the same web directory of your index.html page)
  • /help/articles/visual_programming.html ( This is within the same web directory of your index.html page)
  • /team/developres/games/dionismazer.html

Now, what if we wanted to use a relative link to show a page in another folder? If you want to link to a file in a subfolder of the current folder, provide the file path to that file, like so: <a href=”/help/articles/scratch/visual_programming.html”>Help visual programming with scratch</a>

In this example above, you’re telling the browser to look in the current folder /help for a subfolder or subdirectory /articles ( /help/articles/ ) followed by /scratch  subdirectory o subfolder ( that contains the file you want the user taken to  visual_programming.html ). You can link to as many subfolders as you need using this method. What if you want to link to a file in a folder above the current folder? You have to tell the browser to move up one folder in your relative link by putting two periods and a slash (../) in front of the filename or path: <a href=”../4tomedia.html>Promoción 2015-2016.</a>

** When the browser sees ../ in front of the filename, it looks in the folder above the current folder. You can use this as many times as you need to. You can also tell the browser to look in a subfolder of the directory above the current one. Using the same example website from above, let’s say we wanted to create a link that would take the user to a page called promocionespasadas.html located in another folder called 4tomedia history. This folder is located in the root directory, one folder up from the current folder, Here’s how a relative link to this file would look: <a href=”../4tomedia history/promocionespasadas.html”>Promociones pasadas </a>


Absolute Links / Paths

  1.  ( This is a web link outside this site. It is said “it’s over the web / Internet” …..)
  2. <a href=;>Visit our HTML tutorial</a>  (Notice this is a hyperlink which shows the clickable part “Visit our HTML tutorial“) this hyperlink will take you to  web site and then into its sub web folder /html .
  3. Let’s say , I have another web site or storage in a given cloud and I want that from here you will be able to click on a link to that cloud and you will see a list of video games in BETA stages that you can download and test them of course and give me feed back in my video games , programming posts in here….