BitWithBite
HTML Worksheet
🌐 HTML Images
SCORE___ / 20
NameClassDate
After this worksheet you can
Embed images with img/srcAlways write alt textControl width/heightUse figure and figcaption📚 Quick Recap
Images are the most impactful visual elements on the web. The <img> element is a self-closing tag that embeds an image directly into your page. Knowing how to use alt text, dimensions, modern formats, and responsive images is essential for performance, accessibility, and SEO.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1The image tag is:
2Required for accessibility:
3img is a:
4A caption pairs with figure via:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5<img src="cat.jpg" ="A cat">.
6Setting width/height avoids layout .
7Embed logo.png 200px wide with alt.
8When may alt be empty (alt="")?
9JPG vs PNG in one line?
🚀 Section C · Challenge ● CHALLENGE 5
10Write a figure with caption.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-A 4-A | 5 alt 6 shift/jump 7 = <img src="logo.png" width="200" alt="Company logo"> 8 = Purely decorative images 9 = JPG = photos (lossy); PNG = graphics/transparency | 10 = <figure><img ...><figcaption>...</figcaption></figure>