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.

<?xml version="1.0" encoding="UTF-8"?>
<!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="http://steve.felgall.com"><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:

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.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate