Technical

Vocational
Livelihood
QUARTER

Computer Programming

T E C H N I C A LV O C A T I O N A LL I V E L I H O O D
Computer Programming (ICT) – Grade 11

Quarter 1 – Module 4: Basic Text formatting style in HTML document

Republic Act 8293, section 176 states that: No copyright shall subsist in
any work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand

names, trademarks, etc.) included in this module are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to use
these materials from their respective copyright owners. The publisher and authors
do not represent nor claim ownership over them.

Published by the Department of Education Division of Pasig City

Development Team of the Module

Writer : Magiel L. Boncayao
Editor : Ma. Lerma I. Caantanero
Reviewers : Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
OIC-Schools Division Superintendent
Dr. Aurelio G. Alfonso
OIC-Assistant Schools Division Superintendent
Dr. Victor Javena
OIC – Chief Curriculum Implementation Division
Education Program Supervisors
Librada L. Agon EdD
(EPP/TLE/TVL/TVE) Liza A. Alvarez
(Science/STEM/SSP) Bernard R. Balitao
(AP/HUMSS)
Joselito E. Calios (English/SPFL/GAS)
Norlyn D. Conde EdD (MAPEH/SPA/SPS/HOPE/A&D/Sports)
Wilma Q. Del Rosario (LRMS/ADM)
Ma. Teresita E. Herrera EdD (Filipino/GAS/Piling Larang)
Perlita M. Ignacio PhD (EsP)
Dulce O. Santos PhD (Kindergarten/MTB-MLE)
Teresita P. Tagulao EdD (Mathematics/ABM)

Printed in the Philippines by

Department of Education – Division of Pasig City
Office Address: Caruncho Avenue, San Nicolas, Pasig City
Telefax:
E-mail Address:
 Computer
Programming

QUARTER 1

BASIC TEXT FORMATTING

STYLE IN HTML DOCUMENT
Introductory Message
For the Facilitator:

Welcome to the Computer Programming for the ICT Module on Basic Text formatting
style in HTML document

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools
Division Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the
Local Government of Pasig through its mayor, Honorable Victor Ma. Regis N.
Sotto. The writers utilized the standards set by the K to 12 Curriculum using the
Most Essential Learning Competencies (MELC) while overcoming their personal,
social, and economic constraints in schooling.
This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help
learners acquire the needed 21st century skills especially the 5 Cs namely:
Communication, Collaboration, Creativity, Critical Thinking and Character while
taking into consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
For the Learner:

Welcome to the Computer Programming for the ICT Module on Basic Text formatting
style in HTML document
The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!

This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning material while being an active learner.

This module has the following parts and corresponding icons:

Expectations - These are what you will be able to know after

completing the lessons in the module.

Pretest - This will measure your prior knowledge and the

concepts to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills

that you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap-Up- This section summarizes the concepts

and applications of the lessons.

Valuing-this part will check the integration of values in the

learning competency.

Posttest - This will measure how much you have learned from
the entire module. Ito po ang parts ng module.
 EXPECTATIONS

At the end of this module the learner is expected to:

 understand the basic application of strike, big, small, subscript and

superscript in an html program codes;
 differentiate the basic usage of basic HTML formatting Elements; and
 apply the basic use of html tags (strike, big, small, subscript and superscript
in an html)

PRETEST

Directions: Choose the best answer. Circle the letter of your choice.

1. Which of the following HTML elements defines bold text without any extra
importance?

A. <strong> B. <i> C. <b> D. <small>

2. Which of the following elements defines emphasized text, which added

semantic importance?
A. <i> B. <mark> C. <ins> D. <em>
3. Which of the following HTML elements defines to highlight text?
A. <i> B. <mark> C. <ins> D. <em>
4. Which of the following elements defines to add text?
A. <i> B. <mark> C. <ins> D. <em>
5. Which of the following HTML elements defines superscripted text?
A. <small> B. <sub> C. <sup> D. <del>

RECAP
Last time we already discussed the basic HTML Elements and how to create simple
HTML documents. You also learned that HTML paragraphs is also known as <p> tag
which defines a paragraph of a text. It is a block-level element and always starts on
a new line, usually the <p> tag comes in pairs. HTML Headings where you can
choose from <h1> in which it’s the most important heading to <h6> the least
important heading, we use it for titles of your content. The <hr> tag defines a
thematic break
in an HTML page, and most often displayed as a horizontal rule. Also we talked about
the Line breaks known as <br> tag, it is an example of an empty element that does
not have an end tag. The <pre> tag defines preformatted text it displayed in a fix-
width font, and this element the text preserves both spaces and line breaks.

In HTML documents the background attributes controlled your background color

and image. The bgrcolor attribute defines the background color for an HTML
element. In the example below you will see a simple syntax on how to put color in
your background.

<body bgcolor=”yellow”>

<p> Hello! </p>

</body>

For the image background we use also the background attribute to change it.

We just need to change the bgcolor attribute to background then put the image
name to the value.

<body background=”image.jpg”>

<p> Hello!</p>

</body

LESSON
The HTML text formatting are used to format the appearance of the text in your
webpage. It provides several tags that can use to modify the look of a text, to make
it more attractive to design that you’re aiming for.

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example syntax of <b> tag.

<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>

Result:
 Figure 1

The HTML <strong> element defines strong text, with added semantic "strong"
importance.

Example syntax of <strong> tag.

<body>

<p>This text is normal.</p>

<p><strong>This text is strong.</strong></p>

</body>

Result:

Figure 2

The HTML <i> element. defines italic text, without any extra importance.

<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>

Result:

Figure 3

The HTML <em> element defines emphasized text, with added semantic
importance.

<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>

Result:

Take note that browsers display <strong>Figure

as <b>, and <em> as <i>. However, there
is a difference in the meaning of these tags: <b> and <i> defines bold and italic text,
but <strong> and <em> means that the text is "important".

The HTML <small> element defines smaller text:

<body>
<h2>HTML <small>Small</small> Formatting</h2>

</body>

Result:

Figure 5

The HTML <mark> element defines marked or highlighted text:

<body>

<h2>HTML <marked>Marked</marked> Formatting</h2>

</body>

Result:

Figure 6

The HTML <del> element defines deleted (removed) text.

<body>

<p>The del element represents deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>

</body>
Result:

Figure 7

The HTML <ins> element defines inserted (added) text.

<body>

<p>The ins element represents inserted (added) text. </p>

<p>My favorite <ins>color</ins> is red.</p>

</body>

Result:

Figure 8
The HTML <sub> element defines subscripted text.

<body>

<p>This is _subscripted text. </p>

</body>

Result:

f
i

Figure
The HTML <sup> element defines superscripted text.

<body>

<p>This is ^{superscripted} text. </p>

</body>

Result:

Figure 10
 ACTIVITIES

Directions: Write all the paragraphs on your webpage. Put a horizontal rule after
each paragraph. Use your favorite color as the background, put 5 as the text size,
also justify the text alignment and add text color Blue.

1. Add extra importance and put inserted element to all the word "climate
change" in the paragraph below:

Climate change, also called Global Warming, refers to the rise in average
surface temperatures on Earth. An overwhelming scientific consensus
maintains that climate change is due primarily to the human use of fossil
fuels, which release carbon dioxide other greenhouses gases into the air. The
gases trap heat within the atmosphere, which can have a range of effects on
ecosystems, including rising sea levels, sever weather events, and droughts
that render landscapes more susceptible to wildfires.

2. Emphasize the word "earth’s" in the paragraph below. Highlight all the
statistics.

Even small increases in Earth’s temperature caused by climate change can

have severe effects. The earth’s average temperature has gone 1.4ºF over the
past century and is expected to rise as much as 11.5 ºF over the next. That
might seem like a lot, but the average temperature during the last Ice Age was
about 4 ºF lower that it is today.

3. Add a line through (strikeout) to all the word "oppression" in the paragraph
below, and make the said words smaller.

Oppression occurs whenever one person exercises authority or power in

unfair, abusive, cruel, or needlessly controlling way. For example, a parent
who locks a child in the closet could be said to be oppressing that child.
Slavery, the refusal to allow women to inherit the own property, the denial of
equal rights to people with disabilities, and the involuntary commitment of
people who deviate from social norms are all example of oppression.
RUBRICS FOR WORKSHEET No. 4
Basic Text Formatting Style in HTML Document

Rubrics:

For Activity 1 the students will get total of 20 points.

Items Points
1. Put background color, font size, 5
color and alignment.
2. Add extra important and inserted 4
text formatting
3. Emphasize and highlight 4
4. Line through and smaller text 4
formatting element.
5. Horizontal rule 3
TOTAL 20 points

WRAP–UP
HTML Text Formatting Elements, use to make the text more stylish and
appropriate to the design, it also gives life to the content of the webpage. To
summarized our lesson for today give a syntax of the following Text formatting
element below.

Text Formatting Element Syntax

1. Bold
2. Inserted
3. Important
4. Highlighted
5. subscripted
 VALUING

Directions: Read and answer the following questions carefully in two to three
sentences each number.
1. Why do we need to have HTML text formatting when creating a webpage?

2. Why is it important to know the different HTML text formatting?

POSTTEST

Directions: Choose the best answer. Circle the letter of your choice.

1. Which of these Text formatting elements is use to highlight important text in

your webpage?
A. <em> B. <mark> C. <strong> D. <b>
2. Which of the following Text formatting element that has a syntax like this “
<p>My favorite <ins>fruit</ins> is apple. </p>”?

A. Mark B. Delete C. Inserted D. Emphasize

3. Which of the following text formatting element that gives emphasized to a text?
A. <em> B. <mark> C. <strong> D. <del>
4. It is an HTML text formatting element that is used when you want to erase text
in your HTML document.

A. <em> B. <mark> C. <strong> D. <del>

5. What text formatting element that is used in this syntax, “<p>This is my
^house text. </p>”?

A. Inserted B. superscript C. <subscript D. strong

s
6. Which of the following HTML elements defines bold text without any extra
importance?

A. <strong> B. <i> C. <b> D. <small>

7. Which of the following HTML elements defines superscripted text?

A. <small> B. <sub> C. <sup> D. <del>

What text formatting element that is used in this syntax, “<p>This is my

8.

<i>house</i> text. </p>”?

A. <strong> B. <i> C. <b> D. <small>

9. Which of the following HTML text formatting element is defined as a smaller

text

A. <strong> B. <i> C. <b> D. <small>

10. Which of the following HTML text formatting elements that when you use this
the text will look like this “TEXT”?

A. Mark B. Deleted C. Inserted D. Emphasized

 KEY TO CORRECTION

References

Websites

Accessed July 1, 2020 8:30 pm. https://www.w3schools.com/

Accessed July 1, 2020 8:40 pm https://www.simplehtmlguide.com/text.php

Accessed July 1, 2020 11:00 pm . https://www.takepart.com/flashcards/what-is-

climate-change/index.html

Accessed July 1, 2020 11:15 https://www.goodtherapy.org/

blog/psychpedia/oppression