Block Day: October 15 (A Day) & October 16 (B Day)
⏰ Class Time Remaining: 90:00
0% Complete
📚 Learning Objectives & Goals
🎯Main Objective
Students will be able to integrate HTML coding, writing, and style attributes to create a personalized webpage featuring a collage image and narrative text.
HTML Coding Goals:
💻 Goal 1: Apply HTML coding skills to display images using <img> tags with proper src and alt attributes
✏️ Goal 2: Apply HTML coding skills to format, align, and emphasize text and lists
🔍 Goal 3: View webpages in a browser preview to troubleshoot and fix display issues
🌟 Why This Matters
Today, students will discover how images create emotional connections and influence how viewers perceive written content. They'll combine visual design, thoughtful writing, and HTML code to create something uniquely theirs!
🔥 Warm-Up Discussion (5 minutes)
Discussion 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."
Which one makes you want to stay and read more? Why?
💡 Teacher Tips:
Display prompt on daily slide
Have students discuss with elbow partners first
Call on 2-3 volunteers to share with the class
Connect responses to today's project objective
🎯 Instructional Activities (60 minutes)
🔒Activity 1: Privacy & Safety Reminders (5-7 min)
Quick review of digital privacy and online safety
Remind: Use generic, thematic images only (NO personal photos)
Review appropriate content for school webpages
Alternative: Use Kahoot for engaging review
📋Activity 2: Project Criteria Discussion (5 min)
Review All About Me Collage project requirements
Show student examples from previous years
Discuss webpage structure expectations
Answer clarifying questions
🖼️Activity 3: Adding Collage Images with HTML (10 min)
Teacher demonstrates step-by-step webpage construction
Students follow along in CodeHS
Students may move around to help peers troubleshoot
Encourage peer consultations and problem-solving
Teacher circulates for individual support
✅ Student Checklist
Students should check off each item as they complete it:
📸 Image Requirements
My collage contains at least 4-6 images that represent me
I saved my collage as a .jpg or .png file
I uploaded my collage image to CodeHS
My <img> tag has the correct src attribute
My image has an alt attribute that describes the collage
🌐 Webpage Structure
My webpage has a clear title/heading
My personal narrative essay is included below the collage
The text is easy to read (good font size and color)
My webpage is organized and neat
💻 HTML Code
I used the <img> tag correctly
I used style attributes to adjust image size or alignment
My code has no errors (no red underlines in CodeHS)
My webpage displays correctly in the preview
🌟 Content Quality
My collage images are appropriate for school
My essay is complete and edited
My webpage represents who I am accurately
I followed internet safety guidelines (no personal photos)
🏠 Closure & Exit Ticket (15 minutes)
👥Reflect & Share - Pair Activity (8 min)
Students pair up and display their completed 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..."
Students post sticky notes on the board
Class briefly observes patterns in responses
📝Exit Ticket Question (7 min)
"How did adding your collage image change the way your personal narrative feels compared to just text alone?"
Students submit responses via Canvas post
Teacher selects 2-3 volunteers to share responses aloud
Class listens respectfully to peer reflections
🎉 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."
📅 Next Steps:
Friday: Students will add final enhancements (scrolling text, quotes/sounds) and submit their completed webpage link!
