Republic of the Philippines
Department of Education
BINAN CITY SENIOR HIGH SCHOOL
DIVISION OF BINAN
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
0
K TO 12 BASIC EDUCATION CURRICULUM JUNIOR HIGH SCHOOL
TECHNICAL LIVELIHOOD EDUCATION AND SENIOR HIGH SCHOOL -
TECHNICAL-VOCATIONAL-LIVELIHOOD TRACK INFORMATION AND
COMMUNICATIONS TECHNOLOGY–PROGRAMMING (.NET TECHNOLOGY)
NC III
(1st Semester)
1
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
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
Hmlt
2
. What is the paragraph tag?
a.
<param>
d.
<paragraph>
b.
<pr>
e.
<par>
<p>
3
. What is the tag for next line?
a.
<enter>
d.
</br>
b.
<br>
e.
<bl>
<b>
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>
<head>
5
. The superscript tag.
a.
<sup>
d.
<superscript>
b.
<sub>
e.
<script>
<super>
B. Direction: Group the given tags inside the box as for closing or opening tags
Opening tag
Closing tag
</p>
1.
1.
<html>
</title>
2.
2.
</body>
<head>
3.
3.
<p>
<b>
4.
4.
</i>
</hr>
5.
5.
<font>
3
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. X
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?
Notepad or Notepad++
Web Browser
How to save HTML documents?
1. Click file, then Save As.
4
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:
<p> - opening paragraph tag
Element Content - paragraph words
</p> - 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.
5
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
6
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".
• <BR>Tag
<BR> tells your browser to go to the beginning of the next line. BR stands
for line BReak. <BR> acts in the same way as the ENTER key on your
keyboard.
• <P>Tag
<P> for Paragraph tells your browser to insert a blank or empty line and
then begin a new line (a new paragraph). <BR> tells the browser when a line
has ended while <P> tells the browser to leave a blank line and begin a new
paragraph.
Paragraph alignment: Syntax: <P align=value>…</P> (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
<b>…</b> tag
<i>…</i> tag
writes text as bold
writes text in italics
Ex. <b>This is bold</b>
Ex. <i>This is italic</i>
Output: This is bold
Output: This is italic
<sub>…</sub>
<sup>…</sup>
lowers text and makes it smaller
lifts text and makes it
smaller
Ex.This
Ex. This
is<sup>superscript</sup>
is<sub>subscript</sub>
subscript
Output: This is
Output: This is subscript
7
<u>…</u> tag
<strike>…</strike>
writes underlined text
strikes a line through the text
Ex. <u>This is underline</u>
Ex. This
Output: This is underline
is<strike>strikethrough</strike>
Output: This is strikethrough
<strong>…</strong>
<em>…</em>
usually makes text
usually makes text bold
italic
Ex. <em> access </em>
Output: access
Ex.<strong>computer</strong>
•<font> tag - The <font> 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:
<font
face=”book
man
old
style”
color=”red”
size=”10”>ACCESS</font>
• <HR> tag
Used to create horizontal line across the webpage. Attributes: color, size,
align
8
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>
9
ACTIVITY 1.2:
Create a simple webpage that will display DepEd Vision. Write the code
below.
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.
10
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.
11
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
HMLT
2 What is the paragraph tag?
.
a.
<param>
d.
<paragraph>
b.
<pr>
e.
<par>
<p>
3
. What is the tag for next line?
a.
<enter>
d.
</br>
b.
<br>
e.
<bl>
<b>
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>
<head>
5
. The superscript tag.
a.
<sup>
d.
<superscript>
b.
<sub>
e.
<script>
<super>
12
LEARNING OUTCOME 2:
Know the critical elements of using html
Direction: Choose the correct answer.
1. The element which functions "behind the scenes."
a.
<title>
d
<body>
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
<u>
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.
13
Three types of lists:
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
14
</ol>
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:
Rhaymond
Sachi
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.
15
offers web authors three ways for specifying lists of All lists must contain one or more
list elements. Lists may
contain −
• <ul> −
An unordered list. This will list it
• <ol> −
An ordered list. This will use diff
list your items.
• <dl> − A definition list. This arrangesas
you
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>
The underline tag.
a.
<underline>
D
<u>
b.
<uline>
e
None of the above
c. <ul>
The tag used for creating numbered list.
a.
<nl>
D
<li>
b.
<ul>
e
<numlist>
c. <ol>
The code for creating spaces.
a.
&nbps
d
&npsb;
b.
Nbps;
e
c. Nsbp
The tag for formatting text.
a.
<text>
d
<textformat>
b.
<format>
e
None of the above
<font>
16
17
References:
https://www.w3schools.com/X
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
18
Answer Key:
PRE-TEST LO 1
A.
B
B
A
B.
Opening tag
Closing tag
1.<html>
1.
</p>
2.
<head>
2.
</title>
3.
<p>
3.</i>
4.<b>
4.<./body>
5.
<font>
5.
</hr>
ACTIVITIY 1.1
</html>
<head>
<title>
?
</title>
</head>
<body>
Contents here
</body>
<html>
19
ACTIVITY 1.2
<html>
<head>
<title>Deped Vision</title> </head>
<body>
THE DEPED VISION<br> We dream of Filipinos<br>
who passionately love their country<br> and whose values and
competencies<br>
enable them to realize their full potential<br> and contribute meaningfully
to building the nation.<br><br>
As a learner-centered public institution,<br> the Department of Education<br>
continuously improves itself<br>
to better serve its stakeholders.<br>
</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
C
B
PRE-TEST LO 2
B
A
C
C
20
ACTIVITY 2.1
The teacher will check the answer.
POST-TEST LO 2
B
D
C
21
