9/10

Technology and Livelihood

Education (TLE)
ICT-Webpage Design
Quarter 1 – Module 4
Develop Basic HTML and CSS3
Syntax
TLE ICT – Grade 10
Alternative Delivery Mode
Module 4 – TLE-ICT Programming .Net Technology (Web Page Design- Specialization)
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 - Schools Division Office of Makati City

OIC-Schools Division Superintendent: Carleen S. Sedilla CESE
OIC-Assistant Schools Division Superintendent: Brian E. Ilan EdD

Development Team of the Module

Writer: Sharon Gaye C. Laput
Editor: Jerome Galve
Reviewer: Dr. Celedonia T. Teneza
Layout Artist: Carlo J. Navarro
Management Team: Angelita S. Jalimao
Chief Education Supervisor, Curriculum Implementation Division

Neil Vincent C. Sandoval

Education Program Supervisor, LRMDS

Dr. Celedonia T. Teneza

Education Program Supervisor EPP/TLE/TVL

Printed in the Philippines by the Schools Division Office of Makati City

Through the support of the City Government of Makati (Local School Board)

Department of Education – Schools Division Office of Makati City

Office Address: Gov. Noble St., Brgy. Guadalupe Nuevo

City of Makati, Metropolitan Manila, Philippines 1212
Telefax: (632) 8882-5861 / 8882-5862
E-mail Address: makati.city@deped.gov.ph

ii
 About this Module
Welcome to Module 4 of Web Page Design. This module is a specialization course
specifically for “Perform Computer Operations”. Also this module is suitable for students
who are aiming for a Programming .Net Technology course in Grade 11 up to Grade 12
and pursue the National Certification Level III which is offered by TESDA.

What I Need to Know?

The main objective of this module is to help you gain knowledge and common
competency in Programming .Net Technology (Web Page Design) specifically “Perform
Programming in HTML5 with Javascript and CSS3 (PPHJ)”. To further explore this
area of expertise students must learn its foundation. This foundation can be observed
in the following learning outcomes listed below.

Learning Outcome: Develop Basic HTML Document using HTML5 and CSS3 syntax .
1.4 HTML BASICS
1.4.2 HTML Paragraphs and Lines
1.4.3 HTML Text Formatting & Anchor

Content Standards: The learners demonstrate an understanding of the principles and

concepts in performing computer operations.

Performance Standards: The learner independently performs computer operations

based on a given task.

1
 What I Know?
MULTIPLE CHOICE.
Direction: Choose the letter of the best answer. Write the chosen letter on the blank
provided before the number.
___ 1. What tag refers to writing paragraph form in your webpage?
A. <a href> B. <br/> C. <p> D. <strong>
___ 2. Which of the following tags is used to break line?
A. <br/> B. <em> C. <pre> D. <strong>
___ 3. What is the function of horizontal lines in HTML?
A. Divide the page into parts C. Italicize the word or sentence
B. Highlight the word or sentence D. Link the page to another site
___ 4. What is a text in a <pre> element that displays in a fixed-width font (usually
Courier), and preserves both spaces and line breaks?
A. Anchor B. Emphasis C. Pre-formatted Text D. Strong
___ 5. Which of the following does not belong to the HTML Text Format?
A. <em> B. <h1> C. <strong> D. <pre>
___ 6. What tag is used to create a link from a part of a Web page to another site or
page?
A. <a href> B. <br/> C. <p> D. <strong>
___ 7. Which of the following tags is used to italicize or slant the word or a sentence?
A. <br/> B. <em> C. <pre> D. <strong>
___ 8. What tag in HTML used to highlight the word or a sentence?
A. <br/> B. <em> C. <pre> D. <strong>
___ 9. Which of the following tags is an empty tag and does not take any additional
statements?
A. <br/> B. <em> C. <pre> D. <strong>
___ 10. What are the missing tags to complete the pre-formatted text ?
A. <br/> B. <em> C. <pre> D. <strong>
___ 11. Which of the following tags use a new line without starting a new paragraph?
A. <br/> B. <em> C. <pre> D. <strong>
___ 12. Which does not belong to the group of HTML Lines?
A. <br/> B. <hr> C. <pre> D. No answer
___ 13. Which of the following tags refers to pre-formatted text?
A. <br/> B. <em> C. <pre> D. <strong>
___ 14. What are the other resources to be used in anchor tags?
A. External B. Label C. Internal D. Diminish
___ 15. What tag do you use to create a hyperlink in HTML?
A. <a href> B. <em> C. <pre> D. <strong>

Lesson Develop Basic HTML Document Using

4 HTML5 and CSS3 Syntax

What’s In?
ENUMERATION:
Direction: Read the following HTML code and enumerate it to display
comment and different heading tags accordingly.
___ 1. <head>
___ 2. <html>
___ 3. </body>
___ 4. <title> My Webpage </title>
___ 5. <h2>Welcome to my webpage</h2>
___ 6. <body>
___ 7. <h3>Welcome to my webpage</h3>

2
 ___ 8. <h1>Welcome to my webpage</h1>
___ 9. </html>
___ 10. </head>

What’s New?
MATCHING TYPE:
Direction: Match column A with the correct answer on column B. Write only the
letter of answer on the blank provided before each number.

Column A Column B
___ 1. Strong a. <a href></a href>
___ 2. Emphasis b. <br/>
___ 3. Paragraph c. <em></em>
___ 4. Horizontal line d. <head></head>
___ 5. New line e. <hr>
___ 6. Anchor f. <h1></h1>
___ 7. Pre-formatted text g. <p></p>
___ 8. Title h. <pre></pre>
___ 9. Head i. <strong></strong>
___ 10.Heading j. <title></title>

What is It ?

HTML BASICS

On this part, you will learn the following HTML Basics: HTML Paragraph, HTML
Lines, HTML Text Formatting and HTML Anchor.

HTML Paragraph
It helps us to write paragraph form in your webpage. The tag begins with <p> and
ends with </p>. Moreover, to write on the next row, use <br> tag. <br> tag is used to
break line.
Example:

Code:
<html>
<head>
<title> Paragraph tags</title>
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>
Welcome to my webpage.Welcome to my webpage. Welcome to my
webpage.Welcome to my webpage. Welcome to my webpage.Welcome to my
webpage. <br>
Welcome to my webpage.Welcome to my webpage. Welcome to my
webpage.Welcome to my webpage.<br>
</p>
</body>
</html>

3
Output:

HTML Lines
a. Horizontal Lines
It helps us to create a horizontal line and used to divide the page into parts. The
tag for horizontal line is <hr> only. This is an empty tag. It does not take any additional
statements.
Example:
Code:
<html>
<head>
<title> Horizontal lines</title>
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>
Welcome to my webpage.Welcome to my webpage. Welcome to my
webpage.Welcome to my webpage. Welcome to my webpage. Welcome to my
webpage. <br> Welcome to my webpage.Welcome to my webpage. <br>
</p>
<hr>
<p>
Welcome to my webpage. Welcome to my webpage. Welcome to my
webpage.Welcome to my webpage. Welcome to my webpage. Welcome to my
webpage. <br> Welcome to my webpage.Welcome to my webpage. Welcome to my
webpage.Welcome to my webpage.<br>
</p>
<p>
Welcome to my webpage. Welcome to my webpage. Welcome to my
webpage.Welcome to my webpage. <br> Welcome to my webpage.Welcome to my
webpage. Welcome to my webpage.Welcome to my webpage.<br>
</p>
<hr>
</body>
</html>
Output:

4
b. Line Break - If you want a line break (new line) without starting a new paragraph,
then the <br/> tag is used.

Example:
Code:
We <br/> Can<br/>As<br/>One.
Output:
We
Can
As
One
HTML Text Formatting
c. Emphasis - It helps us to highlight the word or a sentence.
The tag for strong begins with <em> and ends with </em>.
Example:
Code:
This is my <em>web page. </em>
<em> This is my web page. </em>

Output:
This is my web page.
This is my web page.

d. Strong - It helps us to italicize the word or a sentence.

The tag for strong begins with <strong> and ends with </strong>.
Example:
Code:
This is my <strong>web page. </strong>
<strong> This is my web page </strong>.

Output:
This is my web page.
This is my web page.

e. Pre-formatted Text - The <pre> tag defines preformatted text. Text in a <pre> element
is displayed in a fixed-width font (usually Courier), and it preserves both spaces and
line breaks.
Example:
Code:
<pre>
WELCOME
MY WEB PAGE
</pre>

Output:
WELCOME

MY WEB PAGE

HTML Anchor

Hyperlinks connect Web pages, or data items, to one another. An anchor can
create a link from a part of a Web page to another site or page. To create a hyperlink in
HTML, you use an anchor <a> element.

Local Resource
<a href = “C:/….homepage.html”> Home page </a>

External Resource
To include a link to another site, the full address is specified using a URL.
<a href = “http://www……..com”> Another site </a>

5
 What’s More ?

Direction: Write an HTML code that will display your own webpage using your surname
entitled “Myself”. The content of webpage will display description about yourself at least
ten (10) sentences. Use paragrahs, lines, formatting text and anchor.

Code:

Output:

6
 What I Have Learned?

FILL IN THE BLANKS.

Direction: Fill in the correct word/s to process what you learned from the Week 4 lesson.

______________ 1. The tag for____________________ is <hr> only.

______________ 2.An _____________ can create a link from a part of a Web page to
another site or page.
______________ 3. Text in a _________________ element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks.

______________ 4. The tag for ______________ begins with <em> and ends with </em>.
______________ 5. _________________ highlight the word or a sentence.
______________ 6.If you want a line break or ______________ without starting a new
paragraph, then the <br> tag is used.
______________ 7.__________________ helps us to write paragraph form in your webpage.
______________ 8.The tag begins with <p> and ends with ________________.
______________ 9. To write on the next row, use ________________ tag.
______________ 10. <br> tag is used to _______________.

What I Can Do?

Direction: Write an HTML code that will display your own webpage using your surname
entitled “Surname_Website”. Use the different tags such as paragraph, lines, emphasis,
strong, anchor and pre-formatted text in the content of your web page.

Code: Output:

Rubrics:

Criteria Points Score

Content 20
Creativity 15
Time Management 15
Total Points 50

7
 Assessment
POST TEST
MULTIPLE CHOICE.
Direction: Choose the letter of the best answer. Write the chosen letter on the blank
provided before the number.

___ 1. Danica missed a tag to complete the pre-formatted text. What is it?
A. <br/> B. <em> C. <pre> D. <strong>
___ 2. What is a text in a <pre> element that displays in a fixed-width font (usually
Courier), and preserves both spaces and line breaks?
A. Anchor B. Emphasis C. Pre-formatted Text D. Strong
___ 3. Emerson needs to identify the HTML Lines. Which of the following tags does
not belong to the group of HTML Lines?
A. <br/> B. <hr> C. <pre> D. No answer
___ 4. The web page of group one needs to create a link from to another site or page.
What tag is needed?
A. <a href> B. <br/> C. <p> D. <strong>
___ 5. Which of the following tags is used to italicize or slant the word or a sentence?
A. <br/> B. <em> C. <pre> D. <strong>
___ 6. What tag do you use to create a hyperlink in HTML?
A. <a href> B. <em> C. <pre> D. <strong>
___ 7. What tag in HTML used to highlight the word or a sentence?
A. <br/> B. <em> C. <pre> D. <strong>
___ 8. What is the function of horizontal lines in HTML?
A. Divide the page into parts C. Italicize the word or sentence
B. Highlight the word or sentenceD. Link the page to another site
___ 9. Which of the following does not belong to the HTML Text Format?
A. <em> B. <h1> C. <strong> D. <pre>
___ 10. Which of the following tags use a new line without starting a new paragraph?
A. <br/> B. <em> C. <pre> D. <strong>
___ 11. Which of the following tags is used to break line.?
A. <br/> B. <em> C. <pre> D. <strong>
___ 12. Which of the following tags refers to pre-formatted text?
A. <br/> B. <em> C. <pre> D. <strong>
___ 13. What tag refers to writing paragraph form in your webpage?
A. <a href> B. <br/> C. <p> D. <strong>
___ 14. What are the other resources to be used in anchor tags?
A. External B. Label C. Internal D. Diminish
___ 15. Which of the following tags is an empty tag and does not take any additional
statements?
A. <br/> B. <em> C. <pre> D. <strong>