Lesson Practice 3-3:
Working with Layout Elements

Task 1: Add Div Elements to a Page

1. Open your buttontest file.htm in notepad++.
2. Resave this file in your layout folder as divtest.htm.
3. Remove the background image from the page.
4. Change the title and h1 elements to say: Using Div Tags for Controlling Layout
   
   
5. Add div Elements:
   1. Add a div element around the h1 element, giving it a style attribute with a medium color background, and a height of 80.
   2. You will remember that you originally divided the text on the page into roughly three sections with an image in each.
   3. Add a div element around each third of the text, including the image in that section.
   4. Add a style attribute with a different light color background to each div.
   5. Add a div around the remaining elements on the page, including the buttons and links.
   6. Add a style attribute to the div with the same color as the top div.
      
      
6. Resave the file, and keep it open for the next task.

Task 2: Use the Span Element

1. Resave the file as spantest.htm
2. Change the title and h1 elements to say: Using Span Tags
   
   
3. Add div tags:
   1. Choose one phrase or sentence in the first paragraph of text and place a span tag around it. Add a style attribute with the value "font-weight: bold;"
   2. Choose one phrase or sentence in each remaining paragraph and use a span element with a style attribute to make its text a different color.
   3. Do not make a change in the last div element (with the buttons).
      
      
4. Save the file and preview your page in the browser. Make any color adjustments needed and save the file.

Task 3: Add the div and span file-links to your Index file

1. Open your index.htm file.
2. To the Layout section of the page, add a hyperlink to your two new files, using the same pattern of link text and title attributes as your other links.
3. Save the file and test your new link.
   
   
4. Publish your finished files in your folder of the class Share file.
5. Open the index file in the new location and test your links.