5.1 Global Links
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="http://www.intel.com">Intel's Website</A>
the body of your HTML document, will give you
this Intel's Website
. If you click on
, and you are connected to the internet, then you will be whisked
away to view the delights of Intel's Website. The http://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="http://www.intel.com/"
. A new window now opens when you click on the link.
Try the following link, New Window
, it is coded exactly as just described.
5.2 Local Links
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">
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>
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
5.3 Links And Graphics
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:firstname.lastname@example.org">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: