Computing · Year 8 · Web Development Fundamentals · Summer Term

HTML: Links and Images

Students add hyperlinks and images to web pages to make them interactive and visually appealing.

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

About This Topic

Year 8 students build interactive web pages in HTML: Links and Images by adding hyperlinks and visuals. They use the <a> tag to create internal links between pages on the same site and external links to outside resources, ensuring smooth navigation. For images, students apply the <img> tag with src, alt, width, and height attributes, while selecting formats like JPEG for photos or PNG for graphics.

This unit meets KS3 Computing standards for Web Technologies and HTML. Students construct complete pages, evaluate how large image files slow loading times, and justify alt text to support screen reader users and search engines. These skills develop practical coding alongside design principles focused on performance and accessibility.

Active learning excels in this topic because students code live in browsers and see hyperlinks click and images appear instantly. Pair debugging of broken links or missing alt text turns errors into teachable moments. Collaborative page reviews encourage justification of choices, such as file optimisation, building confidence and real-world web skills.

Key Questions

1. Construct a web page that effectively uses both internal and external links.
2. Evaluate the impact of image file size on web page loading times.
3. Justify the use of alternative text for images in web design.

Learning Objectives

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

Before You Start

Introduction to HTML Structure

Why: Students need a basic understanding of HTML tags and document structure before they can add links and images.

Basic File Management

Why: Understanding how to organize files and folders is essential for correctly linking to other HTML pages and image files within a website.

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.

Watch Out for These Misconceptions

Common Misconception

Links always open in new tabs.

What to Teach Instead

The target='_blank' attribute is optional and used sparingly to avoid disrupting user flow. In pairs, students test both link types on sample pages and discuss scenarios like external links to videos, helping them choose based on context rather than habit.

Common Misconception

Images without alt text display fine for everyone.

What to Teach Instead

Alt text ensures accessibility for visually impaired users via screen readers and aids SEO. Group audits of classmate pages with a screen reader tool reveal how missing text confuses navigation, prompting revisions and deeper understanding of inclusive design.

Common Misconception

Bigger image files always produce sharper visuals.

What to Teach Instead

Larger files increase load times without proportional quality gains if not optimised. Small group races to compress images while maintaining clarity, using browser timing tools, show how balance improves user experience over raw size.

Active Learning Ideas

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.

35 min·Pairs

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.

45 min·Small Groups

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.

40 min·Whole Class

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.

30 min·Individual

Real-World Connections

• Web developers at companies like the BBC use HTML links and images daily to build and maintain interactive news sites, ensuring users can navigate articles and view relevant media.
• E-commerce platforms such as Amazon employ optimized images and clear navigation links to create user-friendly online shopping experiences, directly impacting customer engagement and sales.
• Graphic designers and UX/UI specialists collaborate to select appropriate image formats and sizes for websites, considering factors like brand aesthetics and how quickly pages load on mobile devices.

Assessment Ideas

Exit Ticket

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.

Peer Assessment

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.

Quick Check

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.

Frequently Asked Questions

How do I teach Year 8 students HTML links and images effectively?

Start with simple syntax demos in a code editor like CodePen, then have students replicate and modify. Build progressively from single links to full pages. Use browser previews for instant feedback, and incorporate real sites as models to show professional use. This scaffolded approach with 20-minute coding bursts keeps engagement high while reinforcing KS3 standards.

Why is alternative text important for HTML images?

Alt text describes images for screen reader users, ensuring accessibility compliance under UK equality laws. It also boosts SEO as search engines index the content, and displays if images fail to load. Teach by demoing a page with and without alt text in a screen reader; students then add it to their own pages, justifying choices in reflections.

How does image file size impact web page loading?

Large images increase file sizes, slowing download times especially on mobile networks, leading to higher bounce rates. KS3 students test this by timing pages with optimised versus unoptimised images using tools like TinyPNG. They learn to balance resolution for display with compression, evaluating user experience metrics like load speed under 3 seconds.

What active learning strategies work best for HTML links and images?

Pair programming for link mazes lets students alternate coding and testing, catching errors collaboratively. Small group image optimisation relays with timing challenges make abstract concepts competitive and measurable. Whole-class screen reader audits promote peer feedback on alt text. These methods provide immediate browser feedback, reduce syntax frustration, and connect coding to real design impacts in 30-45 minute sessions.