3.2 External Links
So, you want to link to other people's stuff? Here's how...
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:
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:
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:
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 220.127.116.11
we mentioned earlier, which are kind of coordinates that tell what
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:
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:
It would end up looking like this:
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:
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...
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
NEXT: let's have a look at how to use images instead of text as links...