Technical

Vocational
Livelihood
QUARTER

Computer Programming

TECHNICAL VOCATIONAL LIVELIHOOD

Computer Programming (ICT) – Grade 11
Quarter 1 – Module 3: HTML5 A Document
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 Division of Pasig City

Development Team of the Module

Writer : Magiel L. Boncayao
Editor : Lerma Cantanero
Reviewer : 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

 Computer
Programming

QUARTER 1
Introductory Message

For the facilitator:

Welcome to the Computer Programming for the ICT Module on HTML5 A 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 HTML5 A Document.

The hand is one of the most symbolized parts 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 you will understand the following:

1. understand the importance of background color and image of an html

document;
2. differentiate the functions of the common tags like paragraph tag, line
breaks and pre tag; and
3. use the different tags same with the background color or image to
create a simple webpage.

PRETEST

Directions: Circle the letter that corresponds to the correct answer.

1. Which of the following HTML elements doesn’t have a close tag?

A. <pre> tag B. <p> tag C. <body> D. <br> tag

2. Which of the following is a preformatted element?

A. <pre> tag B. <p> tag C. <text> tag D. <br> tag
3. Which of the following tags are used when you want to start a paragraph?
A. <pre> tag B. <p> tag C. <text> tag D. <br> tag
4. Which of the following can be used to change the color of your website
background?
A. Background-image attribute B. CSS background-image property
C. Background-color property D. Background attribute-color
5. Which of the following is used when you want to make the image as a
background?
A. Background-image attribute B. CSS background-image property
C. Background-color property D. Background attribute-color
 RECAP

HTML was created by Tim Berners-Lee also known as the Father of the Web.
The first version of HTML was HTML 1.0 which was published in 1991 and the latest
version was HTML 5 which was published in 2014. HTML stands for Hyper Text
Markup Language. HTML is not a programming language it only describes the
structure of a Web page that gives meaning by defining that content as, for example,
headings, paragraphs and images or simply HTML is the content of a webpage.

We already discussed also basic HTML Elements and tags. HTML Element is
a set of opening and closing tags therefore tags are element names that surrounded
by angle brackets. Tags usually come in pairs. The start tag or also known as
beginning tag and the end tag also called as closing tag. The end tag is written like
the start tag, but with a forward slash inserted before the tag name.

Example: <tag> …………… </tag>

HTML structure

<Tag attribute = “value”>………………</end>

Attributes is an additional characteristics or properties of the element. It

consists of name/value pairs like AttributeName="AttributeValue". Values should
always be enclosed in quotation marks.

<!DOCTYPE html> ------------------ This is to declare that your document is an

HTML5.

<html> ---------------------------------- HTML root element.

<head> --------------------------------- Contains meta information.
<title>About my self </title> ---------- Specifies title of document.
</head> ------------------------------- End tag. Contains meta information.
<body> --------------------------------- Holds the content of document.
My name is Jenessy
</body> -------------------------------- End tag. Holds the content of document.
</html> -------------------------------- End tag. HTML root element.
HTML Document Structure

You have learned also on how to save an HTML document.

1. Open sublime or other html editor application.

2. Writing html.
3. Save the file on your computer. Click File tab and click save or click
Ctrl and S on your keyboard. Name the file as “my document.html”
then click save.
4. Locate your HTML file on your computer. Double click on the file, or right-
click - and choose "Open with" then choose your favorite browse.
 LESSON
HTML5 A Document
Last time we already discussed the basic HTML Elements. From there you
learned a simple HTML structure and HTML tags, now we’re going to further discuss
the use of Paragraph tag, Line breaks, Pre tag and also the HTML background to
create a simple HTML document.

In making a website, it is important to set a good impression to your visitors.

In this case, it is vital to have a good background because it determines whether your
visitor will keep on browsing or close the window. A good background sets the tone
of your website. It should grab the attention of your audience to keep their interest
and find out more about your website. It’s also important that your content should
match to your background, like the text placement or the line spaces of your text.
We are going to talk all about these in this lesson.

HTML Paragraphs

HTML paragraph is also known as <p> tag that defines a paragraph of text. It
is a block-level element and always starts on a new line. The <p> tag comes in pairs.
The content is written between the opening (<p>) and the closing (</p>) tags.

Example of the HTML <p> tag:

Figure 1
Result:

Figure 2

HTML Headings

• HTML headings are defined with the <h1> to <h6> tags.

• <h1> defines the most important heading.

• <h6> defines the least important heading:

Example of <h1 to h6 > tag:

Figure 3
Horizontal Rule <hr>

The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule. The <hr> element is used to separate content (or
define a change) in an HTML page.

Example of <hr> tag:

Figure 4

Result:

Figure 5

Line breaks

Line breaks also known as <br> tag. It is an example of an empty element

that does not have an end tag. <br> tag is used to insert a single line break, not to
add space between paragraphs, it is useful when you’re writing a poem or an
address, where the division of the lines is important.
 Example of <br> tag:

Figure 6

Result:

Figure 7

Pre tag

The <pre> tag defines preformatted text. Text in a <pre> element is displayed
in a fix-width font, and the text preserves both spaces and line breaks. The text will
be displayed exactly as written in the HTML source code.

Example of <pre> tag:

Figure 8
Result:

Figure 9

HTML Background

By default, the webpage background is white in color, but you can always
change it in your desire, whether you want a colored or an image background.

HTML Background with Color

Using the background attribute it can control your background color.

The bgrcolor attribute defines the background color for an HTML element. In the
example below the background color is powderblue:

Example of Background color syntax:

Figure 10
Result:

Figure 11

HTML Background with Image

To add a background image on an HTML element, use the HTML attribute. To

add a background image on a web page, specify the background image attribute on
the body element. Take note, your image should be high definition so that it won’t
get pixelated when it gets stretched out.

Example of Background image syntax:

Figure 12
Result:

Figure 13

ACTIVITIES

Directions: Create a simple HTML Document using these instructions:

1. Create a simple webpage with a title “ALL ABOUT MYSELF”

2. As the background color use the color Blue, and add a heading 1 with the
text as your complete name. Use Pink as text color and align it to center.
3. For first paragraph, write complete address, your email address and your
cellphone number, Grade, Strand and section. Separate it with line breaks.
Use 5 as text size and text color Yellow.
4. For the next paragraph, write your favorites, hobbies and skills. Use <h2> as
heading. Use line breaks to separate each skills.
5. Put horizontal rule before and after the second paragraph. For the last
paragraph, use <h3> as heading and then write your reflection/generalization
about HTML lessons. Minimum of 3 sentences.
 WRAP–UP

1. What is the HTML Elements that’s sets a tone and give life and color
to your webpage?
2. What the element that we put when we are going to create a
sentence or paragraph?
3. What is an empty element that gives a single line break only?
4. What is the element that the text will be displayed exactly as
written in your text editor, it is displayed in a fixed-width font?
5. What is the element that defined a thematic break in an HTML page?

VALUING

Directions: Read and answer the following questions carefully in two to three
sentences each number.

1. What is the importance of an HTML Background, when you’re creating a

website?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
2. Why is it important that HTML background and content should match to
each other?
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
___________________________________________________________________
 POST TEST

Directions: Circle the letter that corresponds to the correct answer.

1. Which of this Elements is an Empty element?

A. <p> B. <br> C. <h1> D. <body>

2. Which of the following attributes that can control your background

color?
A. bgcolor B. style color C. background D. bodybackground
3. Which of the following element that is a block-level element that is
always starts on a new line.
A. <p> B. <br> C. <pre> D. <h3>
4. It is an element that defined as preformatted text, that displayed in a fix-
width font, and the text preserves both spaces and line breaks.
A. <p> B. <br> C. <pre> D. <h3>
5. This HTML element is effective when you’re writing a poem or an
address, because it is use insert only single line break.

A. <p> B. <br> C. <pre> D. <hr>

6. Which of the following attributes that can control your background
image?
A. bgcolor B. style color C. background D. bodybackground
7. Which of the following is a syntax to put color in your background?
A. <body bgcolor= “pink”> B. <body backgroundcolor= “pink”>

C. <background= “pink”> D. <bgcolor= “pink”>

8. Which of the following is a syntax to put color in your Text?

A. <font-text color= “yellow”> B. <text color= “yellow”>

C. <font color= “yellow”> D. <fonttext color= “yellow”>

9. Which of the following HTML element is defined as a thematic break in

an HTML page

A. <p> B. <br> C. <pre> D. <hr>

10. Which of the following HTML element is defined as the most important
heading.

A. <h6> B. <h3> C. <h1> D. <h4

 KEY TO CORRECTION
10. C

9. D

8. C

7. A

6. C

5. B 5. B

4. C 4. C
<hr> 5.
3. A 3. B <pre> 4.
<br> 3.
2. A 2. A
<p> 2.
1. B 1. D Background 1.
Post-test: Pre-test: Wrap up key to correction:

References
Websites

Accessed June 29, 2020 12:00 pm

https://www.w3schools.com/tags/tag_pre.asp#:~:text=The%20tag%20defi
nes%20preformatted,in%20the%20HTML%20source%20code.
Accessed June 29, 2020 12:36 pm
https://www.jimdo.com/blog/best-background-for-your-website/
Accessed June 29, 2020 1:05 pm
https://www.w3schools.com/html/html_images_background.asp
Accessed June 29, 2020 1:05 pm
https://www.afterhoursprogramming.com/tutorial/html/paragraph-tag/

Pictures

 Figure 13: Accessed June 29, 2020 1:05 pm.

https://www.google.com/search?client=ms-android-
vivo&sxsrf=ALeKk03wvw2kB3wG4YbUDi1YgZJESwHbQw:1594784953536&
q=background+color&tbm=isch&chips=q:background+color,g_1:pastel:mveK
9lRd5mk%3D&usg=AI4_kR4rgWpAJ0J9ixfapFlCyGWIGJzTw&sa=X&ved=2a
hUKEwiJ3pf1rM7qAhUlxosBHYVQDtIQgIoDKAJ6BAgFEAc&biw=360&bih=5
60#imgrc=BdQDlLKkKYacYM