A well designed site will have various links to resources external to it, but should always
have a way for the visitor to get back to your original page from which they accessed the external resource (e.g.
another web page somewhere else on the web).

There are two primary ways that people browse the world wide web:

By using a search engine to find them what they want (which is really just loads of external links)

By using HTL's (hypertext links) that are on people's web sites to "surf" the web

So, the importance of links is obvious: they are what makes the web the web! It follows that
your own web site is only as good as other people's ability to find it amongst the millions of other web
sites that are "out there". Apart from ensuring that you appear in the search engines (more on that
later), the very best way is to get other people to put links on their web site to yours - or particular resources
on yours (such as informative documents). Of course wettiquete (web ettiquette) states that if someone links to
your site you should link to theirs - this is called "reciprocal linking". However, if your web site
is interesting or useful enough, you will find complete strangers linking to it - you won't even know about
it! This is one of the reasons they say "Content is King" - the more useful your site is, the more
famous it will become - hell, you could even end up by making money out of it, e.g. in advertising fees!

In fact, the more people that link to your site, the higher up in the search engines your own
site will be! Why? Because search engines such as Google actually use the number of links to your site as part
of their scoring system in order to "rank" your site - as in how high up your site will appear in its
search listings. So this is another reason why it is great to encourage people to link to your site - the more
people that do, the higher up in the search rankings your site will be!

So how do you actually code external links? First we need to disect what external links actually are and how they work - if you don't want to know, then just skip down to the actual code stuff...

URLs - Universal Resource Locators and "DeNiS(!)

External links are similar to internal links in that you need to code in the location of the
web site (and the page on it if necessary) to which you wish to link. In other words, you need the URL
(Uniform Resource Locator). You should note that more correctly this is called a
URI (Uniform Resource Indicator) and is referred using that method in the HTML specifications.
However, most people use "URL", so we'll do that too - just remember that URI and URL should be
perceived as synonymous with one another for the purposes of this document (that's not quite true - wiki them
if you want to and you'll see why)! Thus the URL is what you either type into the "address" bar of
your browser, or what is contained in the code behind external links.

A URL consists of the following components:
"resourcetype://host.domain:port/pathname". What on earth does that all mean:

resourcetype:// this is the bit where you specify what is known in geek-speak as
the "protocol". What's that? Well, you may already know that what we call the "World Wide
Web" is only one small part of what we call the "Internet". The protocol for the World Wide Web is
called the "Hyper Text Transfer Protocol" which us geeks, being lazy, always
shorten to "HTTP". But there are all sorts of other protocols that can be used on the Internet, such as
"HTTPS" (the secure version which uses SSL (secure socket layer) encryption - this is what makes the
little padlock appear in the bottom right of your browser when you are on a shopping site, for example. There
is "FTP" (File Transfer Protocol) - what you would normally use to
"upload" your web pages onto your web server. And there are many, many others. In fact, the Internet
can be seen being a bit like the UKs road system - lots of different routes to different places, each of which
contains different types of "traffic" (as in, different protocols travelling over the transport medium of
the Internet). In fact, often techies will talk about "http traffic" or "ftp traffic" or
whatever. Anyway, HTTP and FTP and the only ones that will concern us in this tutorial, you will be glad
no doubt to know!

host.domain this is the part that tells where and what the resource is. didilogix.com is an example -
the "didilogix" bit is the host, and the ".com" bit is the domain.

:port if you want to know more about this, then you'd better wiki it - it is a complex subject
and will confuse the issue if I talk about it here because for the types of web sites we are dealing with, we
will never need to actually use this part of a URL - a browser automatically knows the port for HTTP is normally
port 80 so we don't need to type it in!

/pathname - we talked about this in "2.5 Inlining Images" so you should now be familiar
with the fact that pathname is just the "path" to the particular file on your hard drive, or the hard
drive of the web server.

http://www.didilogix.com/HTMLTutorial/HTMLPage3-2.htm is an example of a
URL (note the / after "didilogix.com - the stuff after it is the pathname).

So what is the "DeNiS thing that was in the heading? Well,
computers talk using numbers not text - at the lowest level in binary "1s" and "0s". So
your HTML code in fact has to get converted to binary in order for the computer to actually do stuff with it.
In fact, anything you type or do on your computer has to be converted to binary in order for your
computer to do anything with it! Luckily, this process of "text to binary" conversion (so to speak) is
transparent to us - imaging having to code a web page in binary and what a nightmare that would be!

In the same way, a domain name such as "www.didilogix.com" doesn't mean anything
to a computer! In fact, it has to be converted - or resolved into a number before it will work.
Luckily, the number is not in binary - it is just a number - the computer does the binary conversion. Here's
an example...open a new browser window (e.g. control T) and type in the following:

http://216.92.141.135/ and hit return (you may need to remove the last
/ to get it to work, but sometimes you won't)

You should end up with the didilogix.com web site! Weird huh! Not at all. Do you remember
when you set up your Internet connection that you set up what are called "DNS servers" (what I refer to
as Dennises (like the bloke's name) - hence the "DeNiS joke)? Well, these servers
are the key to what happens after you hit return - and really, the key to what makes the world wide web work!
Your request for a web site gets first sent to one of them (the other one is a backup in case the first Dennis
doesn't work or is just busy). That Dennis server has a massive list of other "Dennises" on the
Internet - one or more of which may be the "authoritative" DNS server for the domain name (i.e. URL)
you typed in your browser.

In the case of didilogix.com, the DNS server at my ISP (in the UK) will ask other Dennises in
its list if any one of them have heard of (is authoritative for) the domain didiogix.com, and if so, which
country didilogix.com is in, and where within that country is the web server that the didilogix.com web site
files are on! The relevant Dennis performs what is called a "doman name resolution" service (in fact
DNS stands for "Domain Name Service). It does this using the format 216.92.141.135
we mentioned earlier, which are kind of coordinates that tell what which country. which county. which network.
which computer (or server) your web server is on. These addresses are called "IP Addresses" - I
may write a bit about them in the future but they are not directly relevant to HTML so I shall not discuss
further here. At least you know that they are what behind how web pages get to appear in your browser when you
have typed a URL into your address bar, or what link you have clicked on behind which is a URL! If all of that
proceeds to plan, and the right server has been found, then the files for the web site will be sent all the way
over the Internet back to the requester - you!

This is all a bit of a simplification, but is a
good basic gist as to how it all works. Okay so how do we code these link thingies up?

Coding External Links

All you have to do to code up an external link is:

<A HREF="http://www.didilogix.com/">TEXT YOU WANT FOR THE LINK</A>

Exactly the same things we said at the bottom of the previous page about link colours and
removing the underline still work for these, so if you used:

How simple is that? One thing to remember with links is to go back and check them on your
site once in a while, to make sure they still work! It is poor webmastering if you do not keep your links
updated. You can get a bit of sofware to check your links for you - see my Links Page if you want one!

Other Types of External Link

You can also code to other external resource types that use different protocols, here are some
examples:

FTP Servers: Linking to one of these (obviously only if you are allowed to!) will enable your visitors
to download software they may need to view your site, e.g. Shockwave, or some other "plug-in" they may
need to optimize their browser. An example of what the code may look like (but you will need to find out the
address for the relevant server, the below is just an example!):

<A HREF="ftp://ftp.company.com/rest of path/bit of software.exe">

Mailto: This links to an email address: yours, your mate's - anybody's! For example, the
code behind the mail-link - the red-coloured text: Didi Barnes - above the copyright
information section at the bottom of this page is:

<A HREF="mailto:info@didilogix.com">Didi Barnes</A>

So if you wanna stuff your email address on your site, just replace the "didilogix" stuff with your own
mail address! When user's click it, it will open their e-mail program ready to send an e-mail. But beware, automated spam robots will trawl web sites for e-mail addresses and add any they find
to a list that spammers can use to spam you. For this reason, the "info@didilogix.com" e-mail address
that I use is separate from my others and has very strong spam filters.

The "TARGET" Attribute

The trouble with all these links we have spoken about so far is that when a user clicks on
them, they get taken away from your web site entirely and won't get back to it unless they use their
browser's back button (as long as they haven't surfed to the point that they can't get back to your
site using that method!). This can cause two problems. Firstly a problem to the user in that it may be
difficult for them to get back to your web site. Second a problem for you - you don't want people to be taken
away from your site! This is no problem, you can actually specify whether the link opens a new window (keeping
your web site open in the other window), or whether the link does open a page that replaces the previous one.
Here's how...

See the TARGET="_blank"... in that code above? It is this
that says, in effect, "create a blank page", so that the browser will open a brand new window for the link
resulting in your own page remaining open in another. Click the link below and you will see what I mean...

In place of "blank" you can also use "-top" which will make the browser
replace your page with the page resulting from the clicked link. Now this is also useful because it would drive
your users mad if each time they clicked on one of your internal links (e.g. to the next page), a brand new
window was opened. So only use the target="_blank" for external links. Luckily
you don't have to specify for "top" because it is default in most browsers. However, I almost always
do simply to make it very clear how I want a browser to treat the link. Also, remember you must always put the
leading "_" before the "blank" or "top", otherwise it just won't work!

NEXT: let's have a look at how to use images instead of text as links...