08. Hyperlinks

The <a> anchor tag is responsible for adding hyperlinks. The <a> tag can be placed around both text and images to make them hyperlinks. The <a> tag needs attributes to make it do anything interesting. The main attribute associated with the <a> tag is href which stands for hypertext reference.

Notice there is a second HTML file called qualifications.html.

In index.html create a hyperlink to qualications.html using the following code:

<p>
<a href="qualifications.html">My Qualifications</a>
</p>

Understanding Absolute and Relative Paths

The above uses a ‘relative’ path. In web design we can link from one page to another using ‘relative’ or ‘absolute’ paths.

Relative Paths – A relative path finds its way to a particular file based on its starting point. Relative paths can therefore be shorter than absolute paths but care needs to be taken to ensure the route taken is correct. An example of a relative path is:

qualifications.html

If qualifications.html was in a sub-folder called myStuff then the relative would be:

myStuff/qualifications.html

If we linked from myStuff/qualifcations.html back to index.html then the path would be:

../qualifications.html

Absolute Paths

An absolute path is one that contains the full URL of the page to be linked to or the image to be included in the file. An absolute path leaves no room for dispute as to its location on the internet. An example of an absolute path is:

http://www.mywebsite/section2/introduction.html

Absolute paths are most commonly used when you link to a page external to your own web site.

When you make text a hyperlink it will appear blue and underlined. If you have visited that page already it will appear pink. The underline effect and colours are default styling, that as we will see later, can be changed by the addition of some CSS.

Other attributes for <a>

The <a> will always need the href to be effective other attributes that can be used with the <a> are title and target.

With title the browser will reveal the text in the title when the user hovers of the link.

<a href="qualifications.html" title="My Qualifications">My Qualifications</a>

With target the browser will open the link in a new browser window when the value _blank is used. The option _new can also be used to limit the amount of tabs that are opened by targeted hyperlinks.

<a href="qualifications.html" target="_blank">My Qualifications</a>