Anchors away

Creating a web page with headings and pictures is all very well, but the most important feature of a page is links. Fortunately, you can insert a link very easily using 'anchors.'

An anchor is a special type of tag that can do one of two things - it can tell the browser where to go when it's clicked on, or it can be a marker that people can jump to from somewhere else.

The second type might not sound very useful, but if you have a long page it can be very handy - you could, for instance, put a miniature table of contents at the beginning so that people can go straight to a particular place in the document.

Each anchor that you create in this way has a name

<a name="info">Here's an anchor</a>

This anchor is called 'info' and when someone jumps to it, the text between the tags will be at the top of their browser window - but it won't be highlighted. Named anchors like this are invisible if you just read through the text.

The other type of anchor is a hypertext reference - it tells the web browser where to go when you click on it, and looks like this

<a href="http//www.demon.co.uk/">Click here</a>

The text in the quotes is the URL (Uniform Resource Locator), and can point anywhere on the Internet. The actual link on the page for people to click on will be the text between the start and the end of the anchor tag - in this case the phrase 'Click here.' If you just put the name of a file in the quotes, like "nigel2.htm" then the browser will read that file, which could be a movie clip, a sound or just another page.

You can put a reference anywhere in your web page, and whatever's between the start and the end of the tags will become a clickable link. For instance, if you want, you can make a picture into a clickable button like this

<a href="#info">
<img src="button.gif" alt="Click me!">
</a>

Headings, lists and anything else on the page can be made into links; the only thing that you must remember is that tags can't overlap each other - you can write

<a href="#info"><h1>Click on this heading</h1></a>

but you can't write

<a href="#info"><h1>Click on this heading</a></h1>

The links in those last examples aren't quite the same as the first one - which calls up Demon Internet's home page. They're links to a named anchor called 'info,' just like the example earlier. In fact, you can even go to a specific place in another web page, if you know what it's called - in our example pages, a reference like 'nigel.htm#info' would go to the anchor called info on the page stored in the file nigel.htm.

Browsing

If all this sounds like hard work, don't worry. Once you've done a few pages, you'll soon get used to it. And you can always do it the quick way, using an HTML editor. The walkthrough shows how to create a page with images and links using the Internet Assistant for Microsoft Word for Windows 6.0a; there are similar add-ons available for WordPerfect, and most shareware Web editors work in the same sort of way.

In part 2, we'll look at some of the more advanced things that you might want to include on your page. For now, you should know enough to create a basic page; don't forget to check out the handy hints for a guide to creating pages that are easy to use and look at.


[ NEXT ][ LAST ][ PART 1 ][ PART 2 ][ PART 3 ]

[ Back to the tutorial front page ]