BACK

HTML for ~~Dummies~~	Chapter 2
	(pointing somewhere)

In this section non-dummies learn the most important component of HTML - how to point to other web pages. We also find out how to point within a web page, and how to remove the irritating highlighting and underlining that is foisted upon us by benificent browser designers.

1. Pointing elsewhere

The central theme of the web is connectivity - from your webpage, with the simple click of a mouse, you can connect to any other webpage on the net (Provided of course it isn't a page protected by a password, you remembered to pay your internet service provider (ISP), you can connect to your ISP, and the whole darn Web isn't so slow that it's quicker to send a Mchopi runner with a message asking for the page wedged firmly into a cleft stick)!

How do we organise this (The connectivity, not the Mchopi runner)? Easy you create a link using the ANCHOR tag. Look, for example, at the top of this web page, where we have the word BACK. If you click on it, this link will take you back to the previous page. We created this link by saying:

Personally, I can never remember that <a> stands for 'anchor'. I always want to call it "attribute" or "aha" or something. But it works. That is, provided you remember to put in the href part, which actually tells the browser what address the anchor refers to, and most importantly you remember to close off the quote marks. Forgetting the latter consistently screws things up!

2. A few examples

It's rather important to get your links right. Let's say you wanted to point to a particular web-page, for example the main page of the website anaesthetist.com. The correct way of doing this is by:

A good site is
<a href="http://www.anaesthetist.com/index.htm">
the WorldWide Anaesthetist
</a>

Note how the web page reference begins with http:// - this is important, as it tells the browser unequivocally where to go. The whole address is called a Uniform Resource Locator or URL for short. (Those rare and endangered web-page designers who actually take time off to speak pronounce this 'earl', for reasons best known to themselves - maybe it's some sort of eructation). There are a whole host of other things that an URL can begin with, but before we look at them, note a few more things about the above address.

The web-page referred to was called index.htm. This is no accident. The default name for a web-page is always index.htm or index.html. (It's perhaps 'more correct' to use the html suffix rather than htm, but we favour the shorter version). In fact, if the main file in a directory is called "index" then you can leave out the file name - the following is just as good:

A good site is
<a href="http://www.anaesthetist.com/">
the WorldWide Anaesthetist
</a>
Note how we imbedded the anchor in some text. When you finally create the anchor yourself, you'll see that it appears as follows:
A good site is the WorldWide Anaesthetist

It's generally considered a good idea to meld your anchors with the text, so that things read naturally. It's a bit forced to say something like "A good site, the WorldWide Anaesthetist, can be found here", although this is occasionally useful.
See how this example differs from our first one, where we created a link to a page called index.htm. There we had none of this fancy http:// stuff! What's the difference? Well, the reference to index.htm is called a relative reference. It assumes that the file index.htm is stored in the same directory as the file referencing it. It's a darn good idea to use relative references when referring to other pages on your web-site.

3. Other anchors

We now know how to refer to a page on somebody's website, and how to refer to other pages on our website. We promised you other things you can put in an URL. Here are a few:

Example	What it means
<a href="mailto:jvs@anaesthetist.com">	Clicking on this sort of anchor will (with luck) open up your mail program, and allow you to send an email to the specified recipient.
<a href="atag.htm#thetop">	This allows you to move to a specified point within a web page. The name of the specified point is, in the example, thetop. To find out how to set a name, read on!
<a href="ftp://www.anaesthetist.com/pub/afile.zip">	This points to a specific file to be downloaded off the web. In the example, the file is called afile.zip and clicking on the anchor should cause the file to be downloaded to your computer.

4. Setting a name within a page

In the above table, you learnt how to make an anchor point to a specific part of a page. But you need to name that specific part. How do you do this? Easy, as follows:

<a name="thetop">

Note that although you can choose almost any name you want, it's a good idea to:

Keep your names short
Avoid fancy names that contain punctuation or spaces

5. Putting it together..

Just as you did on the previous page, open up your text editor, and create a page as follows:

<html>
<head>
<title>My 2nd Page</title> </head>
<body>
<a name="thetop">
 My Second Page 
 
The <a href="fred.htm">previous page</a>
 
What in the world do you want to do <a href="http://www.microsoft.com/">slowly and inefficiently</a> today?
 
Send mail to <a href="mailto:friend@friendsaddress.com">a friend</a>
 
Go to <a href="#thetop">the TOP OF THE PAGE</a>
</body>
</html>

Try the above (Hint: in most editors you should be able to copy and paste the example. If you're in Windows, highlight the text, copy it, go to MSDOS Edit, press Alt+Enter to get an MS-DOS box with Windoze all around it, and then paste by clicking on the icon). When you use your html browser to view the page (save it as fred2.htm) you should see something like the following (This time displayed in Internet Explorer, for a change):

A snapshot of the second page, viewed in Microsoft IE

6. Dissecting what we did

You'll notice that we cheated a bit on page two. We introduced two new tags, <title> and without so much as a by-your-leave! The <title> tag (used only in the head of the HTML document) is pretty well self explanatory, but take note - the title is NOT displayed anywhere on the web-page itself! It's nevertheless a good idea to give your HTML documents a title. What does mean?

translates as BREAK. In other words, it forces the browser to move to a new line. You will already have noticed (when you, heh, made your last page) that you can put as many text breaks in a web page as you want, but your browser will ignore them. The following two examples are handled in exactly the same fashion:

This is a message

This
is
a
message

Within a web page, both are shown on the screen as:

This is a message

In other words, the breaks in the actual text file are ignored, so in order to force a text break, you have to specify  .

Open up your creation fred2.htm. If you click on the links, they should actually work, provided of course you filled in an appropriate email address where we wrote friend@friendsaddress.com ! But note that, because the page is rather small, you won't see any convincing result when you click on the link
Go to the TOP OF THE PAGE
You might try and put in a few extra  's to move the instruction a page or so down in the browser, and then retry, just to convince yourself that it actually works! Note the style of this link: <a href="#thetop"> - if we leave out a web-page name, then the page used is the current page. Most convenient!

7. How to muck things up!

Here are a few common errors, that can confuse you totally:

Forgetting to close the quotes. If you say something like
<a href="#thetop>this is a pointer to the top etc etc.
Then most browsers will take >this is a pointer to the top etc etc. as being within the quotes. Not only will you muck up the link, but even worse, a lot of code will simply vanish until another quote mark is encountered. A disaster waiting to happen.
Using \ instead of /. When Bill cobbled together DOS, he used the \backslash character where UNIX used the /forward slash - in describing the path to a file. Let's say that you have a directory in DOS on your computer called Fred, with a subdirectory dox containing the file notethis.htm - the path to the file is then Fred\dox\notethis.htm You then move the htm file to your website, and because you have identical directories Fred and dox, you copy the file to Fred/dox/notethis.htm If you now refer to this file using the link:
<a href="Fred\dox\notethis.htm">The file notethis</a>
Then your browser will readily open the file when you click on the link working on your machine at home, but totally screw up when it tries to do the same on the web! All because you used backslashes. Aargh!
Using UPPERCASE where you didn't mean to! In the above example, if our href refers to
<a href="Fred\dox\Notethis.htm">The file notethis</a>
and the file name is actually notethis.htm, the file will NOT be found. Most grown up computers (those that host web-pages) are exquisitely case sensitive. As we said before, stick to lower case unless you have a darn good reason not to.

8. Frills

Should my tags be lower case too?
Originally, html didn't care. The chaps who write the rules (The W3 consortium) seem now to be moving towards even more standardisation, including lower case for all tags. Browsers shouldn't care, but to save yourself future pain, always use lower case.
How do I refer to a file in a higher-level directory?
Let's take an example. The directory dox contains a file called yours.htm and also a sub-directory called fred. In the sub-directory fred we have a file called myfile.htm - now how do we get a link in myfile.htm to point to the file yours.htm ?
Easy. We say: <a href="../myfile.htm">Burble burble</a>
We use a convention similar to that found in both UNIX and DOS, with two dots (..) meaning "take me up one directory". Just don't ever use backslashes!

You promised to tell me how to suppress link highlighting!

By default, most browsers colour and underline all links. Although this is convenient (it tells you the darn thing is a link), it's nice to be able to tweak things a bit. Here are a few examples:

Fancying up links
Trick	What it means	Note
<body link="red" >	If you insert e.g. link="red" into the <body> tag, then unvisited links are highlighted in red.	Useful for aesthetics
<body alink="blue" >	Similar to link, but when you click on the link and hold down your mouse, the colour changes transiently to the specified one.	Of minimal utility!
<body vlink="green">	Visited links will go this colour.	Useful to make this "black" - then once you've visited a link, it becomes less prominent!
<style><!-- A:link { text-decoration: none } --></style>	If you put this (dog's breakfast of a) command in the head of your webpage, all fancy dressing up of links is prevented.	Most useful, despite being hideously ugly and non-mnemonic. Note that after the link has been visited, Internet Explorer still dresses things up!
STYLE="text-decoration: none"	If you put this inside an <a > tag, then dressing up of this tag alone is suppressed.	Most useful!

You now know how to create and link pages. The next page shows you how to create pretty web-pages. We rush on..