Hyperlinks can take various forms; simple text, pictures, areas of pictures or complex links such as drop down lists written in advanced code such as JavaScript. In this activity you will learn how to make hyperlinks from simple text and pictures to link the pages you have created together and also make links to sites on the internet.
First of all decide where in your code you would like the link to be and type in the text that you want to display on your site. For this task put the links at the bottom of the page. Remember to add a <p> tag to put the text on it's own line. The code should look something like this:-
……………………
<p>My hobbies include playing guitar and tinkering around with my computer.
<p>look at my table
</body>
</html>
Save the code and check it in your browser to be sure the text appears how you expected. Now go back to EditPlus and highlight the words Look at my table (not the <p> tag) and click on the anchor button in the toolbar.
EditPlus will change your code to look like this:-
<p>My hobbies include playing guitar and tinkering around with my computer.
<p>
<A HREF="">look at my table</A></body>
</html>
Look how the code is made up; first a tag <A HREF=""> has been added. You now need to add the exact name of the site you are linking to between the speech marks. This starts the link. The tag </A> finishes the link. Save the file and view it in the browser view ... the text will be underlined and in a different colour.
And now the moment of truth ... does the link work?! Try clicking on the link and see if your tables page appears. If it doesn't the chances are your file is not names EXACTLY the same as you have called it in the link. If necessary use My Computer to rename the file on your disk.
Repeat this methodology to create the link to your picture page. Finally put a link back to your first page on each of the other two. You should then be able to navigate between all three of your pages in your browser.
<html>
<head>
<title>Inserting A Picture</title>
</head>
<body bgcolor="yellow" text="blue" link="red" alink="green" vlink="orange">
<table>
<tr>
<td><IMG SRC="tuc.jpg" WIDTH=250 HEIGHT=282 ALT="TUC Logo"></td>
<td>This text will appear along side my picture</td>
</tr>
</table>
<P><A HREF="task1.htm">Back to Home Page</A>
</body>
</html>
Select all of the image statement as shown below and click the anchor button as in the previous job. This time type the full internet address of the TUC's web site, http://www.tuc.org.uk between the speech marks.
The resultant code looks much more complex than the previous links but the format is exactly the same. Save and view this page. Your picture will now have a coloured border around it and the cursor will change to the hand shape when moved over the picture. Click on the picture and see if the TUC site appears. If it does not check you have got the site address right in your code.