Exercise 7: Images, Color, and Backgrounds

Resources for this exercise:

To do this exercise you will need a profile photograph of you, saved as an optimized JPEG. This must be a clear, recognizable, somewhat recent photo (not an illustration) of your face (no sunglasses, no baby pictures, no far-off-in -the-distance shots, etc.). Your profile photo will be added to your home page. If you need to scan a photo, a scanner is available in the CTC. In addition to your profile photo, you will need four different images (either GIFs, JPEGs, or a combination of both) to do this exercise.

You will aslo need four other images, which can be GIF, PNG, or JPEG images. None of the image files used in this exercise should be more than 400 pixels wide or 400 pixels tall.

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

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 DM60 Exercise 7".

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

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

1.10) This page must contain a second image, also appearing twice, that is a relative link to your home page (this means that if you click on either 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 (as viewed in Firefox). You must use the CSS border property to do this.

1.11) Create an external style sheet for this exercise. Name the file something like "exercise7.css". At a minimum, this style sheet must contain two CSS rules, one to set the background image for the whole page, and one to set the background image of a an HTML element other than <body>. (See steps 1.12 amd 1.13.)

Remember that the relative path to these background images will be from your css folder to your images folder.

1.12) This page must contain a third image that is displayed as a background image for the <body> element.

1.13) This page must contain a fourth image that is displayed as a background image for an HTML element other than <body>.

1.14) All photographs must be JPEGs, optimized for the smallest reasonable file size. See How to Optimize Images for the Web Using Photoshop.

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

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

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

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

1.19) 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.20) Make sure the images all appear on the page. If they don't appear, check your paths!

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

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

Note that when you use the CSS validator to check a page that has a link to an external style sheet, the CSS validator will follow the link from the page to the style sheet to see if the styles are valid. But if you get the "No style sheet found" warning it probably means that the path in your <link> tag to the external style sheet is incorrect (and your styles will not show up).

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

Step 2 - Modify your home page

2.1) Add a profile photo of your face to your home page. This must be a clear, recognizable, somewhat recent photo (not an illustration) of your face (no sunglasses, no baby pictures, no far-off-in -the-distance shots, etc.). If you need to scan a photo, a scanner is available in the CTC.

Your profile photo must be optimized for file size, as all photos on your site must be.

2.2) 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, and that these links are coded as an HTML list.

2.3) 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.4) 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.5) 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.6) 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.7) 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 //.