Web Design & Development -- Unit 4 Images

Web Design & Development -- Unit 4 Images
Web Design & Development -- Unit 4 Images
Web Design & Development -- Unit 4 Images
Web Design & Development -- Unit 4 Images
Web Design & Development -- Unit 4 Images
Web Design & Development -- Unit 4 Images
Grade Levels
Product Rating
1 Rating
File Type

Compressed Zip File

Be sure that you have an application to open this file type before downloading and/or purchasing.

61 MB|N/A
Product Description
Web Design & Development 1 in HTML & CSS -- Unit 4 Images

This is the fourth in an eight-unit course which aims for students to master HTML & CSS basics to write complete static web pages. This unit introduces concepts for web images, including how to choose and optimize images, inserting content images with HTML, adding images for style with CSS, and respecting intellectual properties rights when working with images.

If you need a complete curriculum for teaching HTML & CSS in a classroom setting, consider the BUNDLE that contains all 8 units, supplemental ebook, and master student view!

The materials are classroom-ready and created in easily editable formats (such as HTML and Word documents) for quick customization. A variety of activities are provided, including hands-on work with professional tools, worksheets and assessments with answer keys, and web pages and web apps made specifically for use in this course.

This package includes the complete resources for Unit 4 (Images), including lesson plans, answer keys, and project files. The zip file contains 6 primary folders organizing the unit:

Lesson 1 – Choosing Appropriate Images: In this lesson students will identify the rights they have to images as intellectual property (with special attention to the Creative Commons licenses), follow instructions for proper attribution of all images used in this unit, and practice choosing stock photos from free sources. Students will compare/contrast the primary image formats for the web (png, jpg, gif, svg).

Lesson 2 – Editing Images: In this lesson students will apply optimization techniques (crop, resize, compress) to improve both the look and performance of their web pages. Students will practice using image editing software such as Pixlr to create banners, logos, tiled backgrounds, and more.

Lesson 3 – Images for Content and Style: In this lesson students will classify images into two categories, content or style. Students will work with the IMG tag for images that are used as content, applying alt/title text for improved UI and accessibility, and practicing proper markup for attributing image rights appropriately. Students will use CSS background properties for images that are used as style, applying both individual and shorthand background properties as appropriate, and selecting/creating images specifically for use as static or repeating backgrounds.

Lesson 4 – Favicons: In this lesson, students will add the special-purpose favicon image to their pages. Ideally this lesson will involve serving the page over HTTP (you’ll need web server capabilities) and testing on multiple devices, including Android/iOS and virtual machines running multiple versions of Internet Explorer.

Unit Activity – Capstone Project Content Collection: In this activity students will create a bibliography page for their capstone projects (Unit 8). They will choose their topic and begin collecting resources, including notes about the rights they have to the images they wish to use. Students will submit a web page (HTML & CSS) containing their references.

Review and Assessment: Use the images.html reading as a summary review document with suggested activities that students should be able to complete on their own by the end of the unit. The provided assessment may be used directly as an exam or modified as needed.

For the next unit, see Unit 5: The Box Model. For the previous unit, see Unit 3: Intro to CSS. Also check out the complete 8-unit bundle for a full class in HTML & CSS.
Total Pages
Answer Key
Teaching Duration
3 Weeks
Report this Resource
Digital Download

Abby's Door

More products from Abby's Door
Product Thumbnail
Product Thumbnail
Product Thumbnail
Product Thumbnail
Product Thumbnail
Teachers Pay Teachers

Teachers Pay Teachers is an online marketplace where teachers buy and sell original educational materials.

Learn More

Keep in Touch!

Sign Up