Lesson Plan - 1 Computer Science Formatting Webpages with HTML Topic- HTML Attributes 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. Understand what are attributes in HTML. 2. Use at least 5 attributes of <body> element 3. Understand HTML color codes. 4. Use the align attribute. 5. Use heading elements in HTML. Resources 1. video https://www.youtube.com/watch?v=F1ersH3yqGQ&t=421s (0.00 to 9.30). 2. Use the eContent to show the animated demos of the lesson. Session Conduction Engage: Recap what is HTML Elements. What are container and empty elements? Next, ask how students in the class are distinguished from each other. Once they answer tell properties like name, roll number, and address are used for describing students. Similarly, HTML element has properties that describe them and these properties are called attributes, Concept introduction: An HTML attribute is used to adjust the behavior or display of an HTML element. For example, attributes can be used to change the color, size, or functionality of HTML elements. Attributes are always specified in the start tag (or opening tag) and usually consist of name/value pairs like name=\"value\". Attribute values should be enclosed in quotation marks.
Concept Demo/Explanation: Every element has some attributes. Explain the attributes used in <BODY>. Show students a color code #0000FF and ask if they are finding this weird combination of letters and numbers to have any meaning. Explain the color codes in HTML that contains the symbol \"#\" and 6 letters or numbers. These numbers are in the hexadecimal numeral system. For example, \"FF\" in hexadecimal represents the number 255 in Decimal which again represent white. The first two symbols in the HTML color code represent the intensity of the red color. 00 is the least and FF is the most intense. The third and fourth represent the intensity of green and the fifth and sixth represents the intensity of blue. #FFFFFF represents white and #000000 represents black. So, by combining the intensity of red, green, and blue we can get almost any color that we want Next, discuss heading tags.HTML offers six levels of heading tags, <h1> through <h6>; the lower the heading level number, the greater its importance. Therefore <h1> tag defines the most important heading, whereas the <h6> tag defines the least important heading in the document. Concept Practice: Write an HTML code to display the text in the <BODY> element in white color, set background color as blue, top-margin and left-margin as 20px. Use another example that displays flowers as a background image in the body. Show how a paragraph text can align left, right or center using align attribute. Show how to add heading <h1> to <h6> and use align attribute in the headings. Discuss the brain jogger activities with students. Encourage students to go through the notes section of the chapter which provides additional insights about attributes. Optional Activity: Watch the video from the resources section. Home Assignments 1. Revise the topic covered. 2. Practice the interactive exercises in Edusoft Smart App. 3. Solve any additional exercises on playground.edusoft.co.in Guided Assignment Students can visit https://www.geeksforgeeks.org/html-attributes/ to find out more about attributes. Evaluation After completing the lesson solve the exercises given in the book.
Lesson Plan -2 Computer Science Formatting Webpages with HTML Topic- Text Formatting 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. Use <FONT> tag to manage text in HTML code. 2. Draw a horizontal line using the <HR> tag. 3. Add special characters using entities. Resources 1. video https://www.youtube.com/watch?v=F1ersH3yqGQ&t=421s (9.30 onwards). 2. Use the eContent to show the animated demos of the lesson. Session Conduction Engage: Recap the previous topics. Concept introduction: Fonts play a very important role in making a website more user- friendly and increasing content readability. With the help of a font tag, one can make a web page’s size, color, and face in the same text format. Font face and color depend entirely on the computer and browser that is being used to view the page. HTML entities and comments are used in an HTML code to help website designers to provide additional information. Concept Demo/Explanation: The HTML <font> element is found within the <body> tag. Size attribute has numeric values ranging from 1 to 7 (1 is the smallest, 7 is the largest, 3 is the default). Relative values can be values such as +1 or -2, increasing by one font size or decreasing by 2 font sizes, respectively. Color of text is mentioned either in hexadecimal
(i.e.: #RRGGBB format) or named color (ie: black, red, white). Face attribute is used for text listed as one or more font names (comma separated). Next, explain the <hr> tag in HTML which is used to give a thematic break between paragraphs. We use the hr tag to break the flow of content by drawing a horizontal line between paragraphs. Ask students if they are working on an HTML code and how can they make the code be clarifying enough to the teacher or friends in their absence. Explain how comments allow us to make our code more readable and explain what specific parts of a program are doing. Explain how entities are frequently used to display reserved characters (like<> which would otherwise be interpreted as HTML code), and invisible characters (like non- breaking spaces). Entities can also be used in place of other characters that are difficult to type with a standard keyboard e.g., degree, copyright symbol, currency symbols, etc. Concept Practice: Write a code to show how to <FONT> element with attributes face, size, and color. Show how to draw a horizontal line using the <HR> element and its attributes align, size, noshade, and width. Add HTML comments and entities. Show how comments are removed by the browser when HTML code is displayed. Use the examples from the book. Optional Activity: Watch the video from the resources section. Practical Application: Complete the Lab Masti exercises. Home Assignments 1. Revise the topic covered. 2. Practice the interactive exercises in Edusoft Smart App. 3. Solve any additional exercises on playground.edusoft.co.in Guided Assignment Students can online HTML editors at https://weggo.net/create.html and https://htmledit.squarefree.com/ for writing HTML codes. Evaluation After completing the lesson solve the exercises given in the book.
Search
Read the Text Version
- 1 - 4
Pages:
