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
- 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
- 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.
- 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
Make some changes to the page, if you wish, then use the save as
option from the file menu, to save it as file
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:
This is an example of a relative hyperlink.
Click <A href="mypage2.htm">here</A> to jump to page 2.
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