Republic of the Philippines

Department of Education
National Capital Region
DIVISION OF CITY SCHOOLS – MANILA
Manila Education Center Arroceros Forest Park
Antonio J. Villegas St. Ermita, Manila

Information and Communications

Technology (ICT)
Grade 10 Webpage Design
Special Science Course

Quarter 2 Week 1
Module 1

FORMATTING TEXT

1
HOW TO USE THIS MODULE?

Before starting the module, I want you to set aside other tasks that will disturb
you while enjoying the lessons. Read the simple instruction below to successfully
enjoy the objectives of this kit. Have fun!

1. Follow carefully all the contents and instructions indicated in every page on this
module
2. Write on your notebook or any writing pad the concepts about the lessons.
Writing enhances learning, which is important to develop and keep in mind.
3. Perform all the provided activities in the module.
4. Let you facilitator/guardian assess your answers.
5. Analyze conceptually the post-test and apply what you have learned.
6. Enjoy studying!

PARTS OF THE MODULE

● Expectations - These are what you will be able to know after completing
the lessons in the module.
● Pre-test - This will measure your prior knowledge and the concepts to be
mastered throughout the lesson.
● Looking Back - This section will measure what learnings and skills that you
understand from the previous lesson.
● Brief Introduction-This section will give you an overview of the lesson.
● Activities - These are activities designed to develop critical thinking and
other competencies. This can be done with or without a partner depending
on the nature of the activity.
● Remember - This section summarizes the concepts and applications of the
lessons.
● Checking your Understanding - It will verify how you learned from the
lesson.
● Post-test - This will measure how much you have learned from the entire
module.

2
2
LESSON 1: IDENTIFYING TAGS AND ATTRIBUTES USED IN FORMATTING
TEXT

EXPECTATIONS
Upon completion of the module, learners should be able to:
● set font style, size, and color;
● apply commonly used font formatting; and
● insert special character entities.

PRE-TEST: Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Which tag is used to define font face, font size, and font color in HTML?
a. <em></em> b. <font></font> c. <hr> d. 
____ 2. Which HTML version does not support the <font> tag?
a. HTML 2 b. HTML 3 c. HTML 4 d. HTML 5
____ 3. Which attribute is used to set the font type?
a. face b. font c. size d. type
____ 4. Which of the following HTML code is correct?
a. <font face=“Calibri”>Calibri</font>
b. <font face=“Verdana>Verdana</font face>
c. <font type=“Times New Roman”> Times New Roman</type>
d. <font type=Arial>Arial</font>
____ 5. Which attribute is used to adjust the size of the text in an HTML document?
a. size b. small c. sub d. sup
____ 6. What is the default font size of the text in an HTML document?
a. 1 b. 2 c. 3 d. 4
____ 7. Which attribute is used to set the color of the text in an HTML document?
a. color b. fcolor c. tcolor d. textcolor
____ 8. Which of the following HTML code is correct?
a. <font color=red>Red</font>
b. <font color=“green>Green</font>
c. <font color=“red”>Red</font>
d. <font tcolor=“green”>Green</font>
____ 9. Which of the following is NOT used to set the style of font?
a. <b></b> b. <em></em> c. <small></small d. <tall></tall>
____ 10. What symbol always ends or closes a special character entity?
a. ! b. & c. - d. ;

3
3
LOOKING BACK TO YOUR LESSON

Directions: Write the code for the output below.

Output Code
a. Region I
b. Region II
c. Region III
d. Region IV-A
e. Region IV-B
f. Region V
g. Region VI
h. Region VII
i. Region XIII
j. Region IX
k. Region X
l. Region XI
m. Region XII
n. Region XIII
o. ARMM
p. CAR
q. NCR

4
4
BRIEF INTRODUCTION

Formatted text can draw the reader’s attention to certain parts of the webpage. It can
also give emphasis to important information. There are several elements used to design and
display special types of text.

<font> Tag

The <font> tag is very helpful when it comes to designing and creating an attractive
and readable webpage. It is mainly used to change the color, size, and style of a text. The
<font> tag is used HTML4 but is not supported in HTML5. Therefore, CSS is used to define
font face, font size, and color.

The <font> tag has three attributes:

 face / type
 size
 color

Font Type

The font type can be set using the face attribute of the font tag. However, the fonts to
be used needs to be installed in the system first.

HTML code:

Output:

5
5
Font Size

The font size is used to adjust the size of the text in the HTML document. The font size
ranges from 1 to 7 and the default size is 3.

HTML code:

Output:

Font Color

The font color is used to set the color of the text with the color attribute. Color can be
set using its name or its hex code.

HTML code:

6
6
Output:

To set the style of the font, the following attributes can be also be used: <b></b>,
<i></i>, <u></u>, , , <small></small>, <strong></strong>, and
<em></em>.

HTML code:

Output:

7
7
 Tags for Font Formatting
<b></b> Displays the text in bold format
<i></i> Displays the text in italic format
<u></u> Displays the text in underlined format
<sup></sup Displays the text in superscript
 Displays the ext in subscript
<em></em> Displays the text with emphasis
<strong></strong> Displays the text with strength
<small></small> Displays the text in small size

Special Character Entities

Special character entities are usually written with an ampersand ( & ) followed by the
entity name and ends with a semi-colon ( ; ). One example is &nbsp;. The said entity means
non-breaking space. It is a special character that displays a horizontal space. It is similar to
the <br> tag.

HTML code:

Output:

8
8
Special Character Entities
&gt; Used to insert greater than symbol or >
&lt; Used to insert less than symbol <
&#47; Used to insert slash or /
&copy; Used to insert copyright symbol or ©
&reg; Used to insert registered symbol or ®
&amp; Used to insert ampersand or &
&ndash; Used to insert en dash or -
&mdash; Used to insert em-dash or –
&nbsp; Used to insert a non-breaking space

9
9
ACTIVITY:

A. Directions: Write the formatting tags for the following outputs. Write the opening and
closing tags.

1) Philippines
2) United States of America
3) Great Britain
4) New Zealand
5) South Korea
6) Japan
7) France
8) Italy
9) Canada
10) United Arab Emirates

B. Directions: Copy the codes below, change the contents of the body with your chosen
poem and use different font face, color, and size.

REMEMBER

Formatted text can draw the reader’s attention to certain parts of the webpage. It can
also give emphasis to important information. The <font> tag is very helpful when it comes to
designing and creating an attractive and readable webpage. It is mainly used to change the
color, size, and style of a text. The font type can be set using the face attribute of the font tag.
However, the fonts to be used needs to be installed in the system first. The font size is used
to adjust the size of the text in the HTML document. The font size ranges from 1 to 7 and the
default size is 3. The font color is used to set the color of the text with the color attribute. Color
can be set using its name or its hex code. To set the style of the font, the following attributes
can be also be used: <b></b>, <i></i>, <u></u>, , ,
<small></small>, <strong></strong>, and <em></em>.

Special character entities are usually written with an ampersand ( & ) followed by the
entity name and ends with a semi-colon ( ; ). One example is &nbsp;.

10
10
 CHECKING YOUR UNDERSTANDING

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Francine is creating a website for their family business. To make the page more
appealing to the readers, she wants to set the font type to Arial and font color to
Blue. What is the correct HTML code that she should use?
a. <font face= “Arial” color= blue> … </font>
b. <font face= “Arial” font color= “blue”> … </font>
c. <font face= “Arial color= blue”> … </font>
d. <font face= “Arial” color= “blue”> … </font>

____ 2. After setting the font type and color of the text she noticed that the text is too
small. So she decided to use the size of the text next to the default size. What is
the correct HTML code that she should use?
a. <font size=“4”> … </font>
b. <font size=“5”> … </font>
c. <font size=“6”> … </font>
d. <font size=“7”> … </font>

____ 3. After adjusting the size of the text, she decided that she also wants to italicize
all the titles in the website. Which font style should she use?
a. <b></b> c. 
b. <i></i> d. 

____ 4. When Francine has finally italicized all of the titles, she thinks it’s not enough.
So she decided to add strength to all of the titles. Which font style should she
use?
a. <em></em> c. 
b. <strong></strong> d. 

____ 5. To finalize the website of their family business, Francine would like to add the
copyright symbol at the footer section. What is the HTML code for this special
character entity?
a. &amp; c. &cprt;
b. &copy; d. &reg;

11
11
 POST-TEST Multiple Choice

Directions: Choose the letter of the correct answer and write it on the space provided.

____ 1. Which HTML version does not support the <font> tag?
a. HTML 2 b. HTML 3 c. HTML 4 d. HTML 5
____ 2. Which tag is used to define font face, font size, and font color in HTML?
a. <em></em> b. <font></font> c. <hr> d. 
____ 3. What symbol always ends or closes a special character entity?
a. ! b. & c. - d. ;
____ 4. Which attribute is used to adjust the size of the text in an HTML document?
a. size b. small c. sub d. sup
____ 5. What is the default font size of the text in an HTML document?
a. 1 b. 2 c. 3 d. 4
____ 6. Which attribute is used to set the font type?
a. face b. font c. size d. type
____ 7. Which of the following HTML code is correct?
a. <font face=“Calibri”>Calibri</font>
b. <font face=“Verdana>Verdana</font face>
c. <font type=“Times New Roman”> Times New Roman</type>
d. <font type=Arial>Arial</font>
____ 8. Which attribute is used to set the color of the text in an HTML document?
a. color b. fcolor c. tcolor d. textcolor
____ 9. Which of the following HTML code is correct?
a. <font color=red>Red</font>
b. <font color=“green>Green</font>
c. <font color=“red”>Red</font>
d. <font tcolor=“green”>Green</font>
____ 10. Which of the following is NOT used to set the style of font?
a. <b></b> b. <em></em> c. <small></small d. <tall></tall>

12
12
ANSWER KEY

Pre-test
1. B 3. A 5. A 7. A 9. D
2. D 4. A 6. C 8. C 10. D

Looking Back To Your Lesson Activity

A.
1. <b>Philippines</b>
2. United ^States of America
3. <i>Great</i> Britain
4. New <u>Zealand</u>
5. South _Korea
6. <b><i>Japan</i></b>
7. <b><i><u>France</u></i></b>
8. <i><u>Italy</u></i>
9. <b>Canada</b>
10. United _Arab
^Emirates

Activity Checking Your Understanding

B. 1. D
Rubrics for Output: 2. A
3. B
4. B
5. B

Post-test
1. D
2. B
3. D
4. A
5. C
6. A
7. A
8. A
9. C
10. D

REFERENCES

Books:
Web Design 3rd Edition by Jemma Development Group

Online Sources:
https://www.geeksforgeeks.org/html-font-
tag/#:~:text=The%20font%20tag%20is%20used,Size&text=Color,-font%20Size%3A%20This
https://discoverpoetry.com/poems/short-poems-for-children/
https://studylib.net/doc/25200558/html-webpage-rubric

13
13
 Acknowledgement
First Edition 2020
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

Secretary: Leonor Magtolis Briones
Undersecretary: Diosdado M. San Antonio

Development Team of the Module

Writer: Jessica Frances B. Dominguez, MTE

Teacher, Manuel G. Araullo High School

Editor: Ariel D. Tosio

Education Program Supervisor – TLE-TE/Voc

Reviewer/Validator: Anthony H. Ducta

Head Teacher, Manila Science High School

Management Team: Malcolm S. Garma, Regional Director

Genia V. Santos, CLMD Chief
Dennis M. Mendoza, Regional EPS in Charge of
LRMS and Regional ADM Coordinator
Maria Magdalena M. Lim, CESO V
Schools Division Superintendent
Aida H. Rondilla, Chief-CID
Lucky S. Carpio, Division EPS in Charge of LRMS and
Division ADM Coordinator

14
14