Creating the Pages
 |
 |
 |
 |
|
  |
Creating Links
Obviously each Web page on your site is not isolated. At the very least you will have a main page with links to your other pages. But you may well have links to pages on other Web sites. It is also possible to have links that take you to a point on the same page.
Links are created by the use of a pair of Anchor tags <A>…</A> which surround the text which is to function as the hot spot and which contain the url of the page the browser is to fetch when the hot spot is selected or clicked on with the mouse. The general format is
<A HREF="the-URL-of-the-relevant-page">text of hot spot</A>
e.g. <A HREF="http://www.spub.co.uk/wpg/text/e9.html">This page;/A>
On a browser the text of the hotspot will usually appear in blue and be underlined. The URL of the page linked to will be not appear on the page itself, though it will be displayed in the status bar at the bottom of the browser window when the reader moves the mouse over the hotspot. HREF, incidentally, is short for "hypertext reference".
You can also use an image as a hot-spot: put the appropriate image tag <IMG SRC="..."> instead of the hot spottext, and then clicking on the image will take you to the linked page. That is hwo the links in the left-hand column of this page work.
For pages which reside on a different server from the page itself, you must give the full URL - the absolute URL , as it's called - containing the name of the server and the pathname for the correct page. If, however, you are linking to a page on the same server, you can give what's called a relative reference, i.e. the address of the page relative to the page you will be coming from. For example, supposing you have a page whose address is
http://www.spub.co.uk/wpg/software.html
and you want to create a link to
http://www.spub.co.uk/wpg/reference.html
you could indicate this simply with the tags <A HREF="reference.html">…</A>. If you just give a file name, the browser will assume the file is on the same server and in the same directory as the current page. For this reason, if you keep all your pages in one directory, you can make links between them simply by giving the filename and not the complete URL. Of course, you may be using several different directories/folders for your files, in which case you will have to give the directory name as well as the file name.
For example, on the Web site for this book, all the figures (all those that are not just screenshots of existing Web pages) are held in a separate directory called figures, so links to the figures from the main page requires tags such as <A HREF="figures/fig9.html">…</A>, or whatever.
Links within a page
An important technique for making your pages easy to navigate, particularly for longer pages, is to have, near the top of the page, a set of links to the various sections of the page itself. The same technique is used on these page for footnotes: clicking the footnote number at the end of this sentence takes you not to another Web page but down to the relevant location on this page.[1]
You need two separate pairs of tags on the page to achieve this. First you select the point at which you want to end up (often called the target), and you put a special form of the <A> tag there to name it. You can now have an <A> tag elsewhere on this page, which, instead of a URL, contains a hypertext reference to this name. (In this reference, the name is preceded by the # character so that the browser can tell that it's a page location and not a filename.) So the hot spot and the linking information for Footnote 1 is:
<a href="#fn3">[1]</a>
When the browser sees #fn1, it will look through the page to try and find a location (<A NAME=…>) named fn1, and will come across:
<a name="fn1">[1]</a>
and automatically scroll down to that point in the page. In this way, you can give your page a list of contents, and the reader can immediately see what the page contains and can easily get to the section of interest.[2] This is a good way of making a long page easier to use.
E-mail Links
Another type of link you may find useful is an e-mail link: when the reader clicks on the hot spot, the browser will bring up an e-mail window with the correct e-mail address already filled in, and you can simply type a message and send it (assuming you have configured your browser's e-mail facility).
This is done by having a "mailto" URL, something like:
<A HREF="mailto:john@qwb.org.uk">the webmaster</A>
which would allow you to e-mail the webmaster by clicking on the link.
[1] A dummy footnote.