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:

• 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...

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:

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?

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:

<A HREF="http://www.didilogix.com/" style="text-decoration: none; color: #ff0000;">TEXT YOU WANT FOR THE LINK</A>

It would end up looking like this:

Link to didilogix.com

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!

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 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...

<A HREF="http://www.didilogix.com/" TARGET="_blank" style="text-decoration: none; color: #ff0000;">TEXT YOU WANT FOR THE LINK</A>

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...

Click here

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...