Hypertext Links

The first page which we created used the Markup features of HTML to produce a page layout. Now it is time to introduce the Hypertext features to link your pages to each other, and to pages elsewhere on the World Wide Web. We are going to do this in 5 steps, but first . . . .

Some Comments about File Names

  1. Windows permits file names to be in upper or lower case letters, but ignores the case of the letters when finding files, so that AlaN.htM would be the same file as alan.htm. However some operating systems are sensitive to case. Your ISP may use one of these. So it is prudent to make sure that the case of your filenames matches the case you use for your hyperlinks. I strongly suggest that you stick to lower case letters for filenames everywhere, to avoid any confusion. (Note that some programs save filenames in uppercase even if you enter the names in lowercase. If you find this causes you problems, you will have to use Windows Explorer to rename these files. See also the Extra Topic Why do my Filenames Change Case?)
  2. Since Windows 95, long file names have been permitted. However these can also cause problems with some systems. As with the above, you would probably get away with long file names, but I advise sticking with simple ones consisting or a first part with no more than 8 letters, followed by a second part with no more than 3 letters. For web pages in HTML, the latter should always be htm.
  3. On any web site, you should always have one page called index.htm. If someone just enters the URL of your site, without specifying a filename, this is the page they will first see, so this should always be the entry page to your site.

Step 1, Create Some More Pages

Right, now we are ready to start adding hyperlinks, we will need a few more pages to play with in your webpages directory. The easiest way to get these, is to start with some copies of your file mypage.htm and to change these as required. You can do this most easily from within Notepad.

Make some changes to the page, if you wish, then use the save as option from the file menu, to save it as file mypage2.htm.

One word of warning here:- In the "Save As" dialog box, make sure the "Save as type" drop down box has "All Files (*.*)" option selected, not "Text Documents". Otherwise notepad will add ".txt" to the end of the filename you supply.

Now do the same thing again and make some more pages such as mypage3.htm. Make sure that one of your pages is called index.htm since when you eventually put your pages on the web, this will be the page that visitors first see.

Starting each new page by copying an existing page is always quite a good way to work when designing a site. It saves time to start with a template page which has on it the bits which are common to all the pages on your site. For example when building these tutorial pages, I started with a page called template.htm. (Click on this link to see what it looks like if you wish, then use your browser's back button to return to this page.)

Step 2, Place some Links on your First Page

Links are implemented with a pair of Anchor tags <A> and </A>. To serve any purpose, the <A> tag must always have either an href or a name attribute. The href attribute specifies the location of a page you wish to link to, in the form of a URL (Uniform Resource Locator). This can either be an absolute location, such as "http://www.shotover.org.uk/webweave/links.htm" which is the full URL for this page you are reading, or it may be a relative location such as "links.htm" which would be all that was needed to take you to this page, from anywhere else in these tutorial pages. Within your own site, you should always use relative addresses. This has two benefits. Not only is it a much shorter address, but more importantly, when you move your site from the webpages directory on your own PC to a directory in the webspace provided by your ISP, you won't need to change any of the links.

When the page is displayed on your browser, the text contained between the anchor tags, will appear as a link (by default it will be shown in blue and underlined). When you click this link, you will be taken to the page specified by the URL.

So go ahead and add a link to your first page, mypage.htm. For example, you might add a paragraph like this:

<P>
        This is an example of a relative hyperlink.
        Click <A href="mypage2.htm">here</A> to jump to page 2.
</P>
now view the page and see if it works. (Since you have not yet put any links on mypage2.htm, you will need to use your browsers "back" button to return to your first page.)

Step 3, Add Links on your other pages

Add links to your other pages to take you between them in a logical fashion. Quite a good idea is to make the first page of a site into an index with links to each of the other pages. Then they each need a link to take the viewer back to the index.

Try adding an absolute link to somewhere else on the web if you like. For example you could put in a link to "http://www.dogpile.com" (which is a jolly good search engine).

Step 4, Insert a Named Anchor

The links we have used so far, all result in a jump to a new page, starting at the top. If you have a long page, it is often useful to be able to jump to a point, part way down the page. Anchor tags may be used to accomplish this too. First you need to mark the point you wish to jump to. This is done by using the name attribute. Chose one of your pages that is fairly long, so that the whole page does not all fit on the screen at the same time. If necessary you may need to add some more text to achieve this.

Find some interesting paragraph, somewhere near the bottom of the page and add an anchor something like:

This is an <A name="interest">interesting</A> paragraph.
This will be the target for your link. Note that when this page is displayed, the text contained by the anchor tags is not highlighted in any way. (There would be no point in doing so, since nothing happens if you click this text).

Step 5, Insert a Link to this Target

Go back to some where near the top of the page and add a link such as: 
Click <A href="#interest">here</A> to get to the interesting bit

You can combine the two techniques, so a link such as:

Click <A href="mypage2.htm#interest">here</A> to get to the interesting bit on page 2.
could be put on any of your pages and should take you to the interesting point on your page 2.

You have now learned all you need to know in order to link the pages on your site. At this point it would be a good idea to review what we have done so far. So click here for a recap.

Copyright © Alan Simpson 2000 Back to index. Forward to next page. Last Updated 2001-01-20