Entrance Announcement
MICTE 2080
2080 Magh 07
User:Elina Lesson Plan 8: Difference between revisions
Jump to navigation
Jump to search
Created page with "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 re..." |
mNo edit summary |
||
| Line 1: | Line 1: | ||
Subject: Computer Science | Subject: Computer Science | ||
class:7 | |||
Unit: 7 | Unit: 7 | ||
Time: 10min | Time: 10min | ||
Topic: HTML <img> tag and its attributes | Topic: HTML <img> tag and its attributes | ||
No of students: 10 | No of students: 10 | ||
Specific Objectives: | |||
Student will understand the concepts of <img> tag in html and its attributes, | == Specific Objectives: == | ||
Student will be able to use the <img> tag to insert image into HTML document. | |||
Teaching Materials: | * Student will understand the concepts of <img> tag in html and its attributes, | ||
Computer/laptop for each student or a projector for demonstration, | * Student will be able to use the <img> tag to insert image into HTML document. | ||
Text editor (such as Notepad++, Sublime text and Vs code etc) | |||
Internet access for additional resource(optional) | == Teaching Materials: == | ||
Introducton: | |||
Brifely inroduce the concepts of <img> tag in HTML: | * Computer/laptop for each student or a projector for demonstration, | ||
HTML <img> tag is used to display image on the web page. | * Text editor (such as Notepad++, Sublime text and Vs code etc) | ||
HTML <img> tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. | * Internet access for additional resource(optional) | ||
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. | == Introducton: == | ||
Attributes: | |||
Classroom activity: | * Brifely inroduce the concepts of <img> tag in HTML: | ||
open a text editor and demonstrate the following examples: | * HTML <img> tag is used to display image on the web page. | ||
Example 1 | * HTML <img> tag is an empty tag that contains attributes only, closing tags are not used in HTML image element. | ||
Example 2 | * Images are not technically inserted into a web page; images are linked to web pages. | ||
Encourage the students to ask the questions. | * The <img> tag creates a holding space for the referenced image. | ||
Encourage them to experiment with different image sources and attributes. | |||
Hands on practice: | == Attributes: == | ||
Provide a set of exercise for student to practice using the <img> tag. | {| class="wikitable" | ||
Walk around to assist studnet and answer questions. | |+ | ||
Conclusion: | !Attributes | ||
Summarize the key points during the lesson including the <img> tag and its attributes. | !value | ||
Encourage the studnet to ask the questions. | !Descriptions | ||
Assessment: | |- | ||
|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. | |||
Revision as of 06:22, 11 December 2023
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.