Computing · Year 8

Active learning ideas

HTML: Links and Images

Active learning helps Year 8 students grasp HTML links and images by doing rather than watching. Hands-on coding reduces frustration with broken tags and builds confidence in debugging real sites.

• National Curriculum Attainment Targets
• KS3: Computing - Web Technologies
• KS3: Computing - HTML

• 30–45 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Project-Based Learning
• 35 min · Pairs

Pair Programming: Navigation Maze

Pairs start with three HTML files and add internal links to form a maze-like story path. They include a homepage with external links to school resources, then test all paths together. Swap roles midway to edit and improve each other's code.

Construct a web page that effectively uses both internal and external links.

Facilitation Tip

During Pair Programming: Navigation Maze, assign clear roles so each student writes code while the other checks syntax in real time.

What to look for

Provide students with a partially completed HTML page containing broken links or missing image alt text. Ask them to identify the errors and write the corrected HTML code for one link and one image tag.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 02

• Project-Based Learning
• 45 min · Small Groups

Small Groups: Image Load Challenge

Provide groups with large images; they compress files using free online tools, insert into identical HTML pages, and measure load times with browser developer tools. Compare results across groups and vote on the best optimised page. Discuss trade-offs between quality and speed.

Evaluate the impact of image file size on web page loading times.

Facilitation Tip

For the Image Load Challenge, provide exact start files so groups focus on compression and timing rather than setup.

What to look for

Students exchange their completed web pages. Instruct them to check for: 1. At least three functional internal links. 2. At least two functional external links. 3. All images display correctly with descriptive alt text. They should provide one specific suggestion for improvement to their partner.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 03

• Project-Based Learning
• 40 min · Whole Class

Whole Class: Alt Text Audit

Students build personal profile pages with images, then display on shared screen. Class votes on missing alt text issues using a screen reader demo. Revise pages based on feedback and reshare improvements.

Justify the use of alternative text for images in web design.

Facilitation Tip

During the Alt Text Audit, model use of a screen reader so students hear how missing text affects navigation.

What to look for

Display two versions of the same web page: one with large, unoptimized images and one with optimized images. Ask students to vote on which page they think will load faster and to explain their reasoning, referencing image file size and format.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Activity 04

• Project-Based Learning
• 30 min · Individual

Individual: Portfolio Link-Up

Each student creates a single-page portfolio with links to image galleries and external sites. Add alt text and optimise one image. Submit for peer review via shared drive.

Construct a web page that effectively uses both internal and external links.

What to look for

Provide students with a partially completed HTML page containing broken links or missing image alt text. Ask them to identify the errors and write the corrected HTML code for one link and one image tag.

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

A few notes on teaching this unit

Teach links and images together because students see the immediate effect of their tags. Avoid front-loading theory; instead, let them test small snippets in the browser to notice differences between working and broken code. Research shows that students retain HTML syntax better when they observe the visual impact of their changes right away.

Successful learning looks like students confidently writing internal and external links using the <a> tag and adding images with src, alt, width, and height attributes. They should explain why alt text matters and recognize when to use JPEG or PNG formats.

---

Watch Out for These Misconceptions

• During Pair Programming: Navigation Maze, watch for students who always use target='_blank' without considering context.

  Ask pairs to discuss whether each link should open in the same tab or a new one, then test both options on their maze page. They should justify their choice in a comment next to the link.

• During Image Load Challenge, watch for students who assume larger width and height values create sharper images.

  Guide groups to compare unoptimized PNGs with compressed JPEGs of the same dimensions. Have them time page loads and note the visual trade-offs.

• During Alt Text Audit, watch for students who treat alt text as decoration rather than a functional label.

  Have students run a screen reader on classmate pages and note how confusing navigation becomes when images lack context. Require them to revise at least two pages with specific, descriptive alt text.

---

Methods used in this brief

• Project-Based Learning