Images and links
Lesson details
Learning outcome
I can build accessible web pages that include images and connect to other pages.
Key learning points
- Accessibility is a design approach that ensures what is being created is usable by all, regardless of individual needs.
- Web pages use images to visually enhance and support the content being presented.
- Images on web pages can be made accessible using the alt attribute.
- Web pages can connect to other web pages using hyperlinks.
Keywords
Accessibility - consideration of design so that what is created is usable by everyone
Attribute - a characteristic or feature of an object that can be changed or adjusted
Hyperlink - a clickable link that takes you to another web page, a section on the same page, or a different website
Common misconception
If someone cannot view an image on a web page it can be ignored as text on the page will be sufficient.
Images are used in web pages to provide the reader with extra context. By not describing them in some way the reader might not understand the information in the same way than if it was viewed.
Teacher tip
Pupils will have encoutered many uses of HTML in the world around them. Tailor the activities in the slides to best reflect the experiences pupils in your school will have had when using HTML-based technology.
Equipment
Pupils will need access to a device with HTML editing software. Examples in this lesson use the RPF Code Editor https://oak.link/html-editor
Licence
Lesson video
Loading...
Prior knowledge starter quiz
6 Questions
Q1.What kind of software is used to view and interact with webpages?
Q2.What is the primary purpose of HTML?
Q3.What is the term used in HTML to indicate where different elements of a webpage are located?
Q4.Which HTML tag is used to create a paragraph?
Q5.Name one type of list used in HTML.
Q6.What is a hyperlink?
Assessment exit quiz
6 Questions
Q1.Match the terms with their definitions.
usability by everyone
a feature that can be adjusted
a clickable link that takes the user to a specified location
Q2.Why is accessibility important in web design?
Q3.What should a web designer provide to ensure that users who cannot see an image still understand its content?
Q4.What is required to correctly display an image on another webpage using HTML?
Q5.What attribute is used to make images accessible?
Q6.Which HTML element is used to create hyperlinks?
To help you plan your 11 computer science lesson on: Images and links, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 11 computer science lesson on: Images and links, download all teaching resources for free and adapt to suit your pupils' needs.
The starter quiz will activate and check your pupils' prior knowledge, with versions available both with and without answers in PDF format.
We use learning cycles to break down learning into key concepts or ideas linked to the learning outcome. Each learning cycle features explanations with checks for understanding and practice tasks with feedback. All of this is found in our slide decks, ready for you to download and edit. The practice tasks are also available as printable worksheets and some lessons have additional materials with extra material you might need for teaching the lesson.
The assessment exit quiz will test your pupils' understanding of the key learning points.
Our video is a tool for planning, showing how other teachers might teach the lesson, offering helpful tips, modelled explanations and inspiration for your own delivery in the classroom. Plus, you can set it as homework or revision for pupils and keep their learning on track by sharing an online pupil version of this lesson.
Explore more key stage 4 computer science lessons from the HTML programming project unit, dive into the full secondary computer science curriculum, or learn more about lesson planning.