Try saving this file as Simple.htm. Also, in the same folder, add a picture
named lake.jpg. Then double-click Simple.htm to view it in Internet Explorer.
You should see something like Figure 4-1.
Improving the design shown in Figure 4-1 is easy enough: Just add an
attribute that centers the headline:
<h1 align=”center”>This Is The Headline</h1>
This results in the more pleasing design shown in Figure 4-2.
But there’s a problem with centering text this way. It’s centered relative to
the browser, not to the graphic. So, if the user’s browser is any wider than
the graphic itself, the centered text moves off center relative to the image,
as shown in Figure 4-3.
HTML wasn’t designed to deal effectively with laying out a page. CSS was
developed, in part, to solve this problem. CSS contains a variety of position-
ing tools, including sophisticated relative positioning. You can make the loca-
tion of one object related (tied to, or relative to) another object. This solves
the problem of the user resizing the browser window: Relatively positioned
objects retain their relationship to each other no matter what happens to the
browser itself.
Figure 4-1:
The simplest
Web page
design
merely
stacks text,
pictures,
and other
elements on
top of each
other, along
the left side
of the page.
70 Part II: Looking Good with CSS
