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:
- 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.