Okay, so we can make basic web pages, but that's a bit dull really. What we really want to be able to do is link all our pages together and link to a whole bunch of other pages.
It's easy.
The Anchor element is an inline element: <A HREF="uri">link text</A>. The content of the anchor element can be text, an image (wait for part 5) or any other inline content. It can contain other inline any elements, apart from other anchor elements. So <A HREF="url">link text including some <I>italcized text</I></A> is permissiable.
So what makes it link to another document? The HREF attribute takes a URL as it's value. And a URL is what? It's the address of a web resource. Any resource, an HTML page, a graphic, a movie, a sound file, anything. And you can link to any of them.
URLs come on two types, relative and absolute.
Relative URLs are a reference to a resource relative to the location of the current document. So if you have files on your desktop called mypage.html and myotherpage.html you can link from the former to the latter by using <A HREF="myotherpage.html">visit my other web page</A>. The same applies if the files are in the same directory of a web server. I linked from part two of this tutorial to this part with <A HREF="tutorial3.html">Next: Part 3, Linking to other documents.</A>.
If the file is in a lower directory on the web server then you link to it by including the directory name <A HREF="myfolder/myotherpage.html">...</A> and so on for multiple levels of nested directories: <A HREF="myfolder/mysubfolder/myotherpage.html">...</A>
If the file is a higher directory of the web server then you can skip back a level like this: <A HREF="../myotherpage.html">...</A> and so on to get back multiple levels <A HREF="../../myotherpage.html">...</A>
To get to a directory which is at a parallel level to the one the current document is in you can combine the two methods: <A HREF="../myotherfolder/myotherpage.html">...</A>
Finally, the root level of your server can be accessed like this: <A HREF="/myotherpage.html">...</A> regardless of where the current document is with respect to the directory structure. Starting from the root, you can then drill down to other folders as per above: <A HREF="/myfolder/myotherpage.html">...</A>. This is useful if you want to include links to, for instance, a search page from many pages within your site without worrying about working out the directory structure every time.
Absolute URLs are needed when we link to resources that aren't on our own web server. They are exactly the same as the address that appears in you browser's address/location bar. So to link to Yahoo I would use <A HREF="http://www.yahoo.com/">Yahoo</A>. You can link to any page in another site, if you can find out the URI then you can include a link to it.
The http:// at the start of the URL must be included, if it isn't the browser will think it's a relative URL and start looking for a directory called www.yahoo.com on your web server.
Web servers are quite smart. When you ask for http://www.yahoo.com they know that you want http://www.yahoo.com/index.html, this is because each web server is configured to have a default filename and when a browser asks for that directory it serves that file out if it is present.
So, http://steve.pugh.net/fleet, http://steve.pugh.net/fleet/ and http://steve.pugh.net/fleet/default.html will all give you the same file because default.html exists in the fleet folder (other web servers use index.html as the default). But http://steve.pugh.net/test/ gives you an error message because there is no default.html in the test directory (other servers may give you a listing of all the files in the directory instead).
But what would happen if I had a file called fleet (no extension) in the root of my web site? Then http://steve.pugh.net/fleet would return that file whilst http://steve.pugh.net/fleet/ and http://steve.pugh.net/fleet/default.html would return the default file of the directory fleet. So, when linking to a directory rather than to a file always include the final slash. It saves time as the browser and server don't have to send messages back and forwards checking whether there's a file called fleet (or whatever) there.
Now you can link to anything that's on a web server, anywhere in the world.
Most graphical browsers display links as underlined and blue, but alternative presentations can be suggested and we'll cover how to do that in the next part.