244 CHAPTER 5 More HTML5

Exercise 1: Add a page layout to the calculator project

In this exercise, you apply your knowledge of semantic markup by adding a page layout to

the WebCalculator project that you worked on in Chapter 4, “Getting started with CSS3,” and

then you add style rules to improve the look of the webpage.

This exercise continues with the goal of adding style rules with a minimum of modifica-

tions to the default.html file.

1. Start Visual Studio Express 2012 for Web. Click File, choose Open Project, and then
   select the solution you created in Chapter 4.


2. Select the WebCalculator.sln file and click Open. You can also click File, choose Recent
   Projects And Solutions, and then select the solution.
   If you didn’t complete the exercises in Chapter 4, you can use the solution in the
   Chapter 5 Exercise 1 Start folder.


3. In the Solution Explorer window, right-click the default.html file and choose Set As
   Start Page. Press F5 to verify that your home page is displayed.


4. Open the default.html page and wrap the
   element whose id is calculator with a

   element, and then set the id to container.
   This

   element will contain the complete page layout.
   


5. In the container
   element, insert a

   element containing an

   
   element with an id of headerText. In the

   element, insert an

   element
   containing the text, “Contoso, Ltd.” After the

   element, insert an

   element
   containing the text, “Your success equals our success.”
   The header should look like the following.

   
   

   
   

   Contoso Ltd.

   
   

   Your success equals our success

   
   

   
   

   
   



6. After the
   element, insert a


7. Insert a dummy link to the home page, which is the current page.
   This will display on the page to give you an idea of what the


8. After the