S1 Web development lesson 3 - graphics

S1 Web Development
Lesson 3 - graphics

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

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 

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

• Contains all visible content

• Displays a large heading

• Displays text in the browser tab

• Displays plain text

• Displays a sub-heading

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

• 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

Fill in the Blanks

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

Fill in the Blanks

What is missing word from below:

Hyper Text Mark-up L

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

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.

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.

Image file types - jpeg

• Have the file extension .jpg

• Do not support transparent backgrounds

• Do not support animation

• Supports millions of colours

Image file types - png

• Have the file extension .png

• Supports transparent backgrounds

• Do not support animation

• Supports millions of colours

Image file types - gif

• Have the file extension .gif

• Supports transparent backgrounds

• Supports animation

• Supports the use of 256 colours

Multiple Choice

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

• True

• False

Multiple Choice

PNG images can be animated - True or False?

• True

• False

Multiple Choice

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

• True

• False

Multiple Choice

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

• True

• False

Multiple Choice

How many colours can the gif graphic format support?

• 255

• millions

• 256

• 8

Complete Task 4 – Inserting images

Plenary question

Get ready to do some debugging!

Draw

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

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