5. Links

Back to the Beginning

Linking is where it's at in the World Wide Web. A website typically begins at a 'home' page which contains links to other pages local to itself and pages that are somewhere else on the Internet, maybe sitting on a server half-way around the world.

If you wish to provide a link to somewhere, then you use the <A HREF> tag. The A stands for Anchor, it is an anchor point in a document elsewhere. There are a number of ways to link and these are described next.

Typing the tag <A HREF="https://www.intel.com">Intel's Website</A> anywhere within the body of your HTML document, will give you this Intel's Website. If you click on Intel's Website, and you are connected to the internet, then you will be whisked away to view the delights of Intel's Website. The https://www.intel.com bit is called the URL which stands for Uniform Resource Locator. Unlike HTML, URLs are case sensitive.

Notice how that you have a little extra bit to the <A HREF> tag where you type in a description, in this case 'Intel's Website'. This text is enclosed within the whole <A HREF....</A> tag and is used by the browser to provide a 'click point'. This 'click point' is usually highlighted in a particular colour such as blue (for unvisited) and red (for visited), this is your Hypertext Link. These colours can be changed within Cascading Style Sheets.

An annoying feature that you may have noticed with this, is that when you have linked to another website, you lose the page that you were originally looking at. This is not what you as the website developer may want, if you wish for people to come back easily to the original page. To resolve this, within the anchor tag containing the link, insert the attribute TARGET="_blank" and call the new page something like 'New Window'. For example <A HREF="https://www.intel.com/" TARGET="_blank">New Window</A>. A new window now opens when you click on the link. Try the following link, New Window, it is coded exactly as just described.

We don't have to go whizzing off across the world, we can link to another HTML document on the Local Area Network or on your own hard disk.

Typing <A HREF="wwnever.htm">Never Never Land</A> gives you a link to Never Never Land which is a another web page in the same directory as the current page. Click on it now! If the page was in a directory called 'misc' then you would type <A HREF="misc\wwnever.htm"> instead.

OK! Now you're back with us! Notice how that you came back to same place that you left. This is done by having the line <A NAME="some name you made up"></A> at the same place as the hypertext link. This provides a tag for the browser to latch on to when coming back. If you looked at the text of other page (you know the yukky coloured one!) then you will see a link <A HREF="writeweb.htm#filelink">here</A>, filelink being the name I made up for the return tag. The hash is used to tell the parser to look for a name tag within the same document, this is called a Bookmark. For bookmarks, you could do away with the HREF and use NAME instead.

Let's try one more! Click on

How many times did you go up and down? Fun isn't it? Little things....!

I snook in a little graphic and used this instead of words to provide a click point. This is achieved by typing something like <A HREF="#End"><IMG SRC="images/fingerdo.gif"></A>. Not too difficult to do, but it is quite effective!

You can use an anchor to form an E-mail link, for example <A HREF="mailto:someone@somewhere.cog.uk">Someone's E-mail Address</A>. When a user clicks on this link, their E-mail client opens with the address someone:somewhere.cog.uk. This actual address is nonsense of course. You may wonder why I haven't done this for my own E-mail address on the home page of this website. I have found that web spiders or web bots 'travel' the Internet for E-mail addresses to use for spamming purposes. You therefore may be more comfortable using a graphic containing the text of your E-mail instead, thereby minimising the risk of receiving much of the absolute rubbish that gets sent out.

You are wise to perhaps include a 'word' alternative for those browsers that do not support graphics, or for users who wish not to download any graphics in order to speed up browsing. For the previous example you might type in <A HREF="#End"><IMG SRC="images/fingerdo.gif" ALT="Go to the bottom of the page"></A>. The command ALT="" allows you to provide a text alternative if the graphic fails to load for some reason, the link will still operate. Modern browsers pick up on the ALT keyword and display a pop up box when your mouse pointer hovers over the graphic. Try it on the graphics on this page!

Notice that the directory uses a / not a \. Always use the / even if you are working in DOS machines, it is automatically translated, however Unix boxes will not recognise \ as a directory and files will not accessed. Unix servers are the most common HTTP servers on the Internet.

Meanwhile, here is a lovely photo of my local Church:

Home