Writing Web Teacher Guide Writing for the Web
Teacher Facilitation Guide
Digital Content Creation & Ethics
Lesson 1 of 5
Duration
45-60 Minutes
Objective
Convert dense text into scannable web content using formatting strategies.
Strategy
F-Pattern Awareness & Conciseness Training
1 The Hook: The Heatmap Mystery
Show students the "F-Pattern" heatmap (on the slides). Ask: "Why do you think people look at the page in this shape?"
Highlight that users are "hunting" for information, not reading for pleasure.
Discuss the difference between reading a Harry Potter book vs. looking for a game cheat code online.
2 Key Instructional Points
The Scanning Rules
Use bold for keywords.
Bullet points for lists.
Meaningful subheaders.
One idea per paragraph.
The "So What?" Test
If a reader only sees the first sentence of your paragraph, do they get the main point? If not, rewrite it!
3 Main Activity: Scan Master Challenge
Distribute the Scan Master Worksheet . Students will take a boring, dense block of text about "How to Care for a Pet Dragon" and transform it into a web-ready page.
Facilitation Tip:
Encourage students to use the markers provided to physically highlight keywords before they start rewriting. If they can't find the keywords, the text is too fluffy!
Reflective Questions
"Does making text shorter make it 'worse' or 'less smart'?"
Goal: Understand that conciseness is a skill of clarity, not laziness.
"How do subheaders help your brain organize information?"
Goal: Identify subheaders as cognitive 'anchor points' for navigation.
Writing Web Slides Writing for the Web
Mastering the Art of Scannable Content
Digital Literacy 5th Grade
Where are the eyes?
The F-Pattern
Most people don't read web pages word-for-word. They SCAN in the shape of an "F".
Top bar: Read across
Middle bar: Read half-way
Left side: Skim down
Books vs. Browsers
Reading a Book
Deep, linear, and focused. You read every word to enjoy the story.
Reading a Website
Fast, hunting for specific facts or buttons. You ignore "fluff".
How to be "Scannable"
1
Headings
Big, clear titles that act as a map.
2
Bullet Points
Break long lists into bite-sized chunks.
3
Bold Text
Highlight the most important words.
Scan Master Challenge
You will receive a dense paragraph about pet dragons. Your mission is to rewrite it for a website using:
1 Awesome Header
3+ Bullet Points
Concise Sentences
Bold Keywords
Scan Master Worksheet Scan Master Challenge
Convert "Fluff" into Web-Ready Content
Name:
Date:
Your Mission
The paragraph below is a "text-wall." It's hard to read on a screen! Your job is to distill the core facts and rewrite them for a website using a header, bullets, and bold keywords.
The Text Wall
If you are lucky enough to have a pet dragon, you should know that they require a very specific type of care to keep them happy and healthy in your home. First of all, dragons are extremely sensitive to cold, so you must ensure that their sleeping area is kept at a constant temperature of at least 80 degrees Fahrenheit, which can often be achieved with a heating lamp or a small controlled fire pit. Furthermore, their diet is not like a dog or cat because they primarily eat large amounts of spicy peppers, especially habaneros, which give them the energy they need to produce their breath. Finally, don't forget that a dragon's scales need to be polished once a week with a special volcanic pumice stone to prevent them from becoming dull and brittle, otherwise they might lose their shine and start to crack.
1. Catchy Subheader (What is this section about?)
2. Scannable Body (Use bullet points & bold keywords!)
Is it shorter?
Are there bullets?
Are keywords bold?
Copyright Teacher Guide Copyright & Fair Use
Teacher Facilitation Guide
Digital Content Creation & Ethics
Lesson 2 of 5
Method
Mock Trial & Case Studies
Core Concept
Intellectual Property Rights
Skills
Ethical Decision Making
1 The Hook: "Copyright Court"
Scenario:
"Alex draws a beautiful picture of a space dragon. Charlie takes a photo of the drawing, posts it on their website, and starts selling t-shirts with the dragon on it. Alex is upset. Who owns the dragon?"
Assign students to three groups: Team Alex (The Creator) , Team Charlie (The User) , and The Jury .
Let them debate for 5 minutes before revealing the legal answer: Copyright starts the moment a work is created in a fixed form.
2 Essential Concepts
Copyright
Legal protection for original work. If you didn't make it, you need permission (or a license) to use it.
Fair Use
Exceptions for school work, news, or comedy. It must be "transformative" or for educational purposes.
Public Domain
Old works or government works that are free for everyone to use with no restrictions.
Creative Commons
A way creators say, "You can use this, but follow these simple rules (like giving me credit)."
3 Case Study Analysis
Use the Copyright Case Cards . Small groups will read a scenario and decide if the action is legal, ethical, or "fair use."
Pro-Tip:
Encourage the "Four Factors" of Fair Use simplified for 5th Grade: 1. Purpose? 2. Nature of work? 3. Amount used? 4. Effect on the owner's money?
Copyright Court Slides Copyright & Fair Use
Being an Ethical Digital Creator
Digital Citizenship Law & Ethics
Copyright Court: The Case of the Space Dragon
"Alex drew a dragon. Charlie put it on a T-shirt and sold it for $20. Alex says Charlie stole it. Charlie says it was on the internet so it's free."
Plaintiff
Alex (The Creator)
Defendant
Charlie (The User)
Who is right?
Discuss with your neighbors...
The Golden Rule: Copyright
When does it start?
The moment you create something in a "fixed" form (on paper, in a file, on a screen).
What does it cover?
Videos, music, drawings, photos, and even the code you write!
©
Can I EVER use it?
Yes, thanks to "Fair Use" rules...
School
Projects and teaching.
News
Reporting on the work.
Comedy
Parodies and jokes.
Review
Critics and opinions.
Avoid the Drama
Don't guess if it's "Fair Use." Use things that are born to be shared:
Public Domain
Old or government stuff. Free for all!
Creative Commons
Creator said "yes," just follow the rules.
Copyright Case Cards Copyright Case Cards
Legal, Ethical, or Fair Use? You decide!
Small Group Activity
CASE #101
The Video Background
Maya makes a 30-second YouTube video about her cat. She plays a 15-second clip of a popular pop song in the background because it matches the cat's mood.
Fair Use?
Illegal?
Needs License?
CASE #102
The Poster Remix
Sam finds a photo of the Eiffel Tower from 1920 (it is in the Public Domain). He colors the sky neon green and adds a flying saucer. He sells the posters at a craft fair.
Stealing?
Transformative?
Legal?
CASE #103
The Class Report
Lila is doing a science project on wolves. She prints out 3 photos from a professional nature photographer's website to put on her poster board for class.
Educational?
Credit Given?
Allowed?
CASE #104
The Fan Art Comic
Ben draws a comic book starring "Spider-Man." He writes his own story and gives them away for free to his friends at recess, but doesn't sell them.
Copyrighted?
Ethical?
Allowed?
The Verdict Box
Choose one case above and explain your ruling. Why did you make that choice?
Case #:
Sourcing Citing Teacher Guide Sourcing & Citing Media
Teacher Facilitation Guide
Digital Content Creation & Ethics
Lesson 3 of 5
Goal
Find legal assets and credit creators properly.
Citation
TASL Method (Title, Author, Source, License).
Tool
Safe repositories like Unsplash or Pixabay.
1 The Hook: The T-Shirt Challenge
Tell students: "You are starting a t-shirt business. You need a photo of a Golden Retriever. You have 2 minutes to find one that you are legally allowed to print and sell. Google Images is OFF LIMITS."
Watch as they realize they don't know where to look. Introduce Unsplash and Pixabay as their "Safety Zone."
2 Teaching TASL Citations
Explain that even for free images, giving credit is the "High-Five" of the digital world. Use the **TASL** mnemonic:
T itle
What is the work called?
A uthor
Who created it?
S ource
Where did you find it? (URL)
L icense
What are the rules? (e.g., CC-BY)
3 Workshop: Source Searcher
Students will use the Source Searcher Worksheet to practice finding one specific image and writing out the full TASL citation.
Check for Understanding:
Walk around and ensure students aren't just copying the URL. They need to find the specific author's name on the site.
Media Sourcing Slides Sourcing & Citing
Finding Great Media & Giving Proper Credit
Workshop Digital Ethics
Don't Fall into the "Google Trap"
Just because it's on Google Images DOES NOT mean it's free to use.
"But I found it on the internet!"
The Rule:
Internet ≠ Public Domain. Most things are copyrighted by default.
The "Digital Safe Zones"
Unsplash
Professional photos that are free to use for any project.
Pixabay
Great for photos, illustrations, and even vector graphics.
How to Give a Digital High-Five (TASL)
T
Title
"Golden Retriever in Sun"
A
Author
By Jane Doe
S
Source
Found on Pixabay.com
L
License
Creative Commons CC-BY
Workshop Time!
Grab your Source Searcher worksheet. You have 15 minutes to find one perfect photo for your "Dream Website" and write the full TASL citation.
SEARCHING... CITING... PUBLISHING...
Source Searcher Worksheet Source Searcher
Hunting for Legal Media & Proper Credit
Name: __________________________
Date: __________________________
The Safe Zones
unsplash.com
pixabay.com
search.creativecommons.org
TASL Formula
T itle, A uthor, S ource, L icense
1
The Practice Hunt
Search Pixabay or Unsplash for: Mountain Landscape
Title of Image
Author / Photographer
Source (Website Name)
License Type (Check details!)
The Full Citation (Put it all together!)
Ex: "Sunset in Paris" by User123 via Pixabay is licensed under CC0.
2
The Independent Hunt
Find one image for your own future website. What is the topic of your site?
Hunt Details:
Sketch your image here!
Image Optimization Teacher Guide Image Optimization
Teacher Facilitation Guide
Digital Content Creation & Ethics
Lesson 4 of 5
Focus
Web Performance & Speed
Concept
Resolution vs. File Size
Skills
Image Resizing & Compression
1 The Hook: The Loading Race
Prepare two web pages (or use the slides to simulate). Page A has 10 high-resolution images (5MB each). Page B has the same 10 images but optimized (50KB each).
Ask: "Why does speed matter? What happens if your favorite game took 5 minutes to load every level?"
Discuss "User Experience" (UX).
Introduce the idea that "Bigger is NOT better" on the web.
2 The Big Three: Dimensions, Weight, Type
Dimensions (Pixels)
The physical width and height. Don't use a 4000px wide image if it only shows up as 400px on the screen!
Weight (Kilobytes/Megabytes)
The "heaviness" of the file. 1MB = 1000KB. Aim for under 100KB for web images.
File Type (JPG vs. PNG)
JPG for photos (smaller size). PNG for logos or transparent backgrounds (better quality, bigger size).
3 Simulation: The Shrink Challenge
Using the Image Speed Worksheet , students will compare "Raw" vs. "Optimized" image data and practice the math of conversion (how many 50KB images fit into one 1MB image?).
Teacher Note: If computers are available, show them a resizing tool like Squoosh.app or Canva.
Image Optimization Slides The Need for Speed
Image Optimization & Web Performance
Technical Literacy Web Design
The Loading Race
Team "Raw"
10 Pictures (Original Camera Quality)
50 MB
Loading... 15% complete
Team "Web"
10 Pictures (Resized & Compressed)
0.5 MB
Loading... DONE!
Dimensions vs. Weight
Dimensions (px)
The "Physical" size (Width x Height). How many pixels across is it?
Weight (MB/KB)
The "Data" size. How much storage space does it take?
1 MB = 1,000 KB
Web Rule: Try to keep photos under 100 KB!
Which File is Best?
.JPG
The Photo Pro
Best for photographs. Smaller file sizes, looks great.
.PNG
The Graphic Guru
Best for logos and icons. Support transparent backgrounds!
Optimization Lab
Open your Optimization Challenge worksheet. We are going to calculate the "Speed Gap" and learn how to shrink our digital footprint!
Resizing
Compressing
Publishing
Image Speed Worksheet The Optimization Challenge
Shrinking Data, Speeding Up the Web
Name: __________________________
Date: __________________________
1
Heavy vs. Light
Look at the data below for the same photograph of a cat. Calculate the "Optimization Gap."
Version A: RAW
Dimensions: 4500 x 3000 px
Weight: 8,200 KB (8.2 MB)
Loading Time: 12 Seconds
Version B: OPTIMIZED
Dimensions: 800 x 533 px
Weight: 82 KB
Loading Time: 0.1 Seconds
The Math Challenge:
If Version A is 8,200 KB and Version B is 82 KB, how many Version B images can fit into the same space as ONE Version A image?
Answer: _________ optimized images!
2
Format Detective
Which file type should you use? Write JPG or PNG next to each scenario.
1. A beautiful color photo of a sunset at the beach.
_______
2. A company logo that needs a transparent background.
_______
3. A high-quality icon of a small shopping cart.
_______
4. A background image for your whole website header.
_______
Why it Matters
If your website is slow because of big images, what do you think most people will do when they visit it?
Privacy Teacher Guide Digital Footprint & Privacy
Teacher Facilitation Guide
Digital Content Creation & Ethics
Lesson 5 of 5
Focus
Long-term Online Identity
Concept
Personal Info vs. Public Info
Skills
Safe Self-Publishing
1 The Hook: Social Media Detectives
Show the "Mystery Profile" slide. It includes a post about a new dog, a photo with a school logo in the background, and a mention of "the pizza place on 5th street."
Challenge:
"What can we find out about this person even though they didn't post their address or full name?"
Guide the students to realize that clues add up . This is their "Digital Shadow."
2 The "About Me" Safety Filter
When students build their websites, they usually want an "About the Author" page. Use the **Green/Yellow/Red** light system:
Green (Public): Hobbies, favorite books, pet's name, general city/state.
Yellow (Careful): School name, age, sport team names, specific hangouts.
Red (Private): Full name, address, phone number, passwords, photos of your house.
3 Activity: Safe Profile Builder
Students will use the Safe Profile Worksheet to draft their web bio. They must cross-reference their draft with the "Safety Checklist" to ensure no "Red Light" info is included.
"Is it interesting? Yes. Is it safe? YES!"
Privacy Power Slides Privacy by Design
Protecting Your Identity as a Digital Publisher
Online Safety Digital Citizenship
Footprint vs. Shadow
Digital Footprint
The things you CHOOSE to post. Your website, your comments, your photos.
Digital Shadow
The things that ADD UP. Clues in your photos, GPS tags, and things others post about you.
Mystery Profile: Who am I?
User
@FutureCoder2026
Just posted 2 minutes ago
"Can't wait for our school's Wildcats game tonight! Our colors look so good on me."
"New puppy! He loves our backyard. Check out the blue house next door! "
Detective Challenge: What clues did they leave?
The Safety Filter
NEVER
Full Name
Home Address
Phone Number
Specific Locations
BE CAREFUL
School Name
Age / Birthday
Clues in Photos
Team Names
SAFE
Hobbies / Interests
Favorite Books
Pet's Name
Big Dreams
Bio Builder
It's time to write your "About the Author" page. Make it amazing, make it interesting, but most importantly... KEEP IT SAFE.
Ready to Publish
Safe Profile Worksheet Safe Profile Builder
Creating Your "About the Author" Page
First Name Only: __________________________
Date: __________________________
The "No-Go" Safety Filter
No Full Names
No Addresses
No Phone #s
No School Name
Sketch your Avatar
(No real faces! Use a drawing or symbol)
Catchy Greeting / Headline
Ex: "Hi! I'm [Name], a future web designer!"
Favorite Hobby
A Cool Goal
The "About Me" Story
Write 3-4 sentences about yourself. Remember: Stay in the Green Zone (Hobbies, Pets, Interests, Big Ideas)!
Double Check: Is there anything in your story that could tell a stranger where you live? If so, erase it and rewrite!
SAFE!