Linking using Anchors

Leaving CSS for the time being. We've created a HTML webpage and styled it with CSS. Now we need to start linking a few pages together to create a site.

The make-up of a Link

Links are text on the page within Anchor tags with the Hyperlink REFerence attribute. The value of the Hyperlink REFerence is the address of the page you are linking to. So to link to Google (http://www.google.com) write the following:

  <li>Banana</li>
</ol>        

<h3>Popular links</h3>           

<p>I search using <a href="http://www.google.com">Google</a></p>  

</div>

You must use the whole address. If you don't recognise the 'http' bit quickly visit the Google website and look at the address, the browser adds it in for you automatically.

Linking within the website

Now we'll link to another webpage within our site. We don't have one yet so copy your index.html file and call it about.html. Edit the HTML of the new file changing the Heading 2 from Introduction to About us. You can change some of the content on the page as well if you like. Save the file and close Notepad to save any confusion.

Open index.html in Notepad again.

Add the following between the Header Divide and the Content:

<p>I search using <a href="http://www.google.com">Google</a></p>  

<p>Visit <a href="about.html">About us</a></p>

If you save the page you'll see it links to the other one. You now have a website!

Links are case sensitive so linking to AbouT.html is different to linking to about.html. It is best practice to name all files in lowercase.

Linking with folders

Lets put the about page in a folder and then link to it again. On your Desktop create a folder called 'info' and put your about.html file in it. Now amend the Anchor tag in index.html as follows:

<a href="info/about.html">About us</a>

This now links to the file within the folder. If you open the about us page now though you'll see the styling has gone, this is because the link to the CSS is broken. Open the about.html file in Notepad and amend the link in the Head as follows:

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

The dot dot slash tells the computer to go outside the folder.

Styling links with CSS

Styling Anchors (links) is great fun because they interact with mouse. They have four states:

Below is an example of how to style links:

a:link {    
  color: fuchsia;    
  font-weight: bold;    
  text-decoration: none;  
}  

a:visited {    
  color: fuchsia;    
  font-weight: normal;    
  text-decoration: none;  
}  

a:hover {    
  color: lime;    
  text-decoration: underline;  
}  

a:active {    
  background-color: yellow;  
}

Before being clicked on the link appears in the a:link state, then afterwards it appears in the a:visited state.

The a:hover and a:active properties are applied as well as the a:link or a:visited properties.

In the CSS file Anchor link styles must be written in this order to display correctly: link, visited, hover, active.