XHTML/CSS Part four - links
Links are what make web pages different to other documents. You may be surprised to learn that ordinary plain text documents can be used on the Internet as well. Your browser will display them quite happily! It is the ability to link documents together, or even make a quick jump in the same document, that the 'Hypertext' in HTML refers to.
So, knowing that we are talking about links or hyperlinks, you will no doubt be confused when we call them 'Anchors'. But that is what they are called and the tag is simply
<a (attribute)></a>
It is the attribute that is actually the hyperlink!
First, I will describe a simple anchor. It is given a name (as all tags should be, except for text formatting tags) or id to identify it. 'Name' was used in the first versions of HTML but now the 'id' is prefered. It has the form <a id="top" /> and is actually written on this page, but you can't see it since the browser doesn't display tags. Notice the space slash that makes it a combined opening/closing tag. What does it do? It is a simple marker that we can later link to. Further down this page, you will find a blue 'Top' which is the hyperlink to the marker we have just described.
To create a hyperlink, we use this form:
<a href="#top">Top</a>
Let me explain it fully. The 'href' is the hypertext reference and is followed by the address or id of an anchor - top in this case. The '#' means that it is on this page. Next comes a human readable description of the link which is actually written on the page. I wrote "Top" but I could have written "Click here to go to the top of the page" - in other words, you can write whatever you like. Finally we close the anchor tag.
This form is often used on large pages. There might be an index at the top where clicking on a subject allows you to jump to the appropriate section of the page. The 'Top' that we have just described would take you back to the index.
Now what I have just described was the original system and is a little out-of-date in the modern getElementById type of browser - which is nearly all browsers! Only really old Netscape and Internet Explorer versions 4 or less aren't capable of using element id's.
The anchor I first described isn't required anymore because every tag which has an id is in fact an anchor! Therefore, we can link to a 'div', or an 'img', or any other tag with an id. Remember though, we link to the id, not the tag! This useful system does require that each element (tag) has a unique id. If we have two tags with the same id, then it will be an error!
Next, to link to another page, we use the same form except that the address is different. Every page is assumed to have an anchor at the top even though there is no actual anchor tag. These anchors are not required! Therefore, on your own computer you could use this:
<a href="mysecondpage.html">My Second Page</a>
Now this will work only if mysecondpage.html is in the current directory! If it isn't, then you will have to give a full path. The page should have scrolled down enough by now, so I'll put the Top link next. Try it!
TopFor use on the Internet, it is best to use the full URL path. We also have an option to open a page in a new window (or tab in a modern browser) by using the target option. The target name can be anything.
<a href="http://www.krelay.com">krelay.com</a>
goes directly to the home page of the site. It need not be your site either - you can link to google, yahoo or anyone else!
<a href="http://www.krelay.com/phpBB2/index.php" target="new">krelay forums</a>
opens the forums main page in a new window or tab.
As you can see, you can easily link to any page or site on the entire Internet if you know the name. While that is a nice, convenient ability, it can also be quite dangerous! Many site owners don't want you to see what is in their 'cgi-bin' for example. But since almost everyone uses ready-made scripts, it is not hard to guess what might be found. Therefore, if you have any secret material, it is a good idea to choose very unusual names for your pages.
OK, you can now make an entire website and you should certainly do so, as I keep saying - practice makes perfect! But there is still a lot more to learn. Nonetheless, we will take a little break from learning the tags and style commands for a while. Are the pages that you have written correct or not? Next we will learn how to validate our pages.