Printed from TeacherJohn.com • http://www.teacherjohn.com/cabrillo/dm60a/exercises/ex07.php

Exercise 7
Images, Color, and Backgrounds

Resources for this exercise:

Note on your paths to images: You will be creating a folder, within your public_html folder, called "images", that will hold all your image files for homework exercises, so the relative path from your exercise to your image files will be something like "images/filename.gif" or "images/filename.jpg" (changing "filename" to the image file's name, of course).

You will need four different images (either GIFs, JPEGs, or a combination of both) to do this exercise.

Step 1 - Create your exercise 7 page

1.1) Using a basic text editor create an HTML document. This page will become your exercise 7 page.

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

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

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

Remember that now we are using 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">

1.5) 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 XHTML 1.0 Strict, not HTML 4.01 Transitional, as you are using an XHTML, not an HTML, DocType. (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.)

1.6) 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.7) This page must display four different images, some of which will appear on the Web page more than once, as follows:

1.8) This page must contain the first image appearing on the Web page at two different sizes (use the HTML height and width attributes of the <img> tag to do this).

1.9) This page must contain a second image appearing at two different sizes (use the CSS height and width properties to do this).

1.10) This page must contain a third image, appearing twice, that is a relative link to your home page (this means that if you click on this image it should take you to your home page). One instance of this image must have a visible blue border around it, and the other instance must not have a visible border around it.

1.11) This page must contain a fourth image that is used as a background image for the <body>, or for any other HTML element.

1.12) Save this file as "exercise7.html".

1.13) Upload this page to your "public_html" folder on the webhawks.org server.

1.14) Create a folder called "images" directly inside of your "public_html" folder.

1.15) Upload your images into your images folder that is within your public_html folder.

1.16) View your page (the page on the server, not the page on your local disk) in a Web browser:

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

1.17) Make sure the images all appear on the page. If they don't appear, check your paths!

1.18) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DTD) 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.

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

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

Step 2 - Modify your home page

Note that, unlike your exercises that now must validate to XHTML 1.0 Strict, your home page may validate to either HTML 4.01 Transitional or XHTML 1.0 Strict. Whichever standard you use, make sure your validtor buttons or links match the DocType. (In other words, if you are using an HTML DocType, don't use a validator button that syas "XHTML"; if you are using an XHTML DocType, don't use a validator button that syas "HTML".)

2.1) Modify your home page to include a link that goes to your exercise 7 page. Make sure your home page has a working link to each of your completed exercises

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. (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) 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.4) Make sure your home page validates, with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can now easily do this by clicking on your validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.5) If you have used any CSS on your home page, 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.

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 the feedback form before it expires. This exercise is due on 7/10/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 07/12/08.