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.

• Year 8
• Computing
• 4 activities
• 30 min–45 min

Learning Objectives

1. Create a multi-page HTML website with at least five internal links and three external links.
2. Analyze the impact of image file formats (JPEG, PNG, GIF) on web page loading speed.
3. Justify the selection of image dimensions and file sizes for optimal user experience and performance.
4. Demonstrate the correct use of the 'alt' attribute for accessibility and SEO purposes.
5. Compare and contrast the functionality of internal versus external hyperlinks.

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.

Prepare & details

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.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

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

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.

Prepare & details

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.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

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

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.

Prepare & details

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.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

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

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.

Prepare & details

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

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

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

Teaching This Topic

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.

What to Expect

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

Common Misconception

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

What to Teach Instead

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.

Common Misconception

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

What to Teach Instead

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

Common Misconception

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

What to Teach Instead

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.

Assessment Ideas

Exit Ticket

After Pair Programming: Navigation Maze, give each student a starter HTML file with one broken internal link and one missing alt attribute. Ask them to correct both issues and explain why their fixes work.

Peer Assessment

After Image Load Challenge, have students exchange portfolio pages. Peers check for three internal links, two external links, and alt text on every image, then give one specific suggestion for improvement.

Quick Check

During the Alt Text Audit, show two portfolio pages side by side: one with large unoptimized images and one with optimized images. Ask students to vote on which will load faster and explain their reasoning based on file size and format.

Extensions & Scaffolding

• Challenge: Ask students to add a favicon and a link to a Google Font on their portfolio pages.
• Scaffolding: Provide pre-written link and image tags with missing attributes for students to complete.
• Deeper exploration: Have students research SVG format and compare file size and quality with JPEG and PNG samples.

Key Vocabulary

Hyperlink	A clickable element in a web page that directs users to another page or resource. It is created using the 'a' tag in HTML.
src attribute	Specifies the URL (path) of the image file to be displayed on the web page. It is used within the 'img' tag.
alt attribute	Provides alternative text for an image, displayed if the image cannot load or for screen readers. It is crucial for accessibility and SEO.
File Size Optimization	The process of reducing the size of image files without significantly degrading visual quality to improve web page loading times.
Relative Path	A file path that describes the location of a file relative to the current file's location, commonly used for linking between pages on the same website.
Absolute Path	A file path that specifies the full URL to a resource, used for linking to external websites or resources located on a different server.