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
18 questions
El amor 1. Thich y Eterno resplandor
Presentation
•
KG
13 questions
Database
Presentation
•
10th Grade
15 questions
Logic Gates
Presentation
•
9th Grade
17 questions
The Man of The House - Interactive Lesson
Presentation
•
10th Grade
16 questions
Pearl Harbor
Presentation
•
10th Grade
16 questions
Solving Quadratics-Choosing a Strategy
Presentation
•
10th Grade
18 questions
Significant Figures
Presentation
•
10th Grade
16 questions
The Theory of Evolution
Presentation
•
8th Grade
Popular Resources on Wayground
5 questions
A Home on the Shore
Quiz
•
3rd Grade
28 questions
US History Regents Review
Quiz
•
11th Grade
6 questions
A Horse Tale
Quiz
•
3rd Grade
20 questions
Math Review
Quiz
•
3rd Grade
10 questions
Juneteenth History and Significance
Interactive video
•
5th - 8th Grade
20 questions
Dividing Fractions
Quiz
•
5th Grade
55 questions
A Long Walk to Water Final Review
Quiz
•
6th - 8th Grade
10 questions
Equation Word Problems
Quiz
•
7th Grade
Discover more resources for Computers
20 questions
Insurance
Quiz
•
9th - 12th Grade
10 questions
Juneteenth: History and Significance
Interactive video
•
7th - 12th Grade
6 questions
Mayan Mathematics part 1
Presentation
•
9th - 12th Grade
40 questions
Flags of the World
Quiz
•
KG - Professional Dev...
10 questions
Unit 9 Quiz
Quiz
•
9th - 12th Grade