HTML and CSS Reference
In-Depth Information
and so on. As you code the content page, page1.html, you will place the elements on
the page and assign
id
and
class
values. You are applying the box model—the page
layout is a combination of adjacent and nested boxes. Launch Notepad and type in the
following XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Door County Wildflowers</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="wildflower.css" type="text/css" />
</head>
<body>
<div
id="wrapper"
>
<img
id="imagelogo"
src="pls.jpg" alt="Pink Lady Slipper"
width="200" height="150" />
<div
id="contentlogo"
>
<h1>Door County Wildflowers</h1>
<div
class="nav"
>
<a href="home.html">Home</a>
<a href="spring.html">Spring</a>
<a href="summer.html">Summer</a>
<a href="fall.html">Fall</a>
<a href="winter.html">Winter</a>
</div>
</div>
<div
class="content"
>
<p>Wisconsin's Door County Peninsula is a unique,
ecologically diverse place with upland and boreal forest, bogs,
swamps, sand and rock beaches, limestone escarpments, and
farmlands. A wide array of wildflowers grow in the county because
of this variety of ecosystems.</p>
<p>Explore the beauty of Door County Wildflowers....</p>
<div
class="footer"
>
Copyright © 2010 Door County Wild Flowers<br />
Last Updated on 06/07/10
</div>
</div>
</div>
</body>
</html>
Save your page in the wildflowers folder and test it in a browser. It will not look like
Figure 6.18 since you have not yet configured all the ids and classes in the external style
sheet. Your page should look similar to the one shown in Figure 6.20.
Search WWH ::
Custom Search