Exercise 8: CSS Box Model and Floats

Resources for this exercise:

1.1) Create a new Web page for exercise 8.

1.2) This page must display your name and "Exercise 8".

1.3) This page's <title> must indicate that this is your exercise 8 page, so it should say something like "John Sky's DM60 Exercise 8".

1.4) This page must contain the HTML 5 DocType that will enable you to use an HTML validator, as explained in How to Use the W3C HTML and CSS Validators.

1.5) This page must contain the character encoding meta tag (as explained in Character Encoding for Web Pages). Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta charset="utf-8">

1.6) 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. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (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.)

Make sure you use the correct links (for HTML 5).

1.7) This page must contain a link with a relative path to your home ("index.html") page (this path will not start with "http://", as it must be a relative path, not a URL).

1.8) This page must contain an image within a paragraph within a div. Make sure the paragraph has a good amount of text within it.

1.9) This page must demonstrate the following box model properties applied to the image:

Do not use zero for any of these values.

1.10) 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.

1.11) This page must demonstrate the following box model properties applied to the paragraph:

Do not use zero for any of these values.

1.12) This page must demonstrate the following box model properties applied to the div:

Do not use zero for any of these values.

1.13) Save this file as "exercise8.html".

1.14) Make sure that the image is optimized for the Web. See the How to Optimize Images for the Web tutorial.

1.15) 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.

1.16) View this page (the page on the server, not the page on your disk) in a browser.

Go to:
http://www.webhawks.org/~yourusername/exercise8.html
to view your exercise 8 page.

Step 2 - Modify your home page

2.1) Modify your home page to include a link that goes to your exercise 8 page. Make sure your home page has a working link to each of your completed exercises, and that these links are coded as an HTML list.

2.2) As always, your home 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. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (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.)

2.3) Make sure the HTML on this page validates (using the HTML 5 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 link. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.4) 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/. 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.

2.5) View your home page (the page on the server, not the page on your local disk) in a Web browser to make sure your links work.

2.6) If there are any errors, fix them, re-upload the page, and validate it again.

Step 3 - Submit the feedback form

3.1) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on . 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 //.