Breaking up a Page into Divisions
Breaking up your page into divisions allows you to apply styles to an entire chunk of your page at once. This is particularly useful for designing layouts with CSS (see page 175).
To break up a page into divisions
- At the beginning of the division, type <div.
- If desired, type id="name", where name uniquely identifies the division.
- If desired, type class="name", where name is the identifying name of the class that the division belongs to.
- Type > to complete the opening div tag.
- Create the contents of the division.
- At the end of the division, type </div>.
Example 3.14. There is one large enclosing division (that begins with the level one header and goes to just before the closing body tag) and two inner divisions (that include the level two headers and corresponding paragraphs).
</head><body> <div id="gaudi"> <h1>Antoni Gaudí</h1> <p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture. </p> <p>Barcelona celebrates the 150th anniversary of Gaudí's birth in 2002.</p> <div class="works"> <h2>La Casa Milà</h2> <p>Gaudí's work was essentially useful. La Casa Milà is an apartment building and real people live there.</p> </div> <div class="works"> <h2>La Sagrada Família</h2> <p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the most visited building in Barcelona. </p> </div> </div> </body></html>
Figure 3.15 You generally can't see the effect of divisions until you add styles (see page 147). Then they really shine. You can see this page with styles on my Web site (see page 24).