Adding images to a web page
Lesson details
Learning outcome
I can use images as part of a website.
Key learning points
- Images can be displayed within a web page using HMTL tags.
- HTML tags can be applied to construct a web page structure from a provided design.
- An attribute is a word or a phrase that can be used to describe an object such as its colour or size.
Keywords
Attribute - a word or a phrase that can be used to describe an object, such as its colour or size
Pixel - a single element of an image on a computer screen
Common misconception
Images are stored inside HTML files as one document that is downloaded and displayed.
HTML only references image files, which are stored separately. When a web page is downloaded, the linked images are downloaded separately.
Teacher tip
Precision is important. When adding images the exact file name and extension must be spelled correctly.
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
5 Questions
Q1.What does HTML stand for?
Q2.What is the purpose of HTML tags?
Q3.Which HTML tag is used for the largest heading?
Q4.Match the tags to their purposes.
makes text bold
creates an unordered list
defines a list item
adds emphasis to text
creates a paragraph
creates the largest heading
Q5.What closing tag is used to end a paragraph in HTML?
Assessment exit quiz
6 Questions
Q1.Where are image files stored when used in an HTML web page?
Q2.What is an attribute in HTML?
Q3.What is the smallest unit of a digital image?
Q4.What tag is used to display an image in HTML?
Q5.Match the attributes to their purposes.
specifies the image source
provides alternative text for accessibility
controls the horizontal size of an image
Q6.Put these steps for displaying an image in HTML in the correct order.
To help you plan your 8 computing lesson on: Adding images to a web page, download all teaching resources for free and adapt to suit your pupils' needs...
To help you plan your 8 computing lesson on: Adding images to a web page, 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 3 computing lessons from the Developing for the Web unit, dive into the full secondary computing curriculum, or learn more about lesson planning.