Lab - Week 5 - Three Nested DIVs

[ This lab is for practice. It will not be graded. ]

Lab Guidelines

• Use (and know) the XHTML Basic Template found on COIN 65 Resources page. Be sure to use the XHTML 1.0 Strict DOCTYPE.
• Validate your work using an HTML validator (see Resources page)
• Put any images into a folder called images.
• Write your own code. This pertains to this assignment and any other you receive in this class. Do NOT use our (or anyone else's) code. If you do, you will fail the assignment. If you have any questions about this, see the Foothill Honor Code and/or contact me.
• Be sure to test your work. We will be testing your work in Firefox, Netscape 7.X and/or Safari. We strongly suggest you upgrade to the most recent browser(s).

Specifics

This lab will give you practice in using nested DIVs, and working with the box model properties. Follow these specifics to create Lab 5 - Three Nested DIVs.

• If you have not already done so, create a new directory called week_5 and put all of your week 5 assignments in it.
• Create a new XHTML document called lab5_nested.html using the XHTML template. Be sure to use the Strict DOCTYPE.
• Link to an external style sheet named lab5_nested.css.
• Create three DIVs. Give each one an ID: Div1, Div2, Div3.
• Nest all three DIVs; in other words, put DIV2 inside DIV1 and put DIV3 inside DIV2.
• Use this TEXT file for the content. Copy the text into a paragraph inside DIV3.
• Style the document according to the properties below.
  
  

  Properties	Specifics
  (all elements) all margins all padding	zero
  body text background	black white
  Div1 width margins text color background top padding border	600 pixels center div on screen #000 #5D6943 30 pixels 3 pixels #133921
  Div2 width left margin top margin bottom margin all borders top/bottom border left border right border padding text color background	400 pixels minus 60 pixels 20 pixels 20 pixels #484D24 5 pixels 10 pixels 3pixels 30 pixels #000 #96AC5A
  Div3 width left margin border right border padding text color background	350 pixels 120 pixels 1 pixel #D0FC92 5 pixels wide top/bottom 10 pixels, left/right 100 pixels #000 #D5DEBD

• Your finished document should look similar to the image below.
• If you have Internet Explorer 6 or before, look at the document in that browser. Write observation comments at the top of the CSS file.
• Save, test, and validate the documents.
• Upload the finished files to your web space.
• Create links to both lab5_nested.html and lab5_nested.css from your Home page.