Lesson Timeline
🔥 Warm-Up
5 min
Discussion: Compare text-only vs. image-enhanced webpages
🔒 Activity 1: Privacy & Safety
5-7 min
Quick assessment or Kahoot review
📋 Activity 2: Project Criteria
5 min
Review requirements and show examples
🖼️ Activity 3: HTML Images
10 min
CodeHS Tutorial: The <img> Tag
✍️ Activity 4: Written Content
5 min
Review <p> and <br> tags
🚀 Activity 5: Build Webpage
25 min
Collaborative with Movement - Students build and troubleshoot together
🏠 Closure & Exit Ticket
15 min
Pair-share and reflection activity
📅 Monday
Collage image designed and saved in PowerPoint
📅 Tuesday
Personal narrative essay typed and ready
🔥 Warm-Up Activity
5 minutes
Prompt: "Imagine you're scrolling through a website. You see a webpage with lots of text but no images. Then you see another webpage with the same text but beautiful, colorful images."
Discussion Question: Which one makes you want to stay and read more? Why?
💡 Teaching Tip: Use think-pair-share strategy. Give students 1 minute to think, 1 minute to discuss with a partner, then 3 minutes for class discussion.
Activity 1: Privacy & Safety Reminders
5-7 minutes
- Quick assessment review of digital privacy and online safety
- Alternative: Use Kahoot for engaging review
💡 Teaching Tip: Keep this quick and energetic. If using Kahoot, have questions pre-loaded and ready to go.
Activity 2: Project Criteria Discussion
5 minutes
- Review the All About Me Collage project requirements
- Discuss webpage structure and expectations
- Show student examples from previous years
⚠️ Note: Have rubric displayed on screen. Walk through each criterion explicitly.
Activity 3: Adding Collage Images with HTML
10 minutes
- CodeHS Video Tutorial: 2.5.3 The <img> Tag
- Learn proper HTML image tag syntax and attributes
- Practice using
srcandaltattributes
⚠️ Important: Students should have their collage image designed and saved before this lesson. Steps to design collage image will be added later.
💡 Teaching Tip: Pause the video at key points to check for understanding. Have students repeat the syntax aloud.
Activity 4: Adding Written Content
5 minutes
- Review paragraph <p> and line break <br> tags
- Discuss proper text formatting for readability
⚠️ Note: Essays should be typed prior to this lesson.
Activity 5: Building the Personalized Collage Webpage
25 minutes
🤝 Collaborative Activity with Movement
- Teacher demonstrates step-by-step webpage construction
- Students follow along using the provided checklist
- Students may move around the room to help peers troubleshoot
- Peer consultations encouraged for problem-solving
Webpage Structure Checklist:
💡 Teaching Tip: Circulate the room during this time. Identify common errors and address them with the whole class. Encourage peer mentoring.
🏠 Closure & Exit Ticket
15 minutes
Reflect & Share (Pair Activity):
- Students pair up and display their completed collage webpage to a partner
- Each student shares feedback and observations
- Each student writes on a sticky note: "One thing I learned about using images on webpages is..." and posts it on the board
Exit Ticket Question:
"How did adding your collage image change the way your personal narrative feels compared to just text alone?"
- Teacher selects 2-3 volunteers to share responses
- Responses should be submitted via Canvas post
Closing Statement: "Today you combined your writing, design skills, and HTML coding to create something unique that represents YOU. Next class, you'll add special touches to your webpage and submit your final link on Friday."
🔄 AVID/WICOR Integration
W - WRITING
- Compose personal narrative essays
- Write descriptive alt text for images
- Reflect on visual and textual storytelling connections
I - INQUIRY
- Analyze the impact of images versus text-only webpages
- Explore HTML syntax and image tag attributes through CodeHS
- Investigate how images influence content perception
C - COLLABORATION
- Whole-class privacy and safety discussion
- Pair-share webpage presentations with peer feedback
- Collaborative troubleshooting of HTML coding issues
O - ORGANIZATION
- Organize multiple images into cohesive collage designs
- Structure webpage with logical flow: title → collage → essay
- Follow systematic step-by-step directions
- Use checklist to track completion
R - READING
- Read and comprehend HTML <img> tag documentation
- Analyze CodeHS tutorials and instructions
- Interpret project rubric and checklist requirements
- Read and respond to warm-up scenarios
📦 Resources Checklist
CodeHS Access
All students logged in
Privacy Assessment
Materials ready or Kahoot loaded
Project Checklist
Printed or digital copies
Student Examples
Previous year samples ready
Sticky Notes
For exit ticket activity
Canvas Assignment
Set up for response submission
Display Screen
For demonstrations
Rubric
Visible to all students
🔗 Important Links
- CodeHS Tutorial: 2.5.3 The <img> Tag
- Project Checklist: All About Me Checklist (to be linked)
- Canvas Assignment: Exit Ticket Response Post
- Student Examples: Sample Collages from previous years
💡 Implementation Tips for Mrs. Simmons
Before Class
- ✅ Test all CodeHS links and ensure video loads properly
- ✅ Have student examples ready to display (2-3 strong samples)
- ✅ Prepare sticky notes and markers at each table
- ✅ Set up Canvas assignment for exit ticket responses
- ✅ Load Kahoot if using for Activity 1