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.