What makes a web page different from an ordinary word processing document? It's basically the ability to link.
The "World Wide Web" was invented by researchers at CERN, the European research lab in Geneva, Switzerland. The idea was to create pages that can link to each other. You click on a "link" and are transferred to the linked page. It seems like a very simple idea, but it was a radical invention when it first came out. Documents with links are "hypertext"; because they are MORE than regular text. Hmmm.
We're all pretty used to links now, so let's talk about how to set them up in your HTML pages.
A link is created with HTML that looks like this:
<a href="http://www.brandx.net/lacc/caot112/index.html">Click Me!</a>
The first part, beginning with
is the start of the link.<a href....>
is the end of the link.</a>
The text in between the two HTML commands, is the link itself.
Here's what it looks like on a page:
The basic idea is to take the html above, and insert whatever URL you want to link to.
An absolute link is a link that contains the entier URL, including server, path, and filename.
Here's an example of an absolute link:
<a href="http://www.brandx.net/index.html>
An absolute link always takes you to the same exact page, in the same exact location. It does not depend on where you are starting from. An absolute link is complete, and leaves nothing to be calculated. It always goes the same place.
A relative link leaves out the servername, and may leave out the path too, and calculates the destination from your current document. A relative link has a destination that depends on the start point. If a relative link contains path information it will be reltaive to the current location.
For example, we can create a link that goes to another file in the same folder, on the same computer:
<a href="index.html">
Note that this link will be having differently in two different folders, or on two different computers. That's because it will go to this filename, in the same folder as the start file. But since the start file could be copied to different comptuers, it might behave differently.
We cab create a that goes to another file, in a different folder, on the same computer. To move up one folder, use ".." (dot dot). To move down one level, just add the name of the folder with a slash before the filename.
For example
<a href="images/index.html">
Is the start of a link that goes to the file index.html which is in the folder "images", relative to the current location.
Normally pretty much all of your links will be relative.
Why? Because we want to build your website on one computer, usually, and then upload it to the final location. If we used absolute links then none of them would work when we copied the site to the server. You will really want to do everything with you site using relative links.
We use absolute links usually when we are linking to pages that are outside our site.
Create a website with three pages. The subject of the site should be an animal. Put a picture on each page. Put a header and some text on each page. Create a menu that links the pages together. Also, have a link to a website on the internet, such as Yahoo or CNN. Test the links and make sure they work. When you are done you should have a simple web site with a bunch of links that work.