PRAYE
R
ATTENDANCE
REVIEW
SCRABBLE
GAME
M I A G E
IMAGE
s r o c u e
SOURCE
A L N E R A T E A
ALTERNATE
I W D H T
WIDTH
E I H G T
HEIGHT
HTML Images
OBJECTIVES
1)Identify HTML Images and Attributes.
2)Demonstrate how to insert images
and set its attributes.
3)Create a simple webpage by
inserting images from folder and
subfolder.
HTML Images
Images are not technically inserted into a
web page. The <img> tag created a holding
space for the referenced image.
The <img> tag is use to link
image to the webpage.
The <img> tag is an empty tag, which
means that it can contain only list of
attributes and it has no closing tag.
The <img> tag has two required
attributes:
SRC – Specifies the path to the image
ALT – Specifies an alternate text for
the image.
The SRC Attributes
The required src att ributes
specifi es the path or Uniform
Resource Locator (URL).
The ALT Attributes
The required alt att ribute provides an alternate
text for an image. If the user for some reason
cannot view it (because of slow connecti on. An
error in the src att ribute, or if the user uses a
screen reader). Then the value of the alt
att ribute should describe the image.
The SRC and ALT
Attributes
<img src="Andromeda.jpg"
alt="Image of andromeda“>
The WIDTH and
HEIGHT Attributes
The Width and Height
attributes define the width
and height of the images in
pixels.
The WIDTH and
HEIGHT Attributes
<img src="Andromeda.jpg" alt="Image
of andromeda" width="500px"
height="200px">
Image in another
folder
In coding if you have your
images in a sub-folder, you
must include the folder
name in the src attributes.
Image in another
folder
<img src="ANDROMEDA
FOLDER/Andromeda constellati on.jpg"
alt="Image of andromeda"
width="450px" height="200px">
INSTRUCTION
Create a simple webpage by
inserting an image with heading
and paragraph. The image is set
into 500px width and height of
480px.
And the title of your webpage is
your LAST NAME.
INSTRUCTION
In the same web page, insert
another image from a
subfolder.
GENERALIZATIO
N
EVALUATION
TEST 1
Test I. Multiple choice. Read the
following statement and encircle the
correct answer. (1point.)
TEST 2
Test II. Inserting Correct Snippets. On your desktop,
open the folder named "ACTIVITY 2". Then, open the
index.html using notepad++ and demonstrate
correct coding of image and setting its attribute. Set
the width to 400px and height to 300px and assign
appropriate alternate text to the image. (25 pts.)
TEST 3
Test III. Inserting of Image from a sub-folder. On
your desktop open the folder named ACTIVITY 3.
Next is open the index3.html file and insert an image
from a sub folder name “Andromeda”. Set the width
to 250px and height to 200px and assign appropriate
alternate text to the image. Lastly, save your work
present it for checking. (25 pts.)
ASSIGNMENT
Direction: Create a simple webpage and
insert an animated image from a subfolder
and explain your animated images using
paragraph. Make use of all the attributes
and assign proper values.
Criteria:
Requirements Points
Proper uses of HTML syntax 10
Appropriate use of img tag and 20
attributes.
Correct coding and use of subfolder. 20
Total points: 50
THANK YOU
