HTML and CSS Reference
In-Depth Information
HANDS-ON PRACTICE 6.4
Of course, the best way to learn new coding technologies is to practice them. In this
Hands-On Practice you will configure two files: an external style sheet (wildflower.css),
and a splash page similar to the one shown in Figure 6.15. You will use CSS to format
and position the page elements.
Getting Started
Locate the yls.jpg, pls.jpg, showy.jpg, and trillium.jpg files in the Chapter 6 folder in the
student files. Create a new folder called wildflowers. Copy the files to the wildflowers
folder.
Part 1—Code the Splash Page
Review Figure 6.15 and notice the page elements: three images (yls.jpg, pls.jpg, and
trillium.jpg), a logo, and a link. Figure 6.16 shows a wireframe of these elements
arranged on the page.
Figure 6.16
A sketch of the
splash page
elements
In this part of the Hands-On Practice you will code each page element using XHTML
and wrap it in a
<div>
that is assigned to an
id
. Then, in Part 2 you will code CSS to
configure a number of properties including the absolute position, border, font-family,
and so on. As you code the splash page, splash.html, you will place the elements on the
page and assign
id
values. In essence, you are configuring a set of boxes (using the box
model). 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" />
Search WWH ::
Custom Search