Example 2.15. about.html
<!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>About Bubble Under: who we are, what this site is
for</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a
splash!</p>
</div>
</div> <!-- end of header div -->
<div id="bodycontent">
<h2>About Us</h2>
<p>Bubble Under is a group of diving enthusiasts based in
the south-west UK who meet up for diving trips in the
summer months when the weather is good and the bacon
rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and
to ensure that everyone gets a trustworthy dive
buddy.</p>
<p>Although we're based in the south-west, we don't stay on
our own turf: past diving weekends away have included
trips up to Scapa Flow in Scotland and to Malta's
numerous wreck sites.</p>
<p>When we're not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse,
eh?).</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
Example 2.16. contact.html
<!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>Contact Us at Bubble Under</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<div id="tagline">
<p>Diving club for the south-west UK - let's make a
splash!</p>
</div>
</div> <!-- end of header div -->
<div id="bodycontent">
<h2>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or <a
href="mailto:bob@bubbleunder.com">email
bob@bubbleunder.com</a>.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
Linking Between our New Pages
We've successfully created a three-page web site, but there's a small problem: there are no links between the pages! Try for yourself: open index.html and take a look at the display. How will you get from one page to another?
To enable site visitors to move around, we need to add navigation. Navigation relies on anchors, which are more commonly referred to as links. The XHTML for an anchor, or link, is as follows:
<a href="filename.html">Link text here</a>
The a element might not be intuitive (it stands for "anchor"), but you'll get to know this one very quickly: it's what the Web is built on! There are almost as many links in use on the Web as there are Elvis impersonators in Las Vegas. Almost.
- The
a element contains the link text that will be clicked (which, by default, appears on the screen as blue, underlined text). - The
href attribute refers to the URL to which you're linking (be that a file stored locally on your computer, or a page on a live web site). Unfortunately, again, href is not immediately memorable (it stands for "hypertext reference"), but you'll use it so often that you'll soon remember it.
Don't Click Here!
The link text -- the words inside the anchor element, which appear underlined on the screen -- should be a neat summary of that link's purpose (to 'email bob@bubbleunder.com,' for example). All too often, you'll see people asking you to "Click here to submit an image," or "Click here to notify us of your change of address." Never use "Click here" links -- it really is bad linking practice and is discouraged for usability [23] and accessibility reasons. (Why "Click here" is bad linking practice [24], Jukka Korpela.)
Share and Enjoy:
