LEARNING MODULE IN ICT 7

First Quarter – SY 2020 - 2021

Name: _________________________________ Week # 3– Module 1

Grade/Section: __________________________ Teacher: ____________________

I. Title: Understanding and Editing HTML Codes

II. Objectives:
At the end of the module, the learner should be able to:
1. understand how to change font color and size.
2. know how to adjust text alignment
3. apply Bold and Italic Style to text.
III. Material: Google Drive. Computer. Notes and ICT Module
IV. Time Frame: August 18, 2020 (St. Bartholomew), August 19 (St. James), August 19 (St. Peter)., 40
minutes.

In our past lessons, you learned about source code and HTML. Today, you are going to learn how to
edit HTML codes. Are you ready? Let’s begin.

HTML makes use of HTML tags called formatting tags.  These tags are used for format output
like bold or italic text.

CHANGING FONT COLOR AND SIZE

To change the font size, this is done with the following code:
<font size = “3”> text to change </font>
To change the font color, this is done with the following code:
<font color=”red”> this text is color red </font>
To change both the font size and color, look at the following code:
<font size=”+1” color=”gold”> This text increases in size and color gold </font>
CHANGING TEXT ALIGNMENT
To change the alignment of the text to left, right or center using a simple attribute of the heading <h1></h1>
tag, paragraph <p></p> tag or division <div></div> tag.  Put this code within these tags
align = “center”
align = “left”
align = “right”

Example:
<h1 align = “center”>Center</h1>
<p align = “left”>Left</p>
<div align = “right”>Right</div>
APPLYING BOLD AND ITALIC STYLE
To apply bold and italic style to text use the following tags:
For bold: <b>Bold text</b>
For Italic: <i>Italic text</i>
To use bold and italic text both, you can nest the two
<b><i> Bold and Italic text</i></b>

A. Open the existing Zip file 

Make sure that you have downloaded these SVG files from the Downloadable section:
1. ToBeOrNotToBe.html
Link: https://drive.google.com/drive/folders/1IqwGgfh8I60x6D4GPVYyGL2uGWbRO_b0

FORMATTING WEBSITES

1. Open ToBeOrNotToBe.html using notepad.

Go to Downloadable Materials folder ► Hands On ► open ToBeOrNotToBe.htmlusing notepad by right-

clicking on the file then choose Open with.

2. Change font color and size.

To change the font color and size of the text insert the code and on the texts you want to modify.
Note: #660000 represents color beige.
Save the file.
To save the file, go to File then Save.

3. Adjust text alignment.

To adjust the text alignment to center put this code within the paragraph tags:
align = “center”
4. Apply bold and italic style.

To apply bold to the header just enclose the bold tag which is b tag to the texts.

To apply italic to all quotations just enclose the bold tag which is i tag to the texts.

5. Save the file by pressing Ctrl + S on your keyboard.

Open the file using Google Chrome Web browser.

A. IDENTIFICATION: Read the questions carefully and write your answers on the blank spaces provided.

1.What do you call the tags that are used to format output?
___________________________________

2.What is the html tag that defines bold text?

___________________________________
3. What is the html tag that defines italic text?

___________________________________
4. Mickey wants to change the font size of his text “Hello” to font size 3, what code does he needs
to insert on his website?

___________________________________
5. Bert is setting up a website for his new business, he needs to change the font color of
“chocolate” to brown, what code does he needs to insert on his website?

___________________________________
6. Frodo has a homework on his computer class, part of it is that he needs to change the font of his
name to font size 4 and change the color to gold, what code does he needs to insert on his
homework?

___________________________________
7. Nikki is thinking of how she can make the text of her name bold and italic, what code does she
needs to insert?
__________________________________

8. Miss Hudson thinks that there is something wrong with this code in her html file
<fontcolor=”red>Love is blind<font>, what do you think if correct code?

_________________________________
9. Nikka doesn’t know what to put in her code to align the heading text which is “About my life” to
the left, what is the code to align the heading to the left? (She makes use of heading 1 - <h1>)

_________________________________
10. What is the code to make the font color green (use the text “green”)?

________________________________

What did you learn?

________________________________________________________________________________________
________________________________________________________________________________________
___________________________________________.

Give some importance of what you learned today.

________________________________________________________________________________________
________________________________________________________________________________________
___________________________________________.
 ICT 7
Activity Sheet 3

First Quarter – SY 2020 - 2021

Name: _________________________________ Week # 3– Module 1

Grade/Section: __________________________ Teacher: ____________________
August 19, 2020 (St. Bartholomew)
August 20, 2020 (St. James and St. Peter)

Objectives:
1. Recall concepts in understanding and editing html codes.
2. Do the activity independently.

A. Open the existing Zip file 

Make sure that you have downloaded these SVG files from the Downloadable section:
1. HTML FILES.zip
Link: https://drive.google.com/drive/folders/1IqwGgfh8I60x6D4GPVYyGL2uGWbRO_b0

Poem Dilemma
You are to edit a webpage containing a poem entitled Fire and Ice for your Literature class.
Open FireAndIce.htmL. You need to change the alignment of the poem to center and italize its text.
Apply bold to the title of the poem. Change the font color to red (#990000) and font size to 4.

Expected Output: