Grade 11 Com Prog Quarter 1 Week 3 Module 3

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
PROGRAMMING
.NET NCIII
Grade 11
Quarter 1 Week 3 Module 3
Learning Competency:
Design HTML5 document using Cascading
Style Sheet 3 (CSS3)
HTML Fundamentals and Basic tags
TLE_ICTP.NET 11-12PPHJCIIf-i-29
TY
ER
OP
PR
ILA
AN
M
PROGRAMMING.NETDivision of City Schools-Manila

O
SD
K-12 CURRICULUM
DEPARTMENT OF EDUCATION
Lesson 3
HTML Fundamentals
and Basic tags
EXPECTATIONS:
At the end of the period, learners should be able to:
LO1. Know what is HTML.

LO2. Know the critical elements of using HTML.
Key Terminologies
 HyperText is the method by which you move around on the web —

by clicking on special text called hyperlinks which bring you to the
next page. The fact that it is hyper just means it is not linear — i.e.
you can go to any place on the Internet whenever you want by
clicking on links — there is no set order to do things in.
 Markup is what HTML tags do to the text inside them. They mark
it as a certain type of text (italicised text, for example).
 HTML is a Language, as it has code-words and syntax like any

other language.
LEARNING OUTCOME 1:
Know what is HTML
PROGRAMMING.NET
K-12 CURRICULUM
A. Direction: Multiple Choice: Choose the letter of the correct answer.
1
___________ is a language that is used for website creation?
.
a. Hmtl d. Html
b. Hltm e. Htm
c. Hmlt
2
What is the paragraph tag?
.
a. <param> d. <paragraph>
b. <pr> e. <par>
c. 
3
What is the tag for next line?
.
a. <enter> d. 
b. e. <bl>
c. 
4 The sole purpose of ________ element is to encapsulate all the html code and
. describe the html document to the web browser.
a. <title> c <body>
b. <html> e. <header>
c. <head>
5
The superscript tag.
.
a. d. <superscript>
b. e. <script>
c. <super>
B. Direction: Group the given tags inside the box as for closing or opening tags
Opening tag Closing tag
 1.
1.
<html>
</title> 2.
2.
</body>
<head> 3.
3.

 4.
4.

</hr> 5.
5.

PROGRAMMING.NET
K-12 CURRICULUM
Brief Introduction
HTML FUNDAMENTALS
HTML is a computer l language devised to allow website creation. These

websites can then be viewed by anyone else connected to the Internet. It is
relatively easy to learn, with the basics being accessible to most people in
one sitting; and quite powerful in what it allows you to create. It is
constantly undergoing revision and evolution to meet the demands and
requirements of the growing Internet audience under the direction of the »
W3C, the organization charged with designing and maintaining the
language.
HTML was developed by Tim Berners-Lee.
The definition of HTML is HyperText Markup Language.
 HyperText is the method by which you move around on the web —

by clicking on special text called hyperlinks which bring you to the
next page. The fact that it is hyper just means it is not linear — i.e.
you can go to any place on the Internet whenever you want by
clicking on links — there is no set order to do things in.
 Markup is what HTML tags do to the text inside them. They mark
it as a certain type of text (italicized text, for example).
 HTML is a Language, as it has code-words and syntax like any

other language.
What do we need to create a webpage?
1. Notepad or Notepad++
2. Web Browser
How to save HTML documents?
1. Click file, then Save As.
PROGRAMMING.NET
K-12 CURRICULUM
2. Extension name must be: .htm or .html
HTML Elements
HTML elements exist on many levels. An element in HTML is a loose term

that describes each individual piece of your web page.
An element consists of three basic parts: an opening tag, the element's

content, and finally, a closing tag.
Example:
1. - opening paragraph tag
2. Element Content - paragraph words
3. - closing tag
Every (web)page requires four critical elements: the html, head, title, and
body elements.
NOTE: An HTML document must be save with an extension name .html

or .htm
The <html> Element
<html> begins and ends each and every web page. Its sole purpose is to
encapsulate all the HTML code and describe the HTML document to the web
browser. Remember to close your HTML documents with the corresponding
</html> tag at the bottom of the document.
The <head> Element
The <head> element is "next" as they say. As long as it falls somewhere

between your <html> tag and your web page content (<body>), you're golden.
The head functions "behind the scenes." Tags placed within the head
element are not directly displayed by web browsers.
PROGRAMMING.NET
K-12 CURRICULUM
Other elements used for scripting (JavaScript) and formatting (CSS) will
eventually be introduced and you will have to place them within your head
element. For now, your head element will continue to lay empty except for
the title element that will be introduced next.
The <title> Element
Place the <title> tag within the <head> element to title your page. The
words you write between the opening and closing <title></title> tags will be
displayed at the top of a viewer's browser.
The <body> Element

The <body> element is where all content is placed. (Paragraphs,
pictures, tables, etc). It will encapsulate all of your webpage's viewable
content.
Correct Use of Tags

We have "beginning" or "opening" tags (such as <HTML>) and we
have "ending" or "closing" tags (such as </HTML>). Many elements
consist of an opening tag and a closing tag. An element that has an
opening and closing tag is referred to as a container element because
anything contained between these tags are affected by the element.
HTML Format
Example:
<html>
<head><title></title></head>
<body>
<!—This is just a comment-->
</body>
</html>
 Header Tags
Headings are controlled by HEADER tags. HEADER tags are

logical tags and used extensively in HTML documents to display
headings. HEADER tags not only make your headings larger (or
PROGRAMMING.NET
K-12 CURRICULUM
smaller), they also bold the headings at the same time. There are only
six HEADER tags and they range from H1 to H6.
<H1>…</H1> produces the largest size heading and is called the

"level 1 heading".
<H6>…</H6> produces the smallest size heading and is called the

"level 6 heading".
 Tag
 tells your browser to go to the beginning of the next line.
BR stands for line BReak. acts in the same way as the ENTER
key on your keyboard.
 Tag
 for Paragraph tells your browser to insert a blank or empty
line and then begin a new line (a new paragraph). tells the
browser when a line has ended while tells the browser to leave a
blank line and begin a new paragraph.
Paragraph alignment: Syntax: … (where value is

a valid option)
Options for Value:
LEFT, RIGHT, CENTER, JUSTIFY
 (non-breaking space) character
is simply known as the space character
TEXT FORMATTING TAGS

… tag … tag
writes text as bold writes text in italics
Ex. This is bold Ex. This is italic
Output: This is bold Output: This is italic
… …
lifts text and makes it
lowers text and makes it smaller smaller
Ex. This
Ex.This issubscript
issuperscript
Output: This is subscript
Output: This is subscript
PROGRAMMING.NET
K-12 CURRICULUM
… tag <strike>…</strike>
writes underlined text strikes a line through the text
Ex. This is underline Ex. This
is<strike>strikethrough</strike>
Output: This is underline
Output: This is strikethrough
… …
usually makes text
italic usually makes text bold
Ex. access 
Output: access Ex.computer
Output: computer
 tag - The tag specifies the font face, font size, and
font color of text.
Attributes specific to this tag:
Attribute Description
Size Specifies the font

size.
Color Specifies the font

color.
Face Specifies the font

face.
Example: ACCESS
 <HR> tag
- Used to create horizontal line across the webpage.
Attributes: color, size, align
PROGRAMMING.NET
K-12 CURRICULUM
ACTIVITY 1.1:
Rearrange the following given html tags into standard basic structure
of HTML. Use the blank sheet below
<head> Output
</html>
<html>
Contents here
<title>
?
</head>
</body>
</title>
<body>
</head>
PROGRAMMING.NET
K-12 CURRICULUM
ACTIVITY 1.2:
Create a simple webpage that will display DepEd Vision. Write the
code below.
HTML stands for Hypertext Markup Language. It is a language used

to create a webpage. It is a markup simply because it marks a certain type
of text like bold, italize and underline. In creating a webpage, it follows the
basic structure in HTML.
PROGRAMMING.NET
K-12 CURRICULUM
CHECKING YOUR UNDERSTANDING
Based from the lesson above can you explain how use the html to
create a webpage and give an example. Used the space below.
PROGRAMMING.NET
K-12 CURRICULUM
Direction: Multiple Choice: Choose the letter of the correct answer.
1
___________ is a language that is used for website creation?
.
a. HMTL d. HTML
b. HLTM e. HTM
c. HMLT
2 What is the paragraph tag?

.
a. <param> d. <paragraph>
b. <pr> e. <par>
c. 
3
What is the tag for next line?
.
a. <enter> d. 
b. e. <bl>
c. 
4 The sole purpose of ________ element is to encapsulate all the html code and
. describe the html document to the web browser.
a. <title> c <body>
b. <html> e. <header>
c. <head>
5
The superscript tag.
.
a. d. <superscript>
b. e. <script>
c. <super>
LEARNING OUTCOME 2:
PROGRAMMING.NET
K-12 CURRICULUM
Know the critical elements of using html
Direction: Choose the correct answer.

1. The element which functions "behind the scenes."
<title> d <body>
a.
b <html> e <header>
c. <head>
2. <li> means __________.
a. List Item d Link intersect
b Listing internal e None of the above
c. Link Interface
3. The tag used to create bullets.
a. <ot> d 
b <ol> e None of the above
c. <ul>
4. The tag used for creating numbered list.
a. <nl> d <li>
b <ul> e <numlist>
c. <ol>
5. The <dl> tag means.
a. Data list d Data link
b Data listing e None of the above
c. Definition list
CREATING BULLETS AND NUMBERS
Lists are often used to present information in an easy to read fashion.

Lists can also be used to indent information. Lists can be bulleted,
numbered or printed without bullets and numbers. It should also be noted
that in any type of list, you can still use the line break and paragraph tags
and the normal text markup tags to emphasize text, etc.
Three types of lists:
PROGRAMMING.NET
K-12 CURRICULUM
 UNORDERED LISTS (uses bullets)
Example:
<ul>
<li>Rhaymond
<li>Sachi
<li>Reynaldo
</ul>
 ORDERED LISTS (uses numbers)
Example:
<ol>
<li>red
<li>green
<li>blue
</ol>
 DEFINITION LISTS (no numbers or bullets).
Example:
<dl> (Definition List)
<dt>Coffee</dt> (Definition Term)

<dd>Black hot drink</dd> (Definition Description)
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
The Type Attribute:
Unordered List Example:

<ul type=”value”>
<li>Rhaymond
<li>Sachi
<li>Reynaldo
</ul>
Possible value: Circle, Square, Disc
Ordered List Example:

<ol type=”value”>
<li>Rhaymond
<li>Sachi
<li>Reynaldo
</ol>
PROGRAMMING.NET
K-12 CURRICULUM
Possible value: 1,A ,a, i, I
The Start Attribute: (Applicable to Ordered List Only)

<ol start=”3”>
<li>Rhaymond
<li>Sachi
<li>Reynaldo
</ol>
Possible Output:
3. Rhaymond
4. Sachi
5. Reynaldo
ACTIVITY 2.1:
Think of 10 names of your friend then display it using the numbered

and bulleted lists below. Show the complete HTML tags.
PROGRAMMING.NET
K-12 CURRICULUM
HTML offers web authors three ways for specifying lists of
information. All lists must contain one or more list elements. Lists may
contain −
 <ul> − An unordered list. This will list items using plain bullets.
 <ol> − An ordered list. This will use different schemes of numbers to
list your items.
 <dl> − A definition list. This arranges your items in the same way as
they are arranged in a dictionary.
1. The tag used for creating bulleted list.

a. <bl> D <dl>
b. <ul> e None of the above
c. <ol>
2. The underline tag.

a. <underline> D 
b. <uline> e None of the above
c. <ul>
3. The tag used for creating numbered list.
a. <nl> D <li>
b. <ul> e <numlist>
c. <ol>
4. The code for creating spaces.
a. &nbps d &npsb;
b. Nbps; e
c. Nsbp
5. The tag for formatting text.
a. <text> d <textformat>
b. <format> e None of the above
c. 
PROGRAMMING.NET
K-12 CURRICULUM
Answer Key:
PROGRAMMING.NET
K-12 CURRICULUM
PRE-TEST LO 1
A.
1. D
2. C
3. B
4. B
5. A
B.
Opening tag Closing tag
1.<html> 1. 
2. <head> 2. </title>
3. 3.
4. 4.<./body>
5. 5. </hr>
ACTIVITIY 1.1
</html>
<head>
<title>
?
</title>
</head>
<body>
Contents here
</body>
<html>
PROGRAMMING.NET
K-12 CURRICULUM
ACTIVITY 1.2
<html>
<head>
<title>Deped Vision</title>
</head>
<body>
THE DEPED VISION 

We dream of Filipinos 
who passionately love their country 
and whose values and competencies 
enable them to realize their full potential 
and contribute meaningfully to building the
nation. 
As a learner-centered public institution, 

the Department of Education 
continuously improves itself 
to better serve its stakeholders. 
</body>
</html>
CHECKING YOUR UNDERSTANDING
HTML stands for hypertext markup language. It is used to create

webpages. The HTML follows the basic structure to create a webpage.
POST-TEST LO1
1. D
2. C
3. B
4. B
5. A
PRE-TEST LO 2
1. B
2. A
3. C
4. C
5. C
ACTIVITY 2.1
PROGRAMMING.NET
K-12 CURRICULUM
The teacher will check the answer.
POST-TEST LO 2
1. B
2. D
3. C
4. E
5. C
References:
https://www.w3schools.com/
Acknowledgements
Writer: Rhaymond M. Monterde- MT I/ICT Computer Programming
Editors: Ariel Tosio- EPS, Elena C. Reyes- Principal IV, Gibson J.

Olazo– MT II/ICT Computer Programming Coordinator
Reviewer: Gibson J. Olazo– MT II/ICT Computer Programming

Coordinator, Ariel Tosio- EPS
Management Team: Maria Magdalena M. Lim-Schools Division

Superintendent-Manila, Aida H. Rondilla-Chief Education Supervisor
Lucky S. Carpio-EPS and Lady Hannah C Gillo, Librarian II-LRMS
PROGRAMMING.NET
K-12 CURRICULUM

Grade 11 Com Prog Quarter 1 Week 3 Module 3

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Grade 11 Com Prog Quarter 1 Week 3 Module 3

Uploaded by

Copyright:

Available Formats

Republic of the Philippines

PROGRAMMING.NETDivision of City Schools-Manila

At the end of the period, learners should be able to:

LO1. Know what is HTML.

 HyperText is the method by which you move around on the web —

 HTML is a Language, as it has code-words and syntax like any

Know what is HTML

HTML is a computer l language devised to allow website creation. These

HTML was developed by Tim Berners-Lee.

The definition of HTML is HyperText Markup Language.

 HyperText is the method by which you move around on the web —

 HTML is a Language, as it has code-words and syntax like any

What do we need to create a webpage?

How to save HTML documents?

1. Click file, then Save As.

HTML elements exist on many levels. An element in HTML is a loose term

An element consists of three basic parts: an opening tag, the element's

1. <p> - opening paragraph tag

2. Element Content - paragraph words

3. </p> - closing tag

NOTE: An HTML document must be save with an extension name .html

The <html> Element

The <head> Element

The <head> element is "next" as they say. As long as it falls somewhere

The <title> Element

The <body> Element

Correct Use of Tags

Headings are controlled by HEADER tags. HEADER tags are

<H1>…</H1> produces the largest size heading and is called the

<H6>…</H6> produces the smallest size heading and is called the

Paragraph alignment: Syntax: <P align=value>…</P> (where value is

Options for Value:

LEFT, RIGHT, CENTER, JUSTIFY

 &nbsp; (non-breaking space) character

&nbsp; is simply known as the space character

TEXT FORMATTING TAGS

Attributes specific to this tag:

Size Specifies the font

Color Specifies the font

Face Specifies the font

Example: <font face=”book man old style” color=”red”

- Used to create horizontal line across the webpage.

Attributes: color, size, align

HTML stands for Hypertext Markup Language. It is a language used

2 What is the paragraph tag?

Direction: Choose the correct answer.

CREATING BULLETS AND NUMBERS

Lists are often used to present information in an easy to read fashion.

Three types of lists:

 ORDERED LISTS (uses numbers)

 DEFINITION LISTS (no numbers or bullets).

<dt>Coffee</dt> (Definition Term)

The Type Attribute:

Unordered List Example:

Possible value: Circle, Square, Disc

Ordered List Example:

The Start Attribute: (Applicable to Ordered List Only)

Think of 10 names of your friend then display it using the numbered

1. The tag used for creating bulleted list.

2. The underline tag.

Opening tag Closing tag

THE DEPED VISION<br>

 (non-breaking space) character

is simply known as the space character