Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160c/exercises/ex10.php

Exercise 10: Responsive Web Images


Resources for this exercise:


In this exercise you will demonstate the use of the <picture> element and the srcset attribute.

Step 1 - Create four image files

1.1 Star with one image (it can be a GIF, PNG, or JPEG).

1.2) Save this image at four different sizes. As part of each image, indicate the pixel width (in other words, the text indicating the pixel width is embedded in the actual image.

Step 2 - Create a page using <picture>, <source>, and srcset

2.1) Create your exercise 10 page.

2.2) This page must use the <picture> element, and the srcset attribute of the <source> element. Here is some sample code to get you started:

<picture>
     <source media="(min-width: 1000px)" srcset="big.gif">
     <source media="(min-width: 500px)" srcset="medium.gif">
     <source srcset="small.gif">
     <img src="default.gif" alt="image description here">
</picture>

This code says that for screens 1000 pixels or wider, download and display "big.gif"; for screens 500-999 pixels wide, download and disply "medium.gif"; and for screens smaller than 500 pixels wide, download and display "small.gif". Of course, this works only in the newest of browsers. Browsers that do not support the <picture> element will simply download and display "default.gif".

2.3) Modify the above code as you see fit, or use it with little-to-no changes.

2.4) This page must contain the HTML5 DocType, and the character encoding meta tag for UTF-8.

2.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. (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.6) Because this page is using the HTML 5 DocType, make sure you change the validator button image (if you are using an image insted of a text link) so that it says HTML, not XHTML.

2.7) This page must display your name and say "Exercise 10."

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

Step 3 - Upload and test

3.1) Upload the page to your folder, upload the images to your images folder, and upload any style sheet to your css folder.

3.2) Test your page in at least one browser to see which image is used. If you see the default image, the browser does not support the <picture> element.00

3.3) On your page, note the results of your test. For each test, list the browser name, version number, and operating system, and what the results were.

Step 4 - Fix any errors

4.3) Make sure the HTML on this page validates (using the XHTML 5 DocType) with no errors, according to the W3C's online HTML Validator. 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.

4.4) Make sure the CSS used with this page validates, with no errors, according to the W3C's online CSS Validator.

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

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

4.7) 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 4/10/17. 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/12/17.