Search Header Logo
S1 Web development lesson 3 - graphics

S1 Web development lesson 3 - graphics

Assessment

Presentation

•

Computers

•

10th Grade

•

Practice Problem

•

Medium

Created by

G Alexander-Doyle

Used 24+ times

FREE Resource

12 Slides • 10 Questions

1

S1 Web Development
Lesson 3 - graphics

2

Introduction to Web Design & Development

Aims

  • To understand how to code graphics in a webpage.

 

Achievements  

  • I can use the image source tag to create a webpage with graphics

3

Last week's lesson

Last week we learned how to insert text into our web pages. We used the <h1> - <h6> tags,  and <p> tags to insert headings and paragraphs.

We have also covered:

  • web page structure 

4

Match

Match the following HTML tags with the correct description

<body>

<h1>

<title>

<p>

<h3>

Contains all visible content

Displays a large heading

Displays text in the browser tab

Displays plain text

Displays a sub-heading

5

Match

Match the following HTML tags with the correct description

<head>

<!DOCTYPE html>

<html>

<h6>

Contains data about the webpage

Informs the browser the version of HTML

Container tag for all html in the page

Displays a very small heading

6

Fill in the Blank

Question image

What is missing from line 6 in the HTML shown opposite.

<
>

7

Fill in the Blank

What is missing word from below:

Hyper Text Mark-up L_______

8

The <img src = ""> tag

HTML 5 uses the <img src = ""> tag to define an image. It uses the file name and file extension to display an image to the user.

 <img src = "football_player.gif">

  • img = image

  • src = source

9

The <img src = ""> tag

To  successfully display an image on a web page you must know the following:

 

  • What the file name and extension are

 

It is best to ensure that the image is located in the same folder as the web page. This means we can shorten the file path in our code.

10

The <img src = ""> tag

It is easy to find out what an image file is called. Simply open the folder you've saved your file to and look for the graphic. The image below shows how jpg, png and gif files look when they're stored in a folder.

media

11

Image file types - jpeg

  • Have the file extension .jpg

  • Do not support transparent backgrounds

  • Do not support animation

  • Supports millions of colours

media

12

Image file types - png

  • Have the file extension .png

  • Supports transparent backgrounds

  • Do not support animation

  • Supports millions of colours

media

13

Image file types - gif

  • Have the file extension .gif

  • Supports transparent backgrounds

  • Supports animation

  • Supports the use of 256 colours

media

14

Multiple Choice

JPEG support many colours so can be used for photographs - True or False?

1

True

2

False

15

Multiple Choice

PNG images can be animated - True or False?

1

True

2

False

16

Multiple Choice

JPEG images can have a transparent background - True or False?

1

True

2

False

17

Multiple Choice

PNG images can have a transparent background - True or False?

1

True

2

False

18

Multiple Choice

How many colours can the gif graphic format support?

1

255

2

millions

3

256

4

8

19

Complete Task 4 – Inserting images

media

20

Plenary question

Get ready to do some debugging!

21

Draw

Use the highlighter tool to highlight the errors in the code from today's task.

22

Introduction to Web Design & Development

Aims

  • To understand how to code graphics in a webpage.

 

Achievements  

  • I can use the image source tag to create a webpage with graphics

S1 Web Development
Lesson 3 - graphics

Show answer

Auto Play

Slide 1 / 22

SLIDE

Similar Resources on Wayground

Simple past vs Present perfect

16 questions

Simple past vs Present perfect

lesson

Lesson

•

10th Grade

-AR verbs in the present tense

18 questions

-AR verbs in the present tense

lesson

Lesson

•

10th Grade

Intro to Geometry - Vocab/Basics

16 questions

Intro to Geometry - Vocab/Basics

lesson

Lesson

•

10th Grade

Mengenal Konstitusi dan UUD NRI 1945

16 questions

Mengenal Konstitusi dan UUD NRI 1945

lesson

Lesson

•

10th Grade

Sistem Komputer (Pertemuan 1)

18 questions

Sistem Komputer (Pertemuan 1)

lesson

Lesson

•

10th Grade

Bonding- Covalent, Metallic, and Ionic

17 questions

Bonding- Covalent, Metallic, and Ionic

lesson

Lesson

•

10th Grade

MAINTAIN COMPUTER EQUIPMENT AND SYSTEMS

18 questions

MAINTAIN COMPUTER EQUIPMENT AND SYSTEMS

lesson

Lesson

•

9th - 10th Grade

Photosynthesis and Cellular Respiration

16 questions

Photosynthesis and Cellular Respiration

lesson

Lesson

•

10th Grade

Popular Resources on Wayground

Fractions on a Number Line

15 questions

Fractions on a Number Line

quiz

Quiz

•

3rd Grade

Probability Practice

10 questions

Probability Practice

quiz

Quiz

•

4th Grade

Probability on Number LIne

15 questions

Probability on Number LIne

quiz

Quiz

•

4th Grade

Equivalent Fractions

20 questions

Equivalent Fractions

quiz

Quiz

•

3rd Grade

Multiplication Facts

25 questions

Multiplication Facts

quiz

Quiz

•

5th Grade

fractions

22 questions

fractions

quiz

Quiz

•

3rd Grade

Appropriate Chromebook Usage

6 questions

Appropriate Chromebook Usage

lesson

Lesson

•

7th Grade

Greek Bases tele and phon

10 questions

Greek Bases tele and phon

quiz

Quiz

•

6th - 8th Grade

Discover more resources for Computers

Exploring Digital Citizenship Essentials

10 questions

Exploring Digital Citizenship Essentials

interactive video

Interactive video

•

6th - 10th Grade

[AP CSP] JavaScript Programming Quiz

14 questions

[AP CSP] JavaScript Programming Quiz

quiz

Quiz

•

9th - 12th Grade

Understanding Computers and Computer Engineering

10 questions

Understanding Computers and Computer Engineering

interactive video

Interactive video

•

7th - 12th Grade

Python - Tuples, Lists, and List Methods

37 questions

Python - Tuples, Lists, and List Methods

quiz

Quiz

•

9th - 12th Grade

Comprehension
Formal/Informal Language
Resource conflict analysis
Examine media influence
Graphing logarithmic functions, showing intercepts and end behavior
Understand body systems
Pollinators
Evaluating online information
Solving Vector Problems Involving Velocity
Descriptive Language

© 2026 Quizizz Inc. (DBA Wayground)