A Detailed Lesson Plan in Grade 10 – ICT

I. OBJECTIVES

At the end of the lesson, the students should be able to;

a. differentiate the attributes use in image tag,

b. recognize the use of the different image attributes,

c. design a web page using the image tag and their attributes.

II. CONTENT

Topic: Image tags and their attributes

Reference: www.w3schools.com

Value:

Materials: projector, laptop, computer

III. PROCEDURE

TEACHER’S ACTIVITY STUDENT’S ACTIVITY

Good morning Class! Good morning Ma’am!

Let us start our day by having a short prayer. Yes ma’am.

Pea, kindly lead the prayer. (prayer)

You may take your seats. Thank you ma’am

How are you today? Fine ma’am!

Great!

Who is absent today? None ma’am.

A. ACTIVITY

I will flash on the screen some html file and try

it on your notepad.
I will give you 5 minutes to code this on your
notepad.
(after 5 minutes)
Save your file and let’s see the outcome in the
browser. The outcome on the browser should
look like this.

As you can see I joined the height and width

because they must be proportionate, if the
height is “50” the width must also be “50” to
have the best result.
 B. ANALYSIS
Based on this html file, what attribute is the Ma’am , the most common attribute used is the
most common to them all? Yes, Jerald “src” attribute

Very Good! Src tag must be always present in

your image tag so that the browser can identify
the source of your image.

How do they differ? Pea. They differ according to the attribute used. The
first file used “align” attribute, the second file
”alt” use , the third file used “height and
width” attribute, the fourth file used “v space”
attribute and the last file used “h space
attribute”

C. ABSTRACTION
Today we will be dealing with the image tag.
As you can see image tag has many attributes
used.

First we have the “src” attribute. What do we Src means source

mean by src? Judel.

Correct! What do you think is the is src It contains the file of the image ma’am.
attribute? Kenneth.

Src attribute tells the browser where to find the

image.

Next tag, Mar Jayson.

What do you think is the value of “alt” “alt” ma’am

attribute? Jhon Carl.
The value of the alt attribute should describe
the image, if the browser cannot find an image.
Yes, “alt” attribute provides an alternate text
for an image, if the user for some reason
cannot view it is because, first; you might have
a slow connection, second; if the user commits
an error in the src attributes, or if the user use a
screen reader.

In addition this two attributes: the “src” and

“alt” attribute is required attribute for the
<img> tag, when we say required it must be
always present on your element.

Next ,Shyrel. “ height and width” attribute ma’am.

Why do we need to specify both height and We need to specify both height and width so
width when the image has already its size? that, It could reserve the space required for the
image when the page is loaded.
Correct! Without these attributes, the browser
does not know the size of the image, and
cannot reserve the appropriate space to it.
What value did we used in this attribute? The value used in height and width attribute is
Ma.Fe? pixel ma’am.

Very Good! What is the next attribute? Carlo. Ma’am “border” attribute.

What is the effect of the border on the image? Ma’am it gives a thick border line around an
Rubylyn. image.

So what do you think is border? Louie. Border attributes is use to add border to image
ma’am.
Very good! Take note that an image has no
border by default unless to add the border
attribute to the element.

What else attribute did we used? Bea “align” attribute ma’am.

Base on the presentation of html file, what do

you think is align attribute? Yes, Christopher? Ma’am I think that an align attribute is used to
align image.
Very Good Christopher!

It can be useful to specify alignment of the

image according to surrounding elements.

There are five values use in align attribute, as

you can see we’ve already used the left and
right value, what do you think is other value to Ma’am I think we could use also the top and
be use? Yes, Ceiji. bottom value.
.
Yes, Very Good! What else? Ronniel Ma’am center value.

Let’s try another term for center. Jerald. Middle ma’am.

Very Good learners!

Next “hspace” attribute, just by looking at Ma’am I think that it means horizontal space
these html file,what do we mean by hspace because it gives horizontal space between the
text and the image.
So hspace attribute specifies the left and right
margin of the image. The value used is also in
pixel.

What about the last attribute used , Milandro. “vspace” attribute, just like in hspace ma’am, it
also specifies margin, but at the top and bottom
of the image.

Very Good! Do you understand class? Yes ma’am.

a. GENERALIZATION

In general this attributes helps the <img> tag to

work on the browser accordingly.
 D. APPLICATION

Open your notepad and code this.

Yes ma’am.
Are you finished class?

E. ASESSMENT
None ma’am!
Is there any question class?
Yes ma’am!
Are you sure?
Yes ma’am.
Can you follow on how to insert image?

Great! Let’s see.

“src” and “alt” attribute ma’am,
What are the two attributes that are required on
image tags? Sharmaine.
One reason ma’am is, if the user commits an
Give me one reason why a browser cannot error in the src attribute.
view or cannot display the image? Ceiji.
Ma’am the pixel value.
Very Good! What value does the border
attribute have?

Very Good learners! I hope you all understand Yes ma’am

clearly on the image tag and their attributes.

F. Assignment
In you HTML viewer and Editor, make a short
biography about yourself with your image
located at the right side of the viewer. Make at
least 5 sentences.