HTML and CSS Reference
Structuring a Web Page
CHAPTER 1 EXPLAINED how to use elements and attributes to create a simple web page. As you progress through
this chapter, you will learn about a number of elements used to create web page layouts, including the <header> ,
<footer> , and <section> elements.
You will also start working on the example website that you will continue to develop throughout this topic, beginning
by planning the pages of the website and then creating wireframes for the page layouts. The objective of this chapter is
to convert these wireframes into web page templates using a collection of new HTML5 elements. In Chapters 3 and 4,
you use these page templates to create all the pages for your website.
Creating Layout Templates
In this section, you start building a website for Joe's Pizza Co. Joe Balochio (the owner) wants a brand new website to
help promote his chain of pizza restaurants. He tells you that he wants the website to look stylish and incorporate
some design aspects inspired by his Italian roots. He wants a menu and information about the locations of all the dif-
ferent restaurants he operates. Joe would also love to have a page for news items so he can let his customers know
about all the great things that his company does.
Now that you have learned how to add the page elements (<html> , <head> , and <body> ) from Chapter 1, it's
time to consider the sections that will make up the visible layout of your pages. When you create page layouts, you
need a logical structure similar to the one described in the following list. (Note that it doesn't have to be exactly like
1. A header
2. Some navigation
3. Some page content
4. A footer
Figure 2-1 shows a screenshot of a page from the Treehouse website. Can you pick out each of these layout sections?