Lesson 4

Links

Links
Web pages are nothing if you can't turn the page. In this lesson, you will learn how to include links to:
1. Other pages on the web.
2. Other pages on your web site, and
3. Other places on the same web page.
4. Use pictures to provide the links

Links to other pages on the web
Links to other pages goes like this:

<a href="http://www.pagetutor.com/" target="_blank">Click here for another tutorial</a>

You should quote the new page url in full rather than starting with 'www'. Note the terminal '/' The 'target="_blank"' attribute will open page tutor in a second browser window. This enables the user to return to your page by switching off the second window rather than having to use the 'Back' button. The use of the attribute 'target' is now deprecated.

Links to other pages on your web site
The link tag to other pages goes like this:

<a href="lesson2.htm">Click to return to lesson 2</a>

Links to other places on the same page
The destination has to be given a name e.g.:

<a name="dest">Destination</a>

Now for the link:

<a href="lesson3.htm#dest">Click here to go to the top of the page.</a>

Use pictures to provide the links
This process is fairly obvious but some of the fine points must also be mentioned. The straightforward picture link goes like this:

<a href="lesson6.htm"><img src="gra/lesson5.gif" width="50" height="10" alt="what you want your user to know about your picture" /></a>

Thumbnails
Some people use a small version of a picture as a link to the full sized version. In this way the user can quickly download the range of pictures and can select the ones to be seen in full detail. A point that should be mentioned here is that while a picture can be given different sets of dimensions, It still takes the same time to download. Use a second version of the picture which has been reduced in size, known as a thumbnail. Blue Borders
Some people do not like the blue border around a picture link. Others do, because it does show that the picture is a link! To get rid of the border use:

<a href="lesson6.htm"><img src="gra/lesson5.gif" width="50" height="10" border="0" /></a>

Examples

1. . Link to another site.
   
   
2. . Link to another page.
   
   
3. . link to up the page.
   
   
4. . A picture link with a border.
   
   
5. . A picture link without a border.

Previous Lesson

Next Lesson