Links
The World Wide Web is called a web because the pages contain links to other pages so that if you were to draw a diagram of how all of the pages are linked together that picture would look like a spider web. So that people can get from one of our pages to another and so that our pages can be part of the web we need to add links to our page that will transfer our visitors to another page.
Basically we have two different situations when it comes to adding links to our page. The first situation is navigation links. Here we have a list of links to other pages and those links should be inserted into a list (which is why we covered lists in the previous tutorial). The second situation is where we want to make the pictures or certain words within our content into links. The code for the links in this situation will be similar to our navigation links except that they will not be contained within a list.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Links</title>
</head><body>
<h1>Steve's Page</h1>
<p><a href="steve.htm"><img src="img/steve.jpg" width="66"
height="92" alt="Photo of Steve" title="This is a tooltip." /></a></p>
<p>This web page was written by Steve.</p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="site.htm">Site Map</a></li>
<li><a href="net2f.htm">More Tutorials</a></li></ul>
</body></html>
Here's what the Links page now looks like in your web browser.
Each link in our list is contained within a <a> container that identifies that this is a link. I don't know why that particular name for the tag was chosen, maybe it is an abbreviation for "attach-to" or something similar. The link container has one attribute href that identifies where the link is attached to. This attribute can contain one of several different things:
- the name of a file in the same folder on the web (as in our example page)
- the relative path to a file in a different folder on the same domain (eg. href="award/status.htm" to link to the status.htm page in the award folder) - when specified this way the location is relative to the folder containing the current page
- the path relative to the domain root folder (eg. href="/award/status.htm") - this link will access the award folder within the domain root folder rather than within the current folder
- the full address of the web page including the domain name and starting with http:// (eg. href="http://www.felgall.com/") - you can also reference specific pages within the domain (eg. href="http://www.felgall.com/award/status.htm").
Everything contained within the link container whether text or images or both becomes active (maybe that's what the "a" stands for) and selecting the active content either by giving it the focus and pressing enter or by clicking on it with the mouse will send the request to load the file specified by the href attribute.
On the example page the image at the top has been turned into a link by surrounding the image tag with the link container.
Note that we have not added anything to our page to say how the links should look. Defining the link appearance is a job for stylesheets and not for XHTML.
