Links

<A HREF="URL (web address) of page, eg http://jonstorm.com">Text to be clicked on</A>

<A> is another tag like <FONT>, which doesn't do anything without an attribute. Most of the time, the attribute is HREF="target". The target is the web address you want to link to. Although you are supposed to put the target in quotes as I have here, it will work without providing that it contains no spaces.

Note that everything that appears between the closing > of the <A HREF=...> and its "off" tag </A> becomes the text of the link - this is how you make picture links, by including an <IMG SRC=...> tag before the </A>. Don't forget the </A>, or your whole page from that point on will become part of the link!

The target address can be either absolute or relative. Absolute means that you put the full URL of the page you are linking to, eg http://www.jonstorm.com/html/links.htm, which is the full URL of this page. For most purposes you use absolute addresses.

A relative address is where you don't put the full URL, and is used when you are linking to another page on the same site. If you don't specify the full URL, just the name of the HTML page, the browser will look for it in the same directory (folder) and at the same address as the one you are currently viewing. So to link from this page to the page about images, I don't need to type out the whole URL, I can just put "images.htm", like this :

<A HREF="images.htm">Click here for the images section<A>
(The visitor sees Click here for the images section).

Relative links have several advantages, not least that they save you some typing. More importantly, they make it easier to test your website offline : if you use absolute links, then when you click on one of them offline the computer will try and fetch it from the web, rather than your hard disk. If you use relative links, it will look for the page in the same folder of your hard disk that you loaded the original page from.

You can jazz up a link by making it a picture link. To link to Ultraspace and use the Ultraspace icon as part of the link, you would put this :

<A HREF="http://www.ultraspace.fsnet.co.uk/"><IMG SRC="ulticon.jpg" WIDTH=50 HEIGHT=40 ALT="Ultraspace">Ultraspace</A>

Which produces this :
Ultraspace.

Because the IMG SRC tag which calls the graphic comes between the "on" tag - <A HREF etc> - and the "off" tag - </A> - the graphic becomes part of the link. If you don't like the border around the graphic, and many people don't, you can add "BORDER=0" to the attributes of the IMG SRC tag, like this (if you aren't clear about IMG SRC attributes, follow one of the links to the images section) :

<A HREF="http://www.ultraspace.fsnet.co.uk/"><IMG SRC="ulticon.jpg" WIDTH=50 HEIGHT=40 BORDER=0 ALT="Ultraspace">Ultraspace</A>

Which comes out as :
Ultraspace

Note that as I have only given the filename of the Ultraspace icon in the IMG SRC tag, and not a full URL, the icon will only display if there is a copy of it in the same directory/folder as the HTML page you are currently looking at (not the page the link goes to). If you want to fetch an image from somewhere else, say the site you are linking to, put its URL in front of the filename, eg <IMG SRC="http://www.ultraspace.fsnet.co.uk/ulticon.jpg">. But avoid invoking pictures from other websites if possible, because if the other website is slow or down, it will slow your website right down too. You often see this with banner ads. Instead, keep a copy of the image on your site, and invoke it from there.

You don't have to have any text at all as part of the link if you don't want to. Just put the <IMG SRC> tag between the <A HREF=whatever> and </A> tags on its own, without any text.

Index pages

You only need to include the filename if you are linking to a page other than an index page. So to link to this page, for example, you would put "http://www.jonstorm.com/html/links.htm"; but mostly you just link to index pages, so you don't need to put a filename. You don't need permission to include a link to another site's index page, and in fact usually the owner will be delighted.

It works like this to make things easier for us humans. To save you some typing, webservers assume that if you give a URL with no filename what you want to see is the index page, so it looks for a file called index.htm or index.html at that address. If it finds one, that is what it will display. If it doesn't find a page at that address called index.htm (and doesn't find anything else it recognises as an index page), it will just present a list of all the files at that address, which not only looks amateurish, but also may include files you didn't want to make generally available. So you should always have an index page, both in the root of your web area and in any folders you create there. (And anyway, many ISPs require you to have an index page in the root of your web area if they are hosting a website for you).

Of course, this can lead to confusion, because if you run several sites you will soon have lots of different files on your hard disk all called index.htm (in different folders, of course - you can't have two files with the same name in the same folder). To save possible confusion between these different indexes, what I do is add a bit extra to the filename. So on my hard disk, the Jon Storm index is called indexstorm.htm, and the html tutorial index is called indexhtml.htm. This stops me getting them mixed up, and maybe overwriting one index with another by mistake. Then when I publish one of these index pages on the web, I change its name to index.htm after I have uploaded it, so that the webserver will recognise it as an index page.

It's a very good idea to include a link back to your index page from every page on your site. It makes things easier for visitors, and it also caters for anyone arriving at your site on a sub-page rather than your index page; from a search engine, for example. You'll notice that on this site, every page has links to the index, as well as several other useful places, at both the top and bottom of each page.

Link colours

If you do decide to change the colour scheme for links, the way you do it is by adding attributes to the page's <BODY> tag. This is the <BODY> tag from the Jon Storm website :

<BODY BGCOLOR="black" TEXT="white" LINK="#00FF80" ALINK="orange" VLINK="silver">

BGCOLOR is the colour of the "paper"; TEXT is the default colour of the "ink" (if you want ordinary black on white you can omit these two, but I generally put them in anyway for completeness). LINK is an unvisited link; ALINK is an active link; and VLINK is a link that has been visited. Browsers recognise colours by any reasonably common name, but if you want to specify an exact shade you can use a six digit hexadecimal number instead with # in front of it, as I have with the LINK attribute here - I wanted a lighter and brighter green (this one) than you get by just putting green (it looks better against the Jon Storm site's black background). A lot of website designers will tell you that you should use these hexadecimal number codes for all colours, but you don't need to worry about it. Specifying colours by name is much easier and works fine for most purposes. If you do need to specify an exact colour, pretty much any web editing program will let you pick it from a chart, and generate the magic number for you.

Linking to a particular place on a page

<A NAME="anchorname">

But don't call it "anchorname", pick something that describes the location, so you will remember it when you want to link to it. Then when you create the link you add #anchorname to the end of the URL, with no spaces, like this :

<A HREF="target URL#anchorname">

If you are linking to an anchor on the same page, you can omit the URL and just use the anchor name, like this :

<A HREF="#anchorname">

Don't forget the # ("hash") symbol - that tells the browser that you are looking for an anchor on the current page, rather than a new page called anchorname.htm.

Links to anchors on the same page are often used on long documents like FAQs, to create a sort of index at the top of the document which lets you jump straight to the part you are interested in. The only drawback to internal links like this is that they are all in the "visited link" colour, since, obviously, you have already visited the page you are on.