Exercise 7
CSS Box Model and Floats
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See the CSS Box Model tutorial.
- See the CSS Positioning section of the Resources page.
1) Create a new Web page for exercise 7.
2) This page must contain the XHTML 1.0 Strict DocType, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
4) This page must display your name.and say "Exercise 7".
5) This page's <title> must indicate that this is your
exercise 7 page, so it should say something like "John Sky's DM160B
Exercise 7".
6) This page must contain a relative link to your home page.
7) This page must contain an image within a paragrapgh within a div. Make sure the paragrapgh has a good amount of text within it.
8) This page must demonstrate the following box model properties applied to the image:
- padding
- border-style
- border-width
- margin
Do not use zero for any of these values.
9) This page must demonstrate the use of a float property applied to the image. Make sure you have enough text in the paragraph so that the text flows completely around the image.
10) This page must demonstrate the following box model properties applied to the paragraph:
- padding
- border-style
- border-width
- margin
- background-color
Do not use zero for any of these values.
11) This page must demonstrate the following box model properties applied to the div:
- padding
- border-style
- border-width
- margin
- background-color
Do not use zero for any of these values.
12) Save this file as "exercise7.html".
13) Upload your Web page to your public_html folder on the server. Upload your image to your images folder within your public_html folder on the server.
14) View this page (the page on the server, not the page on your disk) in a browser.
Go to:
http://www.webhawks.org/~yourusername/exercise7.html
to view your exercise 7 page.
15) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DocType) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
16) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
17) If there are any errors, fix them, re-upload the page, and validate them again.
18) Make sure your home page has a working link to all your completed exercises, including this exercise, and that the HTML and CSS on your home page validates.
19) Submit the feedback form. To receive credit for this exercise you must submit thi feedback form before it expires. This exercise is due on 4/14/08. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 04/16/08.