1. Computing
Send to a Friend via Email

About Web Design Book Chapter 4 - Example 4-8

Here is the code for example 4-8 in the About Web Design book. The only difference between it and 4-6 is that there is now a line linking to the style sheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dogs and Their Toys</title>
<meta name="description" content="Great dog toys that your dogs will love and information about dogs." />
<meta name="keywords" content="dogs, dog toys, canines, information about dogs, dog help" />
<link type="text/css" href="zexample4-8.css" rel="stylesheet" />
</head>
<body>
<div id="branding"><h1>Dogs and Their Toys</h1></div>
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">Dog Toys for Sale</a></li>
<li><a href="">Dog Information</a></li>
<li><a href="">About this Site</a></li>
</ul>
<div id="body">
<p>
My two dogs would like to share their special knowledge of dog toys. In the course of their life they have tried out numerous dog toys and found that some work better than others.
</p>
<h2>Who Are the Dogs?</h2>
<ul>
<li><strong>Shasta</strong> - a 6-year-old <em>mutt</em></li>
<li><strong>McKinley</strong> - a 1-year-old <em>border collie</em></li>
</ul>
<p> <img src="http://0.tqn.com/d/webdesign/1/0/H/2/1/mckinley.jpg" alt="McKinley" width="200" height="150" />
McKinley says:</p>
<blockquote>I like dog toys that are soft and easy to rip up. They call me the Doctor, because I like to surgically remove the squeakers.</blockquote>
<p> <img src="http://0.tqn.com/d/webdesign/1/0/G/2/1/shasta.jpg" alt="Shasta" width="200" height="150" />
Shasta says:</p>
<blockquote>My favorite dog toy is probably McKinley, because any toy I play with he steals from me. But if I had to choose, I'd pick the big fluffy balls.</blockquote>
<h3>Shasta's Favorite Toys</h3>
<ol>
<li>McKinley</li>
<li>Large fuzzy stuffed balls</li>
<li>Frisbees</li>
</ol>
<h3>McKinley's Favorite Toys</h3>
<ol>
<li>Soft squeak toys</li>
<li>Any toy Shasta has</li>
<li>Squeaky tennis balls</li>
</ol>
</div>
<div id="information">
<p>
Copyright © 2006 <a href="http://webdesign.about.com/bio/Jennifer-Kyrnin-5105.htm">Jennifer Kyrnin</a>
</p>
</div>
</body>
</html>

Here is the style sheet that Example 4-8 uses:

html, body { margin: 0px 20px; }
html { background-color : #3c6; }
body { width : 600px; font: normal 1em Geneva, Arial, Helvetica; background-color:#fff; padding: 0px 5px 5px 5px;}
img { float : left; clear: both; margin-right: 10px;}
h1,h2,h3 { clear : both; }
#information { font-size: .8em; }

Here's what the page looks like.

Jennifer Kyrnin

Discuss in my forum

©2014 About.com. All rights reserved.