Putting it All Together - HTML5 with CSS3

HTML and CSS Reference

In-Depth Information

Listing 10-9. The sidebar on the Power Outfitters home page

<h2>Latest News</h2>

<p>Small things, big savings. All shrink rays are on sale,

this week only! <a href="/blog/shrink-sale">Read all about it!</a></p>

</section>

<img class="product-img" src="images/products/m-v900-shrink-ray.jpg" 

alt="The V900 portable shrink ray is pistol shaped with control 

dials on one side and a decorative fin on top" 

width="260" height="155">

<h3 class="name">V900 Portable Shrink Ray</h3>

<p class="description">Shrink and unshrink inanimate objects

with point-and-shoot simplicity!</p>

</figcaption>

</figure>

</a>

<p><s class="reg-price">$10,799</s> <em>marked down to

<p><button class="cart-add" type="submit" name="product" 

value="V900-shrink-ray" form="cart">Add to Cart</button></p>

</div>

</section>

</aside>

And with that, the Power Outfitters home page is completely marked up. The masthead, content area, and

footer together form a base template that all pages to come will use as a common foundation. We've filled

in some content for the home page, establishing markup patterns and reusable modules that will reappear

throughout the site (or would reappear if we were going to build the rest of it).

We've only touched the home page but you can easily imagine a much larger and more complex website

beyond this single page. Every other page template would follow a similar process of thinking through the

content, choosing the most semantically appropriate elements, and planning for reusable patterns and

modules.

Designing Power Outfitters with CSS

So far we've only shown you the markup for the Power Outfitters home page. We've been thinking ahead

to how we'll eventually style this page, but we haven't yet written a single line of CSS. All our attention has

Search WWH ::

Custom Search

Home