Lesson plan htmltextformattingtag

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 … 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 ... element, is displayed in bold as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
The following word uses a bold typeface.
</body>
</html>

This will produce following result:
The following word uses a bold typeface.
1. Italic Text
Anything that appears within ... element is displayed in italicized as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
The following word uses a italicized typeface.
</body>
</html>
The following word uses a italicized typeface.
2. Underlined Text
Anything that appears within ... element, is displayed with underline as shown below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
The following word uses a underlined typeface.
</body>
</html>

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>
The following word uses a <strike>strikethrough</strike> typeface.
</body>
</html>
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>
The following word uses a <tt>monospaced</tt> typeface.
</body>
</html>

The following word uses a monospaced typeface.
6.SuperscriptText
The content of a ... 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>
The following word uses a superscripttypeface.
</body>
</html>
The following word uses a superscript typeface.
7.SubscriptText
The content of a ... 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>
The following word uses a subscripttypeface.
</body>
</html>
The following word uses a subscript typeface.

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>
I want to drink <del>cola</del> <ins>wine</ins>
</body>
</html>
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>
I want to drink <del>cola</del> <ins>wine</ins>
</body>
</html>
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:

Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
The following word uses a <big>big</big> typeface.
</body>
</html>
The following word uses a big typeface.
11. Smaller Text
The content of the ... 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>
The following word uses a small typeface.
</body>
</html>
The following word uses a small typeface.
12 -15. Grouping Content
The <div> and elements allow you to group together several elements to create sections or subsections
of a page.

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>
Actual content goes here.....
</div>
</body>
</html>
HOME | CONTACT | ABOUT
CONTENT ARTICLES
Actual content goes here.....
The 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 element as follows

Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
This is the example of span tagand the div
tagalongwith CSS
</body>
</html>
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.

Lesson plan htmltextformattingtag

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Lesson plan htmltextformattingtag

Similar to Lesson plan htmltextformattingtag (20)

More from Keith Borgonia Manatad

More from Keith Borgonia Manatad (20)

Recently uploaded

Recently uploaded (20)

Lesson plan htmltextformattingtag