S1 Web development lesson 3 - graphics
Presentation
•
Computers
•
10th Grade
•
Practice Problem
•
Medium
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
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
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 Blanks
Type answer...
7
Fill in the Blanks
Type answer...
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.
11
Image file types - jpeg
Have the file extension .jpg
Do not support transparent backgrounds
Do not support animation
Supports millions of colours
12
Image file types - png
Have the file extension .png
Supports transparent backgrounds
Do not support animation
Supports millions of colours
13
Image file types - gif
Have the file extension .gif
Supports transparent backgrounds
Supports animation
Supports the use of 256 colours
14
Multiple Choice
JPEG support many colours so can be used for photographs - True or False?
True
False
15
Multiple Choice
PNG images can be animated - True or False?
True
False
16
Multiple Choice
JPEG images can have a transparent background - True or False?
True
False
17
Multiple Choice
PNG images can have a transparent background - True or False?
True
False
18
Multiple Choice
How many colours can the gif graphic format support?
255
millions
256
8
19
Complete Task 4 – Inserting images
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
16 questions
pronoun
Presentation
•
10th Grade
19 questions
Yr 11 OCR Cambridge Nationals IT
Presentation
•
9th - 10th Grade
16 questions
Hardware and software
Presentation
•
10th Grade
18 questions
Law of Conservation of Linear Momentum and Impulse
Presentation
•
10th Grade
15 questions
Sentence Diagnostic
Presentation
•
10th Grade
17 questions
Pertidaksamaan Rasional
Presentation
•
10th Grade
18 questions
Mole to Mole Ratio
Presentation
•
10th Grade
18 questions
Discovery of the cell and the Cell Theory
Presentation
•
10th Grade
Popular Resources on Wayground
15 questions
Grade 3 Simulation Assessment 1
Quiz
•
3rd Grade
22 questions
HCS Grade 4 Simulation Assessment_1 2526sy
Quiz
•
4th Grade
16 questions
Grade 3 Simulation Assessment 2
Quiz
•
3rd Grade
19 questions
HCS Grade 5 Simulation Assessment_1 2526sy
Quiz
•
5th Grade
17 questions
HCS Grade 4 Simulation Assessment_2 2526sy
Quiz
•
4th Grade
20 questions
Equivalent Fractions
Quiz
•
3rd Grade
24 questions
HCS Grade 5 Simulation Assessment_2 2526sy
Quiz
•
5th Grade
20 questions
Math Review
Quiz
•
3rd Grade
