Lesson plan htmltextformattingtag
Download as DOCX, PDF1 like966 views
The document outlines a lesson plan for teaching HTML web design. The objectives are for students to learn HTML text formatting tags, apply those tags, and design a portfolio/resume. The lesson plan details 15 different HTML text formatting tags like <b> for bold, <i> for italics, and <u> for underline. It provides code examples for each tag. Students will then apply what they learned by designing a profile/resume in HTML and be assessed through a short written test. They will also be assigned a group project to present on the next HTML topic.
Lesson plan htmltextformattingtag
- 1. Keith B. Manatad August 18, 2014 Lesson Plan in Technology and Livelihood Education HTML – Web Design I. Objectives: In the end of the lesson the students would be able to; Identify HTML Texts Formatting Tags Apply HTML Texts Formatting Tags Design a Portfolio/Resume. II. Subject Matter Topic : HTML TEXT FORMATTING Reference: HTML Fext Formatting<http://www.tutorialspoint.com/html/index.htm>Accessed 2014 Materials: projector, laptop, power point presentation, notepad++ III. Procedures 1. Awareness Motivation The Student will be presented a 6 minutes movie clip entitled;” Why our kids must learn to code “The purpose is to catch up attention with the class and to motivate and guide the student’s skill in coding with the successful developers like facebook himself Mark Zuckerberg and Mircrosoft; Bill Gates and etc. Activity The Students will Design a paragraph in a one whole sheet of paper and identify the recently learned html tags of students then interpret into codes. Analysis The Student will be ask if they have understand the HTML Text Formatting Tags like where to insert a text of <u>…</u> and what is the name of Element and its use. Presentation The Students will be presented with actual HTML Text Formatting element Tags in the laptop with projector. Using Notepad++ with the correct syntax of each html element tags. Here are HTML ELEMENTS could format a text. 1. Bold Text Anything that appears within <b>...</b> element, is displayed in bold as shown below: Example <!DOCTYPE html> <html> <head> <title>Bold Text Example</title> </head> <body> <p>The following word uses a <b>bold</b> typeface.</p> </body> </html>
- 2. This will produce following result: The following word uses a bold typeface. 1. Italic Text Anything that appears within <i>...</i> element is displayed in italicized as shown below: Example <!DOCTYPE html> <html> <head> <title>Italic Text Example</title> </head> <body> <p>The following word uses a <i>italicized</i> typeface.</p> </body> </html> This will produce following result: The following word uses a italicized typeface. 2. Underlined Text Anything that appears within <u>...</u> element, is displayed with underline as shown below: Example <!DOCTYPE html> <html> <head> <title>Underlined Text Example</title> </head> <body> <p>The following word uses a <u>underlined</u> typeface.</p> </body> </html> This will produce following result:
- 3. The following word uses a underlined typeface. 4.Strike Text Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below: Example <!DOCTYPE html> <html> <head> <title>Strike Text Example</title> </head> <body> <p>The following word uses a <strike>strikethrough</strike> typeface.</p> </body> </html> This will produce following result: The following word uses a strikethrough typeface. 5.MonospacedFont The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable- width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width. Example <!DOCTYPE html> <html> <head> <title>Monospaced Font Example</title> </head> <body> <p>The following word uses a <tt>monospaced</tt> typeface.</p> </body> </html>
- 4. This will produce following result: The following word uses a monospaced typeface. 6.SuperscriptText The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the othercharacters. Example <!DOCTYPE html> <html> <head> <title>Superscript Text Example</title> </head> <body> <p>The following word uses a <sup>superscript</sup>typeface.</p> </body> </html> This will produce following result: The following word uses a superscript typeface. 7.SubscriptText The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters. Example <!DOCTYPE html> <html> <head> <title>Subscript Text Example</title> </head> <body> <p>The following word uses a <sub>subscript</sub>typeface.</p> </body> </html> This will produce following result: The following word uses a subscript typeface.
- 5. 8.InsertedText Anything that appears within <ins>...</ins> element is displayed as inserted text. Example <!DOCTYPE html> <html> <head> <title>Inserted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html> This will produce following result: I want to drink wine 9.Deleted Text Anything that appears within <del>...</del> element, is displayed as deleted text. Example <!DOCTYPE html> <html> <head> <title>Deleted Text Example</title> </head> <body> <p>I want to drink <del>cola</del> <ins>wine</ins></p> </body> </html> This will produce following result: I want to drink wine 10. Larger Text The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below:
- 6. Example <!DOCTYPE html> <html> <head> <title>Larger Text Example</title> </head> <body> <p>The following word uses a <big>big</big> typeface.</p> </body> </html> This will produce following result: The following word uses a big typeface. 11. Smaller Text The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below: Example <!DOCTYPE html> <html> <head> <title>Smaller Text Example</title> </head> <body> <p>The following word uses a <small>small</small> typeface.</p> </body> </html> This will produce following result: The following word uses a small typeface. 12 -15. Grouping Content The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
- 7. For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules. Example <!DOCTYPE html> <html> <head> <title>Div Tag Example</title> </head> <body> <div id="menu" align="middle" > <a href="/index.htm">HOME</a> | <a href="/about/contact_us.htm">CONTACT</a> | <a href="/about/index.htm">ABOUT</a> </div> <div id="content" align="left" bgcolor="white"> <h5>Content Articles</h5> <p>Actual content goes here.....</p> </div> </body> </html> This will produce following result: HOME | CONTACT | ABOUT CONTENT ARTICLES Actual content goes here..... The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together,you could use the <span>element as follows
- 8. Example <!DOCTYPE html> <html> <head> <title>Span Tag Example</title> </head> <body> <p>This is the example of <span style="color:green">span tag</span>and the <span style="color:red">div tag</span>alongwith CSS</p> </body> </html> This will produce following result: This is the example of span tag and the div tag along with. These tags are commonly used with CSS to allow you to attach a style to a section of a page. Source: www.tutorialspoint.com/html IV. Applcation Student will apply htmlText Formatting Element by designing a Profile/Resume. V. Assessment The student will write HTML ELEMENT within 10 minutes to assess the learning of the student. VI. Assignment The class will be group randomly and be given an assignment according for the topic to be presented and discuss by the group next HTML topic.