User:Elina Lesson Plan 8

Subject: Computer Science

class:7

Unit: 7

Time: 10min

Topic: HTML <img> tag and its attributes

No of students: 10

Specific Objectives:

• Student will understand the concepts of <img> tag in html and its attributes,
• Student will be able to use the <img> tag to insert image into HTML document.

Teaching Materials:

• Computer/laptop for each student or a projector for demonstration,
• Text editor (such as Notepad++, Sublime text and Vs code etc)
• Internet access for additional resource(optional)

Introducton:

• Brifely inroduce the concepts of <img> tag in HTML:
• HTML <img> tag is used to display image on the web page.
• HTML <img> tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.
• Images are not technically inserted into a web page; images are linked to web pages.
• The <img> tag creates a holding space for the referenced image.

Attributes:

Attributes	value	Descriptions
alt	text	Specifies an alternate text for an image
crossorigin	anonymous use-credentials	Allow images from third-party sites that allow cross-origin access to be used with canvas
sizes	sizes	Specifies image sizes for different page layouts
src	URL	Specifies the path to the image
srcset	URL-list	Specifies a list of image files to use in different situations
usemap	#mapname	Specifies an image as a client-side image map
width	pixels	Specifies the width of an image
height	pixels	Specifies the height of an image

Classroom activity:

• open a text editor and demonstrate the following examples:

Example 1

Example 2

• Encourage the students to ask the questions.
• Encourage them to experiment with different image sources and attributes.

Hands on practice:

• Provide a set of exercise for student to practice using the <img> tag.
• https://www.w3schools.com/html/html_images.asp
• Walk around to assist studnet and answer questions.

Conclusion:

• Summarize the key points during the lesson including the <img> tag and its attributes.

• Encourage the studnet to ask the questions.
• provide additional resource or excercises for further practices(https://www.w3schools.com/html/html_images.asp)

Assessment:

• How to use image in HTML with examples?
• Which tag is used to display image?
• Task students with creating a simple HTML page and inserting different images with varying attributes.