11 National Capital Region

Department of Education
SCHOOLS DIVISION OFFICE
MARIKINA CITY
TVL -Information and Communication
Technology

PROGRAMMING
(.Net Programming)
First Quarter-Module 3
HTML5 Fundamentals

Writer: Rosalinda S. Endaya

Cover:
Illustrator:

City of Good
DISCIPLINE • GOOD TASTE • EXCELLENCE
Character
Information and Communication Technology Java Programming
Quarter 1 - Module 3: HTML Fundamentals
First Edition, 2021

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 royalty.
Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand
names, trademarks, etc.) included in this book 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.
Content Standard
The learners demonstrate an understanding of the principles and
concepts in performing programming in HTML5 with JavaScript and CSS3.
Performance Standard
The learners independently demonstrate the programming in HTML5
with JavaScript and CSS3

Learning Competencies
Develop basic HTML document using HTMP5
Objectives:
1. define HTML;
2. identify the elements of HTML;
3. describe each elements of HTML;
4. analyze the syntax for a standard HTML tag;
5. create, save and edit a simple HTML file.

2
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
 Below is an example of interface of a web browser.
Label and identify at least 5 parts of this web browser.

https://www.bleepingcomputer.com/virus-removal/remove-browser-health-
info-chrome-extension

Lesson 3 HTML Fundamentals

HTML5 is the most up-to-date and upgraded HTML version.

HTML is not a programming language, technically speaking, but a
markup language. In this module, the features of HTML5 are discussed
and how they can be used in practice.

What is HTML?

• Is a popular computer language that is used to create web page.

• It is a coding system used to create a web pages.

3
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
 • It consists of markup that conveys information about the
structure.
• It provides instructions to the Web browser on how documents
should appear.
• In 1990, Tim Berners-Lee first developed HTML. The web's father
is also known.
• In 1996, it was authorized to maintain HTML specifications in the
World Wide Web Consortium (W3C).
• In 2000, HTML also became an ISO standard. HTML5 is HTML's
latest release.
• HTML5 offers a faster and stronger web development approach.

HTML VERSIONS

1. HTML 1.0 (1989 - 1994)

• The first version of HTML that supported inline images and text
controls. HTML 1.0 was very limited in terms of styling and
presentation of content. In HTML 1.0, for example, you could not:
• use tables or frames,
• specify fonts,
• change page background, or
• use forms
2. HTML 2.0 (1995)
• This specification supported more browsers. HTML 2.0 was
considerably improved to support: It also supported:
• forms with limited set of form elements such as text boxes,
and option buttons
• change of page background
• use of tables
3. HTML 3.20 (1997)
This version included support for creating tables and expanded options
for form elements. This version also allowed web pages to include
complex mathematical equations.
4. HTML 4.01 (1999)
This version added support for style sheets and scripting ability for
multimedia elements. HTML 4.01 focused on separating presentation
styling information from the actual content using style sheets.
5. HTML 5 (2014)
The update has introduced many new features to the language.
• One of the most anticipated features of HTML5 is native support
for audio and video embedding.
• Instead of using Flash player, we can simply embed videos and
audio files to our web pages using the new <audio></audio> and
<video></video> tags.

4
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
 • It also includes in-built support for scalable vector graphics
(SVG) and MathML for mathematical and scientific formulas.

Methods in Writing HTML Pages”

1. Using a Text Editor Program
2. Using a What-You-See-Is-What-You-Get (WYSIWYG) HTML
Editors
a. Visual Studio Code
b. Dreamweaver
c. FrontPage Design

APPLICATION NEEDED in Creating a Webpage using HTML

1. Text Editor or the HTML Editor
 A text editor is a program that will allow you to edit plain text
files
 Example
 Notepad
 WordPad
 Microsoft Word
2. Web Browser
• A web browser is a software application which enables a user to
display and interact with text, images, videos, music and other
information typically located on a Web page at a website on the
World Wide Web
Example
o Internet Explorer
o Mozilla Firefox
o Apple Safari
o Konqueror
o Opera
o OmniWeb

HTML document structure

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>

</body>
</html>

5
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
 1. <!DOCTYPE html> - It is a required preamble. In the mists of time,
when HTML was young (around 1991/92), doctypes were meant to act
as links to a set of rules that the HTML page had to follow to be
considered good HTML, which could mean automatic error checking
and other useful things. However, they do not do much these days and
are just necessary in principle to ensure the correct conduct of your
document. For now, this is everything you need to know.
2. <html></html> — the <html> element. This element wraps all the
content on the entire page and is sometimes known as the root element.
3. <head></head> — the <head> element. This element acts as a
container for all the stuff you want to include on the HTML page that is
not the content you are showing to your page's viewers. This includes
things like keywords and a page description that you want to appear in
search results, CSS to style our content, character set declarations, and
more.
4. <meta charset="utf-8"> — This element sets the character set your
document should use to UTF-8 which includes most characters from
most written languages. Essentially, it can now handle any textual
content you might put on it. There is no reason not to set this and it
can help avoid some problems later.
5. <title></title> — the <title> element. This sets the title of your page,
which is the title that appears in the browser tab the page is loaded in.
It is also used to describe the page when you bookmark/favorite it.
6. <body></body> — the <body> element. This contains all the content
that you want to show to web users when they visit your page, whether
that's text, images, videos, games, playable audio tracks, or whatever
else.

Remember:

• HTML tags are not case-sensitive.

• Words enclosed in an angle brackets, < >, are the codes or tags
• Tags always come in pairs. The second pairs has a slash (/) before the
tag inside the bracket.
• The slash means “stop”
• The tag with a slash is called the CLOSING TAG, while the one without
a slash is called the OPENING TAG.
• The tag <html> and </html> must be placed at the start and end of
every document.
• What you type in between the <body> and </body> tag are the content
that will appear on the Web page.
• The text in between the <title> and </title> tag will appear on the title
bar of a web browser.

6
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
A. To start making your own Web Page

1. Open a new file in Notepad or a Notepad++

2. Type an HTML document structure.
3. After <BODY>tag type your complete name.
4. Save your work.

B. How to save

1. Click File, then Save As or Save.

2. Save As dialog box will appear.
3. Create your own folder.
4. In the Filename box, type the file name
*Take note, use .html as an extension file
5. Finally, click save.

The .html extension indicates that the file is a web page and not
an ordinary text file. Meaning it is a web file.

C. To view your HTML document in Web Browser

1. Explore where you save your file.
2. Check if the icon of your file is in the state of a Web Browser.
Meaning, as you save your file, you indicate a .html as an
extension. But, if your file icon is in a Notepad++ icon, meaning
you have not saved exactly what is supposedly the proper way of
saving the file.
3. Then, double click the file. Double click means to open the file.

Does your name appear in your Web Browser? ______

7
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
D. To edit your page

There are two (2) ways on how to edit your file.

A. In your Notepad++ Application

1. Open your Notepad++ Application.

2. Go to File menu, then choose Open.

3. As you click Open, the Open dialog box will appear.

4. Locate or browse where you save your file.

8
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
 5. Finally, double click the file.
B. Windows Explorer
1. Explore where you save your file.

2. Right click the web page you want to edit.

3. Point to Open with….. choose Notepad++

4. If notepad is not one of the applications...

5. Click on Choose another app, then locate where you save the
Notepad++ application.
9
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
 Remember:
✓ Always save or press ctrl + S, every time you made changes in
your page.
✓ Use Alt+Tab, to switch from Editor to Web Browser
✓ In your text editor (Input), this is where you code everything you
want to happen in your Web Browser (Output)
✓ The Web Browser will view your output you made in your Text
Editor.
✓ Press F5 in your web browser to refresh the changes you made.

Hands-on the paper Activity: “Me, Myself and I”

Instructions:
3. On the space provided below, write a simple webpage about yourself.
4. Write the HTML document structure.
5. “Me, Myself and I” will appear on the title bar of a web browser.
6. In your <body> tag, write something about yourself in no less than
10 sentences.
7. What do you think will be the FILENAME of this Activity as you save
in a computer? _________________________

Please be guided with the given rubrics and sample computation. Write your answer
in your notebook/on a separate sheet or use any application tool.

Hands-on the paper Activity: “Me, Myself and I”

Criteria 4 3 2 1

Accuracy All information Almost all the Almost all of the There are several
provided by the information provided information provided by inaccuracies in
X9 student on the Web by the student on the the student on the Web the content
site is accurate and Web site is accurate site is accurate and provided by the
all the and all requirements almost all of the students OR many
requirements of the of the assignment requirements have been of the
assignment have have been met. met. requirements were
been met. not met.

Organization Extremely well Organized. Structure Somewhat organized Poorly organized.

organized. allows reader to move structure allows reader A clear sense of
X6 through content to move through some direction is not
Order & structure
without confusion. of the content without evident. Flow is
of information is
Flows smoothly confusion. Flow is frequently
compelling and
sometimes interrupted. interrupted.
flows smoothly

10
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
 Fair Use Fair use guidelines Fair use guidelines Sometimes fair use Fair use
Guidelines are followed with are frequently guidelines are followed, guidelines are not
proper use of followed, and most and some non-original followed. Non
X6 citations non original material material uses proper original material is
throughout the uses proper citations. citations. improperly cited.
Web page.

Ideas Insightful and well Ideas Ideas are somewhat on Ideas are unclear
considered ideas are considered; more topic; makes some
X4 making multiple than one thoughtful connections
connections connection is made

Sample Computation
Content 9 x 4 = 36
Ideas 6 x 4 = 24
Creativity 6 x 4 = 24
Organization 4 x 4 = 16
TOTAL 100

Reflection:
In your Buddy-Buddy notebook or on a separate sheet, make a
reflection paper on how to apply some of the theories discussed in this
lesson.

Answer the following crossword puzzle. Write your answer on the

desired box.

11
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
I. TRUE OR FALSE: For items 1-5, identify what stage of the Web
Development Cycle is being referred in the given statement.

1. HTML is a popular computer language that is used to create web

page.
2. In 1980, Tim Berner-Lee first developed HTML. The web's father
is also known.
3. The first version of HTML that supported inline images and text
controls.
4. HTML 4.01 focused on separating presentation styling
information from the actual content using style sheets.
5. The slash means “stop”.

II. Enumeration: Write your answer on the space provided

Application needed in creating webpage using HTML

Sample Web Browser

III. Write the HTML document structure.

12
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
Book

D Whiz
In Web Designing Using HTML and CSS
Rist Edition 2014
Rext Book Store

Online Source

ScriptingMaster
©2021 Techna Center
http://www.scriptingmaster.com/index.asp

MDN Web Docs

© 2005-2021 Mozilla and individual contributors
https://developer.mozilla.org//

13
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE
 Development Team of the Module

Writer : Rosalinda S. Endaya (SHS, SNNHS)

Validators : Imelda D. Zapanta (SHS, JDPNHS)
Carlo A. Rizare (SHS, SRNHS)
Editor : Uriel B. Teodoro (School Head, SNNHS)
: Lionel Villon (KNHS)
Internal Validator : Joseph T. Santos, (EPS - EPP/TLE)
Illustrator : Maricel M. Fajardo (FHS)

Management Team:

Sheryll T. Gayola
Assistant Schools Division Superintendent
OIC, Office of the Schools Division Superintendent

Elisa O. Cerveza
Chief, CID
OIC, Office of the Assistant Schools Division
Superintendent

Joseph T. Santos
Education Program Supervisor - EPP/TLE

Ivy Coney A. Gamatero

EPS – Learning Resource Management and Development System

For inquiries or feedback, please write or call:

Schools Division Office – Marikina City
191 Shoe Ave., Sta. Elena, Marikina City,
1800, Philippines
Telefax: (02) 8682-2472 / 8682-3989
Email Address: sdo.marikina@deped.gov.ph

14
City of Good Character
DISCIPLINE • GOOD TASTE • EXCELLENCE