Step 7 - Making links
 

Now you have all three pages built for your mini site. The thing that makes web pages and sites unique is that they are interactive. That is, on a basic level, different pages on the same site can be linked together to tell a story or impart information, pages from other sites can be linked to your site to take the viewer to further information and visitors to your site can contact you by email if you put an email link on your site. These three types of link are: Relative - i.e. between the pages on the same site, External - i.e. to external web sites and Mailto - which automatically brings up a blank email message in the viewers default mail program with a designated email address recipient already in the 'To' section.

Just follow the Step by Step below to make three different kinds of links:

Step 1 - Relative links

The Site Manager button



Making links between the pages on your site is easy. Open your 'home' page in Kompozer and highlight the word 'About' beneath the logo and between the two rules ('1' on the screen grab).

Then use the 'Hyperlink' icon on the toolbar (at 2).

This will open the Link dialogue box. Next to the first box on the dialogue is a folder symbol (to the right of 3 on the screen grab). Use that to 'find' your 'about.html' page file and select it.

All you do now is OK to complete this Relative link. Save the page and repeat the process using the 'Find Us' text and making a link with it to your 'findus.html' page file.

 

   
Step 2 - External links

New site box



Now you are going to add an external link to this page, to the real Yorkshire Sculpture Park web site.

First, type 'Yorkshire Sculpture Park' in the cell to the right of your Find Us link, and highlight the text.

Then use the hyperlink icon to open the dialogue box. This time type the URL for the site into the link box: http://www.ysp.co.uk (at 1). Then click the tick box below the word Target (at 2). This will make the link open up in a new browser window or Tab. Then OK.

   
Step 3 - A mailto link



Finally make a mailto link. First add the text: 'Email the Webmaster' to the bottom of your page text.

Highlight the text you have typed and click on the Hyperlink icon in the toolbar.

In the Link Properties dialogue, type an email address in the box at 1 in the screen grab (it can be your own or mine at petegill.net). Then click the tick box next to 'The above is an email address' at 2 in the screen grab. Click OK and you have made an email link.

Save your page and test the links by opening the page in your web browser.

If they have worked, go and make the Relative links on the other two pages then save and test them.

   

Step 4 - Using an image as a link

 


As well as using text as links, images can also be used as links - most commonly you would know them as 'buttons'. Try this as an example:

Open the 'findus' page and click on the YSP logo graphic. Now click on the hyperlink icon in the Toolbar to open the Image properties dialogue (left).
Make sure the Link tab is showing (at 1 on the screengrab)
Then use the Folder icon (at 2) to go and find your site's 'home' page and select it. This will link the page to the logo.
Finally, put in some ALT text to tell users that the logo links back to the home page. Do this by selecting the 'Location' tab. Then in the next dialogue, in the middle section called 'Alternate Text' type: 'Go to Home page' (as below):

Now when the user's mouse hovers over the logo, this text will pop up as a guide.

   
Back to Step by Step