The Web Tutorials

Different page :: Different site :: Anchor points :: Mailto

Chapter Index

Introduction
History
Getting Connected
Browsers
Copyright
Search Engines
HTML
Linking documents
Images
Newsgroups
Tables
Forms
Frames
Photoshop
Page and Site Design
Publishing
Javascript
Free Stuff
Styles
DHTML
On-line Shopping
Internationalism
Advertising
Forums and Chat

Hyperlinks

One of the most exciting things about the web is the way we can click on a link and be taken to a different document almost instantaneously.

For the viewer there is the gratification of an automatic index. You don't have to find the page, or the book, or the shop containing the right book, all you do is click on the link, and you are taken straight to the relevant document.

Links in the text are usually shown on a page in blue and underlined. You have the option to change the browser's default, but there is no real reason to do so.

You will also find that images can be used as links. Sometimes they are surrounded by a blue line to show that if clicked they will act as a link.

Creating your own links

We have a list on our page that can be used as an interactive index. We need to get this index to take us automatically to other pages on our site.

In order to do this we need first of all to create more pages.

When you are creating web pages do remember you have a computer to hand, and that you can automate a lot of the work. Don't type out every page from scratch. Do remember that a certain amount of code needs to be in every page so create a template.

To do this, open up your first document. Keep everything except the first two paragraphs of your text, and then do a Save as, using a different name. You can now use this document as your template.

Next, you need to get out some paper and a pencil and draw a diagram of your site. I know it isn't going to be very big, only three or four pages, but get into good habits right from the start. You need to draw boxes representing your pages, and show how they are going to link together.

Obviously page one is going to have links to pages two, three, and four. Don't forget to put links on those other pages so you can get back to the front page. You might also want to cross-link the other pages.

When you have your diagram and you know where the links are going to be, you can start creating your other pages.

Let's have another look at that list on page one.

Red Admiral
Peacock
Brimstone

That gives us a clue as to how we are going to name our pages. To keep things simple, and so you know exactly where you expect your link to be taking you, name your pages after the butterflies. Call them by the full name if you have a full 32-bit operating system, use abbreviations if you have a 16-bit system.

To keep the typing down I am going to create three documents called red.html pea.html and brim.html. Note the use of lowercase. Try to keep anything that will appear in a URL in lowercase. There is no reason for this except tradition.

I will create these documents by taking my template and doing a Save as three times.

I will change the contents of the TITLE tag in each of these documents to fit the subject matter. I will give each page the full names from the page one list. I will also put in a sentence about the respective butterflies and a line of text directing the reader back to the first page.

Ideally, if you are setting up a full-blown site, your first page should be called index.html. This then automatically loads when the URL for your site is typed into the Location bar in the browser. Thus, typing www.runway.co.uk will automatically bring up my first page which is called index.html.

I will just do the coding for the first of these new pages.

<HTML>
<HEAD>
<TITLE>Red Admirals</TITLE>
</HEAD>
<BODY>
On this page we will discuss the various plants that Red Admirals especially like. 
To a butterfly a plant is food. Here are a list of the foods red Admirals like
When you have finished reading you can return to the index.
Alternatively, email me with suggestions for improving the site.
</BODY>
</HTML>

Note that we have surreptitiously put in text to provide the link back to the index. We have not been exceedingly corny and said "Click here to return the index" . Try to avoid writing the words "Click here". It shouldn't be necessary. And it looks exceedingly naff.

All we need now is to put in the code for the link. Before we actually do it, let's have a look at the various links that are possible, and how the code is made up.

There are four types of link you can use.

A link to a different page on the same site
A link to a page on a different site
A link to an anchor point within the same document
A mailto link

All links are made to anchor points that are clearly defined. Generally speaking a link to another document will open that document at the top of the page. Therefore you don't actually have to specify an anchor point within the document, unless you don't want to go to the top, but want to go to a specific point somewhere down in the body of the page. That can be done, but for the moment, let's look at the most simple way of doing the coding.

A link to a different page on the same site

In the example we have been using above I want to get from my index page to the Red Admiral page when someone clicks on the words "Red Admiral" in the list. To do this I have to tell the browser that I am going to give it a link, and then I have to tell it what the destination file is.

To indicate that a link is coming up I use the phrase A HREF, which is short for Anchor Reference. I then need to add the filename.

In our example the full tag is going to be <A HREF="red.html">. Note there is a space between the A and the HREF, but nowhere else.

To get from "Red Admiral" on our first page to the Red Admiral page we need to add the above tag to our text. Remember the text of our list was:

<OL>
<LI>Red Admiral
<LI>Peacock
<LI>Brimstone
</OL>

If I add the links to all of these items the code will look like:

<OL>
<LI><A HREF="red.html">Red Admiral</A>
<LI><A HREF="pea.html">Peacock</A>
<LI><A HREF="brim.html">Brimstone</A>
</OL>

If you now inport this page into your browser you will see that the items on the list are now coloured blue and underlined, and if you move your cursor over the items it will change to a hand, and if you click on one of the items the browser will display the appropriate page.

A link to a page on a different site

To get to a page on another site I am going to have to slightly change the way the link is coded. The basics remain the same but if the page is on another site we have to use the full URL to get to it. For example, if the red admiral page was on my runway site in a folder called butterflies I would have to set up the link as follows:

<LI>
<A HREF="http://www.runway.co.uk/butterflies/red.html">Red Admiral</A>

Note I have had to put in the full URL, including the http:// part, and have had to show the full route to it, including the directory name.

A link to an anchor point within the same document

If I wanted to go to a particular place within a page I would first have to define that place. The place you go to is the Anchor. So the first thing to do is to define that anchor.

To define an anchor the code you use is <A NAME="name">, where "name" is the name you are going to give your anchor.

I am going to put an anchor at the section where we start talking about food. The code will now look like this.

<A NAME="food">To a butterfly a plant is food.</A> Here are a list of the foods Red Admirals like

To get my link to go to the food anchor I would have to modify my code on the first page to look like this:

<LI><A HREF="red.html#food">Red Admiral</A>

The link code now tells the browser to go to the file called "red.html, and to go to the anchor point "food" within that document.

A mailto link

The fourth type of link is the mailto. This is the link you use to get feedback from visitors to a site. If you want someone to email you from your page you must do it with a mailto link.

You would seek to highlight the words "email me" and use them as your mailto link.

Your text looks like this at present:

Alternatively, email me with suggestions for improving the site.

The email code looks like this:

<A HREF="mailto:joebloggs@jb.co.uk.">

In short you are putting your email address after the mailto term.

You can add an extra section to this. When you use your email package you will have noticed that you have to insert something in the subject line before you can send your letter. You can save your visitor the trouble of entering that item. You can enter it for them.

<A HREF="mailto:joebloggs@jb.co.uk.?subject=feedback">

This will insert the word "feedback" into the subject line of the email.

Your complete text is now going to look like this:

Alternatively, <A HREF="mailto:joebloggs@jb.co.uk.?subject=feedback">email me</A> with suggestions for improving the site.

The words "email me" will now be highlighted in blue and underlined, and when your readers click on the words the browser will open the mail package allowing the reader to send you an email.

Education Home Page Runway Index Back to the Top