html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
. It discusses HTML tags for formatting text, headings, paragraphs, lines, and more. Activities at the end ask students to rearrange HTML tags into the proper structure and create a simple webpage displaying the DepEd vision statement.">
Scribd
Upload
522 views

11 Q1 Week3 No Answer

This document provides an HTML module for a Grade 11 programming class. It covers the basics of HTML, including key elements like <html>, <head>, <title>, and <body>. It discusses HTML tags for formatting text, headings, paragraphs, lines, and more. Activities at the end ask students to rearrange HTML tags into the proper structure and create a simple webpage displaying the DepEd vision statement.

Uploaded by

Antonio D. Montemayor
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
522 views

11 Q1 Week3 No Answer

This document provides an HTML module for a Grade 11 programming class. It covers the basics of HTML, including key elements like <html>, <head>, <title>, and <body>. It discusses HTML tags for formatting text, headings, paragraphs, lines, and more. Activities at the end ask students to rearrange HTML tags into the proper structure and create a simple webpage displaying the DepEd vision statement.

Uploaded by

Antonio D. Montemayor
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 65

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

• &nbsp; (non-breaking space) character

&nbsp; 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
&nbsp;
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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy