7

COMPUTER SCIENCE 1
Guided Learning Activity Kit
HTML Tags
Quarter 4 - Week 6

1|P age
Computer Science 1 – Grade 7
Guided Learning Activity Kit
HTML Tags
Quarter 4 - Week 6

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.

Guided Learning Activity Kit Development Team

Writer: Moises D. Abellera Jr.
Editor: Andrew V. Paje
Reviewer: Evelyn D. Tarrayo, EdD
Illustrator:
Layout Artist: Moises D. Abellera Jr.
Management Team: Romeo M. Alip, PhD, CESO V
Michelle Ablian-Mejica, EdD
Manolito B. Basilio, EdD
Evelyn D. Tarrayo, EdD
Garry M. Achacoso
Rachelle C. Diviva
Chester Allan P. Matienzo

Printed in the Philippines by the Department of Education

Region III
Schools Division of Zambales
Zone 6, Iba, Zambales
Tel./Fax No. (047) 602 1391
E-mail Address: zambales@deped.gov.ph
Website: www.depedzambales.ph
 HTML Tags

Introduction

List the websites that you recently browsed on the internet? Facebook,
YouTube, Google, Yahoo, Wikipedia, Lazada, or Shopee may be included in your list.
You may have learned that these sites are composed of so many web pages. How
are these digital networks of pages created? Would you like to design your webpage?
In this Guided Learning Activity Kit (GLAK), you will be able to create a
webpage using a simple text editor. You will explore different HTML tags needed in
coding your first web page.

Learning Competency

Demonstrate skills in making entertaining and informative web pages

using HTML.

Objectives

At the end of this learning activity sheet, I will be able to:

1. identify different HTML tags;

2. use text editors in creating a webpage; and
3. design your webpage using HTML tags in a simple text editor.

Review

Directions: Briefly discuss the significant features of three internet browsers that you
learned in the previous GLAK.
1. _________________________________________________________________________
__________________________________________________
2. _________________________________________________________________________
__________________________________________________
3. _________________________________________________________________________

1|P age
 __________________________________________________

Discussion

Webpages are created using professional HTML editors. However, you may
create your webpage using MS Word or even a simple text editor like Notepad. It
is good to learn HTML coding using Notepad. Follow the steps below for you to
create your first webpage using this simple text editor.
1. Coding your first webpage
Step 1. Open your Notepad application

Step 2. Copy the code below in the Notepad.

2|P age
 You may have noticed that the color is set to “medium blue”. This could
be replaced with colors you desire but make sure to know the accepted color codes
in HTML. For now, we used medium blue. In Line 3 and line 4, we set the texts
to be displayed on our webpage as “My First Webpage” and “Hello World!”. These
characters could also be a change in later activities.

Step 3. Save your code as shown below. Use File>Save As. Name the file as
“Myfirstwebpage.htm” and set Encoding to UTF-8 as prescribed by HTML.

Step 4. Go to the folder where you previously saved your file. You may notice
that the file is already in an HTML file or a webpage with the logo of your default
web browser.

Step 5. Open the file. The file will open in your default browser. In the example,
the created webpage opens in Google Chrome. Although the displayed page is
simple, you may begin to improve your webpage by learning more HTML tags
which will be discussed on the next page.

3|P age
 2. Declaration, Heading, and Paragraph
As you can see in the code below, the first line declares the document type
using <!DOCTYPE> which helps the browser (eg. Chrome) to display this web page
correctly. After the declaration, the code will start with <html> and ends with
</html>. Then, the part which is displayed on the browser is between <body>
and </body>.

<!DOCTYPE class="attributecolor" style="color:red">

<html class="tagcolor" style="color:red"
<body class="tagcolor" style="color:red">

<h1 class="tagcolor" style="color:red">>This is heading 1</h1

class="tagcolor" style="color:red">>
<h2 class="tagcolor" style="color:red">>This is heading 2</h2
class="tagcolor" style="color:red">>
<h3 class="tagcolor" style="color:red">>This is heading 3</h3
class="tagcolor" style="color:red">>

</body class="tagcolor" style="color:red">

</html class="tagcolor" style="color:red">

Copy the code in Notepad and repeat Step 3 and Step 4 on the previous page.
Save it as “Basic.htm”. Shown on the next page is the displayed output in your
browser.

4|P age
 The HTML headings are defined using <h1> to <h6> tags. You may notice
that <h1> set the largest font size. The tag <h6> will give the smallest. The color
of the heading is also set to “RED” using "color: red". Shown below are the HTML
tags you already used.
HTML Tag Description
<html> Declares the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Set the size of HTML headings

On page 4, you already learned how to code the paragraph of your webpage.
You may improve your paragraph setting by using the code below.

<!DOCTYPE class="attributecolor" style="color:red">

<html class="tagcolor" style="color:red"
<body class="tagcolor" style="color:red">

<h1 class="tagcolor" style="color:red">MY ACCOMPLISHMENT</h1

class="tagcolor" style="color:red">

<pre class="tagcolor" style="color:mediumblue">

I can put HEADING in this web page > CHECK

I can put PARAGRAPH on this web page > CHECK

I can put LINE BREAKS in the paragraph > CHECK

And there's more to learn. :)

</pre class="tagcolor" style="color:mediumblue">

</body class="tagcolor" style="color:red">

</html class="tagcolor" style="color:red">

5|P age
 The tag <pre> will set the browser to display the line breaks, spaces, and
font as shown below.

3. Text Style
Shown below are different HTML tags to set the text style on your
webpage.
HTML Tag Description
<b> Bold text
<strong> Important text
<i> Italic text
<em> Emphasized text
<mark> Marked text
<small> Smaller text
<del> Deleted text
<ins> Inserted text
<sub> Subscript text
<sup> Superscript text

A sample code is shown below in setting Bold text. The output on the
web page is also shown.
<!DOCTYPE class="attributecolor" style="color:red">
<html class="tagcolor" style="color:red"
<body class="tagcolor" style="color:red">
<b class="tagcolor" style="color:red">This text is bold</b
class="tagcolor" style="color:mediumblue">
</body class="tagcolor" style="color:red">
</html class="tagcolor" style="color:red">

6|P age
 Activities

Guided Practice 1
Directions: Describe the following HTML tags below.

Tags Description

<del>

<body>

<pre>
<html>

<p>
<h1>

<b>

<h6>

<i>

<em>

Guided Practice 2
Directions: Create an HTML code in Notepad using the HTML tags below.

1. <i> 6. <sub>
2. <b> 7. <sup>
3. <em> 8. <ins>
4. <strong> 9. <del>
5. <small> 10. <mark>

Independent Practice
Directions: Write a three-paragraph summary of your learnings in this GLAK. Use
this as the content and create a webpage using Notepad. Put a heading/title. Utilize
as many HTML tags as possible.

7|P age
 Assessment

Directions: Identify what is described below. Write the letter of your answer in
the space provided.

a. Notepad b. Heading c. Paragraph d. HTML tags

e. <body> f. <b> g. <pre> h. <i> i. <em> j. <sub>

___ 1. The part of the webpage created using the tag <h>.

___ 2. Tag that set the text in bold style.

___ 3. Emphasized text

___ 4. A simple text editor that could be used in coding a webpage using HTML
tags.

___ 5. Makes the text as subscript

___ 6. It contains the content displayed in the web browser.

___ 7. Tag that set the text in italic style.

___ 8. It will set the browser to display the line breaks, spaces, and font.

___ 9. The codes used in creating a webpage.

___ 10. The part of the webpage created using the tag <p>.

8|P age
Reflection

Directions: Complete the following based on the learnings from the

previous lesson.

I leaned about _________________.

Knowing about this topic helps me _____________________.

This topic reminds me of __________________.

The part I know the most about is __________________.

The part that is the most confusing is ________________.

I would like to know more about __________________.

9|P age
 References

"HTML Basic". 2021. W3schools.Com.

https://www.w3schools.com/html/html_basic.asp.

"HTML Elements". 2021. W3schools.Com.

https://www.w3schools.com/html/html_elements.asp.

"HTML Heading". 2021. W3schools.Com.

https://www.w3schools.com/html/html_heading.asp.

"HTML Paragraph". 2021. W3schools.Com.

https://www.w3schools.com/html/html_paragraph.asp.

"HTML Style". 2021. W3schools.Com.

https://www.w3schools.com/html/html_style.asp.

10 | P a g e
11 | P a g e
Guided Practice 1 Assessment
1. deleted text 1. b
2. includes content displayed by the browser 2. f
3. will set the browser to display the line 3. i
breaks, spaces and font 4. a
4. declares the root of an HTML document 5. j
5. paragraph 6. e
6. largest text size 7. h
7. bold text 8. g
8. smallest text size 9. d
9. italic text 10. c
10. emphasized text
Reflection
Guide Practice 2 Answers may vary
Answers may vary.
Independent Practice
Answers may vary.
Key to Corrections
 Acknowledgment

The Schools Division of Zambales would like to express its heartfelt

gratitude to the following, who in one way or the other, have contributed to the
successful preparation, development, quality assurance, printing, and distribution
of the Quarter 2 Guided Learning Activity Kits (GLAKs) in all learning areas across
grade levels as a response to providing the learners with developmentally-
appropriate, contextualized and simplified learning resources with most essential
learning competencies (MELCs)-based activities anchored on the principles of guided
learning and explicit instruction:

First, the Learning Resources (LR) Development Team composed of the writers
and graphic artists for devoting much of their time and exhausting their best efforts
to produce these indispensable learning kits used for the implementation of learning
delivery modalities.

Second, the content editors, language reviewers, and layout evaluators

making up the Division Quality Assurance Team (DQAT) for having carefully
evaluated all GLAKs to ensure quality and compliance to DepEd standards;

Third, the Provincial Government of Zambales, for unceasingly extending its

financial assistance to augment the funds for the printing of these learning resources
for use by learners and parents at home;

Fourth, the teacher-advisers and subject teachers, in close coordination with

the school heads, for their weekly distribution and retrieval of the GLAKs and for
their frequent monitoring of the learners’ progress through various means; and

Finally, the parents and other home learning facilitators for giving the learners
the needed guidance and support for them to possibly accomplish the tasks and for
gradually helping them become independent learners.

To deliver learning continuity in this challenging circumstance would not be

possible without your collective effort and strong commitment to serving our
Zambaleño learners.

Again, our sincerest thanks!

The Management Team

12 | P a g e
 For inquiries of feedback, please write or call:

Department of Education – Region III – Division of Zambales

Learning Resources Management Section (LRMS)
Zone 6, Iba, Zambales
Tel./Fax No. (047) 602 1391