11
2011
Lesson 8 – Links
An article by 
The HT in HTML stands for hypertext. Hypertext is what allows us to navigate from one page to another using our favorite web browser.
We can create the linking of page using the <a> tag or anchor tag.
<html> <head> <title>Learning Links</title> </head> <body> <h1>Main Heading</h1> <h2>First Topic</h2> <p>Text of the first topic</p> <h2>Second Topic</h2> <p>Text of the second topic</p> <p><a href="http://www.johnschilling.com">a link to my website</a></p> </body> </html>
In the above HTML code, I created a link to my website using the <a> tag. The href attribute stands for hypertext reference. The href attribute tells the link where to go. The text within the opening and closing tags is the text which appears on the page.
This is what the link will look like:
Links can either be absolute like “http://www.johnschilling.com/” or relative to the current page like “anotherpage.htm”.
Relative Links
If you want to create links within your website, you don’t need to include the full URL for the page. If the page you are linking to is in the same folder you would write the link like this:
<a href="page2.htm">Second Page</a>
If the page is in a subfolder, the link would look like this:
<a href="subfolder/page2.htm">Sample Page</a>
If the page is in a parent folder it would look like this:
<a href="../page2.htm">Sample Page</a>
The reference ../ points to the parent folder. The reference ../../ points to the parent folder of the parent folder. Just as you can go up multiple folders, you can also go down multiple folders like this:
<a href="category/subfolder/page.htm">Sample Page</a>
Absolute Links
A type of absolute link is:
<a href="http://www.johnschilling.com">a link to my website</a>
You use absolute links just as you would put them in the browser’s address bar. Instead of the address bar, put them in the href attribute.
Linking to Files
Links can not only can be linked to other pages, they can also be linked to files. The same rules for relative links apply but instead of a page name, you would but the location of the file.
<a href="files/sample.pdf">Download Sample PDF</a>
You can also write an absolute link to the file:
<a href="http://www.yourwebsite.com/files/sample.pdf">Download Sample PDF</a>
Linking to Another Location on the Page
Another type of link is a internal page link. You may have seen them before in pages that have a table of contents.
These types of links is a two step process. First you have to define where the link will go to. Just give the element an id:
<div id="jumptothis"></div>
To create the link to the element you would put a # and the name of the id in the href attribute.
<a href="#jumptothis">Link to jumptothis</a>
You could even write the link like this:
<a href="http://www.yourwebsite.com/page.htm#jumptothis">Link to jumptothis</a>
