G7LP-4Lists and Images in HTML

Lesson Plan Computer Science List and Image in HTML Topic- List Class: Period: Mode: Classroom/Lab Teacher: ____________________________________________________________________________________ Learning Support Assistant: ____________________________________________________________ S.M.A.R.T. Learning Objectives By the end of this session, students will be able to: 1. Group related pieces of information in an HTML list. 2. Create 3 types of lists in HTML. Resources 1. video https://www.youtube.com/watch?v=bzLL1OmP-kk (0.00 till 4.57). 2. Use the eContent to show the animated demos of the lesson. Session Conduction Engage: Display a paragraph outlining what needs to be done in a day. Create something similar in the form of a to-do list. Inquire about which one is the easiest to understand. Discuss how lists are a part of everyday life. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. Some content is naturally suited to be presented in a list. Lists are easy to quickly scan and take in the content. Concept introduction: Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to- maintain document. In HTML, lists come in two main varieties: unordered and ordered. A third variety, called the definition list, is also available.

Concept Demo/Explanation: Discuss the use of ordered and unordered lists in HTML pages. Inquire about the type of list that will be a navigation route list, a list of recipe instructions, a list of recipe ingredients, or a list of favourite colours. In HTML, there are multiple ways to style these lists. For example, we can choose what type of marker to use on a list. The marker could be square, round, numeric, or alphabetical. Also, we can decide if a list should be displayed vertically or horizontally. Use the type attribute to define the square, circle, and disc as a marker for a list. Create an ordered list that starts with roman numbers or small letters alphabets. Create the nested list with 3 vegetable names and 3 fruit names. Use the computer definition example in the chapter to explain the definition list. Concept Practice: Create a webpage with the heading Pasta Recipe. Display the items required for pasta in an unordered list. Create an ordered list for a pasta recipe. Create a nested list with chapter names and topics covered under it. Optional Activity: Students can watch the videos from the resource sections. Practical Application: Complete the lab activities. Home Assignments 1. Revise the topic covered. 2. Practice the interactive exercises in Edusoft Smart App. 3. Solve any additional exercises on the playground.edusoft.co.in. Guided Assignments Students can visit https://www.w3schools.com/html/html_lists.asp and discuss it with the teacher. Evaluation After completing the lesson solve the exercises given at the end of the chapter.

Lesson Plan Computer Science List and Image in HTML Topic- Images Class: Period: Mode: Classroom/Lab Teacher: ____________________________________________________________________________________ Learning Support Assistant: ____________________________________________________________ S.M.A.R.T. Learning Objectives By the end of this session, students will be able to: 1. Display images on a webpage. 2. Create scrolling text or an image. Resources 1. video https://www.youtube.com/watch?v=bzLL1OmP-kk (4.58 onwards). 2. Use the eContent to show the animated demos of the lesson. Session Conduction Engage: Show students some well-known brand logos, such as myntra and Domino's Pizza, and ask them to identify them. When they look at old pictures how do they feel? How easily they can interpret a picture or graph? Tell them when it comes to first impressions a website’s biggest draw is the images that are used. Our brain can interpret images much quicker than text which is why images can communicate a product, service, or brand instantly. It’s why our website needs good images. Concept introduction: Visual information is very convenient. Instead of reading a lot of text, which takes time and effort, we rather quickly scan an image or a graph. A website without any images is boring and even with a nice design. While images can help to improve the user experience, the media we choose should be appropriate for our main target group with all their expectations, abilities, and limitations. Also, consider the devices people will use to access our site and the technical limitations that come with it.

Concept Demo/Explanation: Discuss how tags are used to add images to an HTML web page. Discuss HTML image formats that are supported. Also, before deciding on an image, we should be able to answer two questions. (1) Why did we select that image rather than another? (2) Why did we place the image there and not somewhere else? We must remember to use images that complement our content. To keep things simple, we should keep all of our website's images in a single folder. They won't mix with other content this way. Use the src attribute to specify the image file's path, and the alt attribute to add an image description that appears when the image when the browser is not capable of displaying the picture. The alt attribute is necessary for text-to-speech readers and image search engines like Google Images to work properly. The width and height attributes can be used to modify the dimensions of an image. Specify values as numbers (e.g., width=50\") to represent pixel sizes, or as percentages (e.g., width=\"50%\"). If only one attribute is set, the second one is calculated in such a way that the aspect ratio is maintained. Examine the significance of image size. We should never upload an image to a website that is larger than what is required and then resizes it in HTML. A browser would then have to download the entire large image, resize it, and only then would it be able to display it. Concept Practice: Align the image to different locations on a webpage using align attribute. Add a border and some white space around an image using the border, hspace, and vspace attributes. Set an image with clickable areas using <map> and <usemap>. Display a banner on the webpage by including a moving image using the <marquee> tag. Set its direction from top to bottom or left to right direction using the “direction” attribute. Use “behavior” attribute to make the marquee image visible all the time. Set the speed of the marquee to medium. Optional Activity: Students can watch the videos from the resource sections. Practical Application: Complete the lab activities. Home Assignments 1. Revise the topic covered. 2. Practice the interactive exercises in Edusoft Smart App. 3. Solve any additional exercises on the playground.edusoft.co.in. Guided Assignments

Students can visit https://www.cssbasics.com/chapter_1_introduction_to_css.html and discuss it with the teacher Evaluation After completing the lesson solve the exercises given at the end of the chapter.