HTML and CSS Reference
In-Depth Information
HANDS-ON PRACTICE 6.6
In this Hands-On Practice you will develop your first two-column Web page using CSS.
As you create the Web page and CSS, keep in mind that using this technique is like cre-
ating a series of nested boxes. Refer to the Web page screenshot shown in Figure 6.21
and the page layout sketch in Figure 6.22 as you complete this Hands-On Practice.
Getting Started
Locate the showy.jpg file in the Chapter6 folder in the student files. Create a new folder
called wildflowers2. Copy the file to the folder.
Part 1—Code the XHTML
Review Figures 6.21 and 6.22. Notice the following page elements: wrapper, left col-
umn, right column, logo, content, right-floating image, and footer. Each of these areas
will be coded to use an
id
or
class
that corresponds to CSS, which configures a num-
ber of properties including the
padding
,
border
,
font-family
, and so on. As you
code the XHTML document, you will place the elements on the page, assigning
id
and
class
values that correspond to the areas in the sketch shown in Figure 6.22. 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" />
</head>
<body>
<div id="wrapper">
<div
id="leftcolumn"
>
<a href="index.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
id="rightcolumn"
>
<div
id="logo"
>
<h1>Door County Wildflowers</h1>
</div>
<div
class="content"
>
<img src="showy.jpg" width="200" height="150" id="floatright"
alt="Showy Lady Slippers" />
<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.
</p>
Search WWH ::
Custom Search