Let's create a simple navigation menu that you can drop into your pages. Our navigation is just a list of three links. Here's the markup:
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
We'll place all of this inside a div, so we can quickly and easily see what this block of XHTML represents.
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
Now, we just need to paste this markup into an appropriate place on each of our pages. A good position would be just after the header has finished, before the main body content starts. In the code below, the navigation block appears in position on the homepage:
Example 2.17. index.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>Bubble Under - The diving club for the south-west
UK</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="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div> <!-- end of navigation div -->
<div id="bodycontent">
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" /></p>
<p>Glad you could drop in and share some air with us!
You've passed your underwater navigation skills and
successfully found your way to the start point - or in
this case, our home page.</p>
</div> <!-- end of bodycontent div -->
</body>
</html>
You should now be looking at a page like the one shown in Figure 2.20.
Figure 2.20. Displaying simple navigation on the page
Add the links to contact.html and about.html, then try clicking on the links that you've just added. It should be possible to flick between all three pages, as shown in Figure 2.21.
This is a landmark: you're now the creator of a working, navigable web site! Don't crack open the bubbly just yet, though: first, let's discuss a few more XHTML elements that you can add to your pages.
Figure 2.21. Navigating the web site
The blockquote (Who Said That?)
We're going to add a sound-bite -- well, a written quote, to be precise -- to the About Us page. Here's the line:
Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that!
We'll add the quote after the final paragraph in about.html; here's the markup you'll need:
<blockquote>
<p>"Happiness is a dip in the ocean followed by a pint or two of
Old Speckled Hen. You can quote me on that!"</p>
</blockquote>
Or is it? Who's doing the talking? Well, it's our dear (though fictional) Club Secretary, Bob Dobalina.
Example 2.18. about.html (excerpt)
<p>Or as our man Bob Dobalina would put it:</p>
<blockquote>
<p>"Happiness is a dip in the ocean followed by a pint or two of
Old Speckled Hen. You can quote me on that!"</p>
</blockquote>
The quotation can contain as many paragraphs as you like, as long as each one starts and ends correctly, and the opening <blockquote> tag is closed off properly.
Note: Displaying blockquotes
In most browsers, your use of blockquote will see the quoted text indented in the page display. This effect can be overridden if it's not to your taste, but that's something we'll cover in a later chapter. On the flip side, you should never use the blockquote element for the purposes of indenting text. This is very poor form. Only use blockquote for its intended purpose: to present a quotation. There are other, better ways to create visual indentations.
Share and Enjoy:
