chapter two

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 book, 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 different 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 ...

Get HTML5 Foundations now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.