icon-background-square
New
New
Year 8

Adding images to a web page

I can use images as part of a website.

icon-background-square
New
New
Year 8

Adding images to a web page

I can use images as part of a website.

warning

These resources will be removed by end of Summer Term 2025.

Switch to our new teaching resources now - designed by teachers and leading subject experts, and tested in classrooms.

These resources were created for remote use during the pandemic and are not designed for classroom teaching.

Lesson details

Key learning points

  1. Images can be displayed within a web page using HMTL tags.
  2. HTML tags can be applied to construct a web page structure from a provided design.
  3. 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 - the smallest unit of a digital image or screen display

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.


To help you plan your year 8 computing lesson on: Adding images to a web page, download all teaching resources for free and adapt to suit your pupils' needs...

Precision is important. When adding images the exact file name and extension must be spelled correctly.
speech-bubble
Teacher tip
equipment-required

Equipment

A HTML editor is required to enable pupils to complete activities. Links to the same projects in the Raspberry Pi Code Editor are provided as one option.

copyright

Licence

This content is © Oak National Academy Limited (2025), licensed on Open Government Licence version 3.0 except where otherwise stated. See Oak's terms & conditions (Collection 2).

Lesson video

Loading...

5 Questions

Q1.
What does HTML stand for?
Correct answer: Hypertext Markup Language
HyperText Machine Language
HyperTool Markup Language
HyperTag Management Language
Q2.
What is the purpose of HTML tags?
to create animations
Correct answer: to define the structure and meaning of content
to store data in a database
to write code in a programming language
Q3.
Which HTML tag is used for the largest heading?
<p>
<b>
Correct answer: <h1>
<ul>
Q4.
Match the tags to their purposes.
Correct Answer:<b>,makes text bold
tick

makes text bold

Correct Answer:<ul>,creates an unordered list
tick

creates an unordered list

Correct Answer:<li>,defines a list item
tick

defines a list item

Correct Answer:<em>,adds emphasis to text
tick

adds emphasis to text

Correct Answer:<p>,creates a paragraph
tick

creates a paragraph

Correct Answer:<h1>,creates the largest heading
tick

creates the largest heading

Q5.
What closing tag is used to end a paragraph in HTML?
Correct Answer: </p>

6 Questions

Q1.
Where are image files stored when used in an HTML web page?
inside the HTML file
Correct answer: in a separate file referenced by the HTML
in the browser’s memory
on the user’s device
Q2.
What is an attribute in HTML?
a file used to store images
a tag that creates a webpage structure
a type of image format
Correct answer: a word or phrase that describes an object, such as size or colour
Q3.
What is the smallest unit of a digital image?
byte
attribute
Correct answer: pixel
tag
Q4.
What tag is used to display an image in HTML?
Correct Answer: <img>
Q5.
Match the attributes to their purposes.
Correct Answer:src,specifies the image source
tick

specifies the image source

Correct Answer:alt,provides alternative text for accessibility
tick

provides alternative text for accessibility

Correct Answer:width,controls the horizontal size of an image
tick

controls the horizontal size of an image

Q6.
Put these steps for displaying an image in HTML in the correct order.
1 - add the <img> tag
2 - specify the src attribute
3 - add the alt attribute