Pre-lab

Pre-lab Reading

• Textbook pp 305-314

Use reading to answer the Pre-lab Questions. Be sure to complete the reading and answer the pre-lab questions in Blackboard before the start of the lab period.

In-lab

Preparation

• Always make sure you save your lab files in the appropriate folder, i.e., lab6.
• For file names, only use lowercase letter and never use spaces.

1. Boxes & Borders

• Download jenware.html and save it to your lab6 folder.
• Inside your lab6 folder, create a sub-folder called images
• Download all the pictures in this images folder and save them to your images folder.
• Use the jenware.htmlfile and complete exercise 14-1 through 14-3 using Notepad++. Refer to pages 315-333 for help.
• It is OK to peek at the solution if you get lost, but do not look at it until you try to do all parts of the activity.
• Make sure jenware.html validates at http://validator.w3.org/#validate_by_upload
• Show your instructor that jenware.html is finished and validates.

2. Questions about Boxes & Borders

• In Notepad++, create a webpage called lab6.html
• Remember to include the basic HTML document structure shown on page 56 (Figure 4-7).
• Answer the following questions and use HTML and CSS to appropriately markup and style your answers according to the instructions in the questions below.

• Boxes & Borders

  1. What is the name of the CSS property for adding a box around an element. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have a box around it similar to the one shown above.
  2. What is the name of the CSS property to add space between the inner text and the inside of the box. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have 5px between the text and inside of the box.
  3. What is the name of the CSS property to add space outside of the box. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have 15px of space outside the box to the left and right.
  4. What is the name of the CSS property to add rounded corners to the box. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have rounded edges.
  5. What does it mean when we say that margins collapse?
• Save your lab6.html file. We will answer more questions at the end of the lab.

3. Floating & Positioning

• Download jenware_ch15.html and save it to your lab6 folder.
• Use the jenware_ch15.htmlfile and complete exercise 15-1 through 15-3 using Notepad++. Refer to pages 341-356 for help.
• It is OK to peek at the solution if you get lost, but do not look at it until you try to do all parts of the activity.
• Make sure jenware_ch15.html validates at http://validator.w3.org/#validate_by_upload
• Show your instructor that jenware_ch15.html is finished and validates.

4. Questions about Floating & Positioning

• Continue to answer the following questions in yourlab6.htmlfile. These questions do not require you to add CSS to your document. Just answer the questions.

• Floating & Positioning

  6. What is the name of the CSS property for making images move to the right or left so text can flow around it?
  7. Why is it often necessary to specify the width of elements if you wish to float them right or left? See pages 344-346.
  8. What happens when there is not enough horizontal room for two floating elements to sit side-by-side on the same line? See page 349.
  9. Describe the difference between px, em, and %.
• Save your lab6.html file.