lOMoARcPSD|19605557

Module 1 - Introduction to HTML

Introduction to Web Development (Leyte National High School)

Studocu is not sponsored or endorsed by any college or university

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)
 lOMoARcPSD|19605557

SENIOR HIGH SCHOOL

Technical-
Vocational
Livelihood
Information and
Communication Technology
(ICT)
Quarter 1 – Module 1:
Introduction to
Hypertext Markup Language 5
(HMTL 5)

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Programming (.Net) – Grade 12

Alternative Delivery Mode
1st Sem. Midterm Module I: Introduction to Hypertext Markup Language 5 (HTML 5)

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.

Development Team of the Module

Writers: Chere B. Velasquez

Editors: Jose Garry R. Napoles
Reviewers: Analorgie Destacamento
Illustrator: Maribell J. Fuentes
Layout Artist: Maribell J. Fuentes
Management Team:
Schools Division Superintendent : Marilyn S. Andales
Assistant Schools Div. Superintendent : Leah B. Apao
Chief Educator Supervisor, CID : Mary Ann Flores
Education Program Supervisor, LRMDS : Isaiash T. Wagas
Education Program Supervisor, TLE/TVL : Jose Garry R. Napoles

Department of Education – Regional Office 7

Deped – Division of Cebu Province

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Office Address: IPHO Bdg. Sudlon, Lahug, Cebu City

Telephone Nos. : (032) 520-3216/ 520-3217; SDS Office (032) 255-6405;
ASDS Apao: (032) 236-4628
E-mail Address : cebu.province@deped.gov.ph

12

Technical-
Vocational
Livelihood
Information and
Communication Technology
(ICT)
Quarter 1 – Module 1:
Introduction to
Hypertext Markup Language
(HMTL) 5

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Key Message

For Educators:

Learning is a constant process. Amidst inevitable circumstances, Department of

Education extends their resources and looks for varied ways to cater your needs and to
adapt to the new system of Education as a fortress of Learning Continuity Plan. One of the
probable solutions is the use of Teacher-made Educational Modules in teaching.

You are reading the TVL ICT Programming .Net Technology - Grade 12: First
Semester Midterm Period an Alternative Delivery Mode (ADM) Module on “Introduction
to Hypertext Markup Language 5 (HTML 5)” as written and found in the K-12 Most
Essential Learning Competencies as well in the Curriculum Guide of TVL ICT
Programming (.Net Technology) NC III.

The creation of this module is a combined effort of competent educators from

different levels and various schools of Department of Education-Cebu Province. In addition,
this module is meticulously planned, organized, checked and verified by knowledgeable
educators to assist you in imparting the lessons to the learners while considering the
physical, social and economic restraints in teaching process.

The use of Teacher-made Educational Module aims to surpass the challenges of

teaching in a new normal education set-up. Through this module, the students are given
independent learning activities, which embodies in the Most Essential Learning
Competencies based from the K-12 Curriculum Competencies, to work on in accordance to
their capability, efficiency and time. Thus, helping the learners acquire the prerequisite 21 st
Century skills needed with emphasis on utmost effort in considering the whole well-being of
the learners.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher!

4
This part of the module gives you helpful tips, suggestions
or strategies that will make the learning process easy and
efficient to the learners.
Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)
 lOMoARcPSD|19605557

As the main source of learning, it is your top priority to explain clearly on how to use
this module to the learners. While using this module, learner’s progress and development
should be recorded verbatim to assess their strengths and weaknesses while doing the
activities presented independently in safety of their homes. Moreover, you are anticipated to
persuade learners to comply and to finish the modules on or before the scheduled time.

For the Learners:

As a significant stakeholder of learning, Department of Education researched and

explored on innovative ways to address your needs with high consideration on social,
economic, physical and emotional aspects of your well-being. To continue the learning
process, DepEd comes up with an Alternative Delivery mode of teaching using Teacher-
Made Educational Modules.

You are reading the TVL ICT Programming .Net Technology - Grade 12: First
Semester Midterm Period an Alternative Delivery Mode (ADM) Module on “Introduction
to Hypertext Markup Language” as written and found in the K-12 Most Essential
Learning Competencies as well in the Curriculum Guide of TVL ICT Programming
(.Net Technology) NC III.

This module is especially crafted for you to grasp the opportunity to continue learning
even at home. Using guided and independent learning activities, rest assured that you will
be able to take pleasure as well as to deeply understand the contents of the lesson
presented; recognizing your own capacity and capability in acquiring knowledge.

This module has the following parts and corresponding icons:

The first part of the module will keep you on

tract on the Competencies, Objectives and
WHAT I NEED TO KNOW Skills expected for you to be developed and
mastered.

This part aims to check your prior

WHAT I KNOW knowledge on the lesson to take.

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

This part helps you link the previous lesson

WHAT’S IN to the current one through a short content
and an exercise/drill.

The lesson to be partaken is introduced in

this part of the module creatively. It may be
  WHAT’S NEW a picture identifier, crossword puzzle, and
writing tags or codes.

  A brief discussion of the lesson can be read

WHAT IS IT in this part. It guides and helps you unlock
the lesson presented.

A comprehensive activity/ies for

WHAT’S MORE independent practice is in this part to
solidify your knowledge and skills of the
given topic.
This part of the module is used to process
  WHAT I HAVE LEARNEDyour learning and understanding on the  
given topic.
WHAT I NEED TO KNOW
A transfer of newly acquired knowledge and
WHAT I CAN DO skills to a real-life situation is present in this
part of the module.

 
ASSESSMENT This activity assesses your level of mastery
towards the topic.WHAT I KNOW

In this section, enhancement activities will

ADDITIONAL ACTIVITIES be given for you to further grasp the
lessons.

This contains answers to all activities in the

ANSWER KEYS module.

 
WHAT’S
At the end of this module IN
you will also find:

References Printed in this part is a list of all reliable and valid

resources used in crafting and designing this module.

In using this module, keep note of the fundamental reminders below.

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

1. The module is government owned. Handle it with care. Unnecessary marks are
prohibited. Use a separate sheet of paper in answering all the given exercises.
2. This module is organized according to the level of understanding. Skipping one part of
this module may lead you to confusion and misinterpretation.
3. The instructions are carefully laden for you to understand the given lessons. Read each
item cautiously.
4. This is a Home-Based class, your reliability and honor in doing the tasks and checking
your answers are a must.
5. This module helps you attain and learn lessons at home. Make sure to clearly
comprehend the first activity before proceeding to the next one.
6. This module should be returned in good condition to your teacher/facilitator once you
completed it.
7. Answers should be written on a separate sheet of paper or notebook especially
prepared for English subject.

If you wish to talk to your teacher/educator, do not hesitate to keep in touch with
him/her for further discussion. Know that even if this is a home-based class, your teacher is
only a call away. Good communication between the teacher and the student is our priority to
flourish your understanding on the given lessons.

We do hope that in using this material, you will gain ample knowledge and skills for
you to be fully equipped and ready to answer the demands of the globally competitive world.
We are confident in you! Keep soaring high! Happy reading

WHAT I NEED TO KNOW

Good day dear learner!

This module is solely prepared for you to access and to acquire

lessons befitted in your grade level. The exercises, drills and assessments are carefully
made to suit your level of understanding. Indeed, this learning resource is for you to
fully comprehend the Introduction to Hypertext Markup Language 5 (HTML5).
Independently, you are going to go through this module following its proper sequence.
Although you are going to do it alone, this is a guided lesson and instructions/directions on
how to do every activity is plotted for your convenience.

Using this learning resource, you are ought to Develop basic HTML document
using HTML 5 and CSS 3 syntax as inculcated in the K-12 Most Essential Learning
Competencies and in the Curriculum Guide of TVL ICT Programming (.Net
Technology) NC III.

Using separate modules, this competency is divided into four lessons, as follows:
Lesson 1: Introduction to Hypertext Markup Language 5 (HTML5)
Lesson 2: HTML5 creating document, layout design and user interface
Lesson 3: Introduction to Cascading Styling Sheets (CSS)
Lesson 4: Advance CSS 3 integration

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

At the end of this module, you are expected to achieve the following objectives for
this session:
 Identify the elements and syntax in a basic HTML document;
 Design and create HTML document
 Integrate fonts, color and graphics into HTML document
 Appreciate the importance of HTML in the development of web pages

WHAT I KNOW

PRE-TEST
TEST I. Direction: Students kindly, identify properly the parts of a notepad as tool in editing a
web page by writing your answer on the space provided after Figure 1.

2 1

4 Figure 1. Notepad Window

1. _______________________________
2. _______________________________
3. _______________________________
4. _______________________________

5
Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)
 lOMoARcPSD|19605557

5. _______________________________

TEST II. Direction: Students in figure 2 it illustrates an example of how a tag is used and its
parts. Kindly identify it parts by labelling properly on the figure below.
Structure of a Tag
1.

3.

2.
4.

Figure 2.

TEST III. Direction: Choose the best answer and write the letter of your choice on the space
provided before each number.

________1. What is HTML?

A. Hyper text Mark up Language
B. Hypertext Message Language
C. Hypertext Markup Language
D. Hypetext Mark-up Language

________2. Which features of an HTML 5 is false?

A. New semantic elements and attributes.
B. It supports audio and video controls with the use of <audio> and <video>
tags.
C. It works with all old browsers.
D. New element for web structure like nav, header, footer etc.
________3. What is a DocType?
A. It is document inside a web page.
B. It is a document declaration that helps the browser to display webpage
correctly.
C. It is a HTML tag.
D. It an introductory statement to identify that it is an HTML 5 document.
________4. What is a Metadata?
A. A metadata is an information or data about data.
B. A metadata cannot be used to display or reload page and keywords
C. A metadata provides additional information about it’s attributes
D. A metadata is place on the body part and will not be displayed.
________5. HTML has three principal markup components
A. Tag, Elements, Data
B. Values, Elements, Structure
C. Elements, Attributes, Values
D. Tag, Elements, Attributes
________6. In the figure 3 below, identify the part of a structure tag that is being
indicated in an arrow.
A. Start Tag
B. Attributes

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

C. Content
D. End Tag

Figure 3.

________7. Which of the following is not an empty element.

A. <br>
B. <hr>
C. <img src=”dblogo.jpeg”>
D. </p>
________8. Which of the following is true about Content?
A. The content is the one being formatted by the elements.
B. The content is everything from the start and end tag.
C. The content signifies the start and end of the tag.
D. The content are used to provide additional information.

________9. What are Attributes?

A. It provides the properties of an element.
B. It is the basic building blocks of HTML.
C. It gives additional information to tags.
D. It provides additional information about HTML elements.
________10. What are Values?
A. It specifies the properties of the attribute which provide additional
information about the HTML elements
B. It specifies the values in a given elements.
C. It specifies the properties and its values in a given elements.
D. It specifies the content and information of an element.

Key to answers on page 47

WHAT’S IN

THE INTERNET

10

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

The Internet consists of millions of interconnected computers that enable users to

communicate and share information. Many Internet tools required users to master an array
of terms, acronyms, and commands before they could navigate the Internet.
The World Wide Web was developed to make the Internet easier to use and give quick
access to users. (C. Hueckstaedt, Tutorial 1, 2002)

Figure 4. Physical
structure of the
Internet

THE DEVELOPMENT OF THE WORLD WIDE WEB

In 1989, Timothy Berners-Lee and other researchers at the CERN nuclear research
facility, laid the foundation of the World Wide Web, or the Web. It created an information
system that would make it easy for researchers to locate and share data with a required
minimal training and support. They developed a system of hypertext documents, electronic
files that contain elements that you can easily select. (C. Hueckstaedt, Tutorial 1, 2002)

HYPERTEXT DOCUMENTS
Hypertext offers a better way of locating information. Like reading a book it is
following a linear progression and reading one page after another. With hypertext, the
progress through pages in whatever way is best suited to the user’s and objectives of the
developer and designer. Hypertext allows the user to skip from one topic to another. (Visual
Guide in HTML 5 and CSS 3, 2013, Jemma Inc.)

Figure 5.
Illustration from
linear to hypertext
document

11

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

WEB PAGES AND WEB BROWSERS

A Web page is stored on a Web server, which makes the page available to users of
the Web, to view a Web page, the user runs a Web browser, a software program that
retrieves the page and displays it. A Web browser can either be text-based, or graphical.
Most common web browser now days are Google Chrome, Fire Fox, Internet
Explorer and Safari for Mac environment.

Figure
6.
Different
kinds of
Web
browser
Let’s have a simple crossword puzzle to remember some of the terms that you
already read.

PUZZLE TO REMEMBER!
Self-Test 1.1
Direction: Kindly place your desired answers on the puzzle matrix base on
the hints given in
the Across and Down area.

12

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Key to answers on page 47

WHAT’S NEW
Self Test 1.2
Direction: Idenitfy the HTML5 tag on the following web page content by
Matching Column A which are the tags and Column B which contains the web page content.
Write your answers on the space provided below and use CAPITAL LETTERS. Have fun my
dear students! �
YOUR ANSWER HERE!
1. 6. 11.
2. 7. 12.
3. 8. 13.
4. 9. 14.
5. 10. 15.

COLUMN A COLUMN B
1.<head> </head> A.Define the document type
2.<audio> </audio> B.Enclose the entire HTML document
3.<source> </source> C.Enclose the head of the HTML document
4.<embed> </embed> D.Define sound content
5. <!DOCTYPE> E.Define the result of a calculation
6.<br> F.Define a video or movie
7.<hr> G. Define a container for an interactive content
8.<html> </html> H.Define text tracks for videa and audio
9.<output> </output> I.Define a date and time
10.<p> </p> J.Define multiple media resources
11.<video> </video> K.Create a line break
12.<body> </body> L.Create a paragraph
13.<title> </title> M.Create a horizontal rule line
14.<time> </time> N. Indicate the title of the document
15.<track> </track> O.Encloses the body of the HTML document

Key to answers on page 48

 
WHAT IS IT

HYPERTEXT MARKUP LANGUAGE (HTML) & IT’S BACKGROUND

13

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

HTML stands for Hypertext Markup Language and it is the language used in creating
Web pages.
A markup language then is a set of interpretation to text that describes how it is to be
structured, laid out or formatted. HTML provides the structure, lay-out and format of a Web
page. Keep in mind my dear students, that in writing HTML, you are instructing the Web
browser how to display the Web pages. It also to put the text on the center, what images and
videos to put, use a certain color for a certain text, etc. (Visual Guide, HTML5 and CSS3,
Jemma Inc., 2013)

TITLE

BACKGROUND

IMAGE

LINKS
Figure 7. Figure Sample Layout and Format of a Web Page

HTML vs HTML 5

HTML HTML5
 It didn’t support audio and video  It supports audio and video controls
without the use of flash player with the use of <audio> and <video>
support. tags.
 It does not allow drag and drop  It allows drag and drop effects.
effects.
 Not possible to draw shapes like  Allows to draw shapes like circle,
circle, rectangle, triangle etc. rectangle, triangle etc.
 Older version of HTML are less  HTML5 language is more mobile-
mobile-friendly friendly
 Doctype declaration is too long  Doctype declaration is quite simple
and complicated and easy.
 Elements like nav, header were  New element for web structure like
not present nav, header, footer etc.
 It cannot handle inaccurate  It is capable of handling inaccurate
syntax syntax.
 Character encoding is long and  Character encoding is simple and
complicated easy
 It works with all old browsers  Supported by all new browser like
Firefox, Mozilla, Chrome, Safari, etc.
 Does not allow JavaScript to run  Allows JavaScript to run in
in browser background. This is possible due to
JS Web worker API in HTML5

14

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Source: https://www.geeksforgeeks.org/difference-between-html-and-html5/

HTML editors is a software application for creating web pages. The HTML documents use
plain text, any text editing program can be used to create Web pages.

Text Editing Programs

NAME EXAMPLES
Text Editors Notepad++, Microsoft Windows Notepad,
TextEdit, Apple Mac
HTML Editors Microsoft Expression
Adobe Dreamweaver
Word Processing Programs Microsoft Word
Open Office

For our class activities, we will be using my dear students Notepad as our text
editor. To start illustrating on how to use the Notepad, kindly follow the steps
and bear in mind the different parts of a Notepad Window.

1. Go to Start button

2. Type the word

“Notepad” on the Search
box

15

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Title Control
Bar buttons
3. Open the Notepad

Menu
Bar

Text
Area

WHAT IS A DOCTYPE? Scroll

Bar
A <!DOCTYPE> is not an HTML tag but it is a document declaration that helps the
browser to display a webpage correctly.

DOCTYPE in HTML5:

WHAT IS METADATA?

Metadata is information or data about data. It is about the HTML document

which is placed in the head part and will not be displayed on the page.

Metadata
Element Definition
head Represents a collection of metadata for the document.
Ex. <head> . . . </head>

title Represents the documents title or name

Ex. <title>Department of Education</title>

base Specifies document base URL for the purpose of resolving

relative URLs and the name of the default browsing context

16

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

for the purposes of the following hyperlinks

<base
href=http://www.deped.gov.ph/resources/news/index.html>

link Specifies the link of the document to other resources. It must

have a real attribute.
Ex. <link rel=”resume” href=”/reference”>

meta Represents the various kinds of metadata that cannot be

expressed using the title, base, link, style and script
elements.

style Allows authors to embed style information in the document.

The type attribute gives the styling language.
Ex. <style type="text/css">
p{
color: #26b72b;
} </style>

ELEMENTS, ATTRIBUTES, AND VALUES

METADATA

HTML has three principal markup components:

 Elements – it is everything between the start tag and the end tag, including the tags.
 Attributes – provide additional information about HTML elements
 Values – specify the properties of the attribute which provide additional information
about the HTML element

Tags are the basic units or building blocks of an HTML file. Web pages are designed and
HTML codes are made up of these tags – they control how HTML does its structuring, laying
out and formatting. Tags are enclosed in angle brackets < and >.

 Start tag – tags usually are in pairs of start and end tags, it indicates in the start tag is
the type of tag used and also it’s attributes are placed in the start tag.
 Attribute – it is used to provide additional information about the tag and go in name-
value pairs separated by an equal sign “=”
- A tag may or may not have attributes.

17

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

- Values are assigned property to an attribute

 Content – everything between the start and end tag is the content.
 End tag – it is used to signify the end of the tag and ultimately, the range of the
content of the tag.
 HTML elements usually come in tag pairs, below is the format/syntax.

Here’s an example of how tag is used and its parts:

ATTRIBUTES

START TAG

ELEMENT
CONTENT

END TAG

This is how it look like when viewed on a Web browser (Google Chrome)

BACKGROUND IS FUCHSIA

TEXT COLOR IS YELLOW

18

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

EMPTY ELEMENTS

HTML elements with no content are called empty elements.

Example of empty elements:
 <br>
 <hr>
 <img src=”logo.gif”>

Example of container tags:

 <article>
<h2>This is header2 – not so big and bold</h2>
<p>This is a paragraph</p>
</article>
 <i>Italized</i>
 <u>this is used to display words with underline</u>

Below is another example of an HTML document with a complete start and end tag. It also
shows the display of the codes below in a web browser using Google Chrome.

The table
below shows some of the HTML tags that you will encounter on these module and the
succeeding lesson modules:

HTML Tags
Tag Function

19

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

<!DOCTYPE> Defines the document type

<html> </html> Encloses the entire HTML document
<head> </head> Encloses the head of the HTML document
<title> </title> Indicates the title of the document
<body> </body> Encloses the body of the HTML document
<p> </p> Makes a paragraph
<br> Makes a line break
<hr> Makes a horizontal rule line
<ol> Makes an order list
<ul> Makes an unordered list
<h1> </h1> Makes a first-level heading
<h2> </h2> Makes a second-level heading
<h3> </h3> Makes a third-level heading
<h4> </h4> Makes a fourth-level heading
<h5> </h5> Makes a fifth-level heading
<h6> </h6> Makes a sixth-level heading
<b> </b> Makes a bold text
<img> Defines an image
<time> </time> Defines a date or time
<wbr> </wbr> Defines a possible line break
<audio> </audio> Defines sound content
<video> </video> Defines a video or movie
<source> </source> Defines multiple media resources for video
and audio
<embed> </embed> Defines a container for an external
application of interactive content
<track> </track> Defines text tracks for video and audio

WHAT IS ATTRIBUTES?

It provides additional information about HTML elements. Most of the

attributes of an element area names=”value” pairs, separated by an equal =
sign and written within start tag of an element after the element’s name.

WHAT ARE VALUES?

The values specify the properties of the attribute which provide additional information
about the HTML element.
For example:

Attribute Value
20

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Value

Value

Since we already learn, a quick visit of the HTML5 basic as part of HTML5
introduction. Let’s not forget also that in every designing and development of an application
there is always a big Planning to undertake. The following are the guidelines in planning a
website.
1. Create the goal or purpose of the web site.
In designing the whole web site, you should have in mind what is the main
function of the web site and what is the purpose of having the web site. Let’s
not forget that we lose focus on it’s goal and purpose we can never have a
strong foundation in building the website. Since all the formatting and the
content that we have to put into the web site it will always go back to the goal
and purpose of the web site.

2. Identify the primary target audience.

After identifying the purpose and goal of the web site, we have to determine
who is the audience of our web site since it contributes a great factor in
designing the appearance of the web site as well as the presentation of the
content. We can ask questions such as, Are their students? Are their high
degree professionals? Are they young or old? and soon.

3. Plan the content of the web site.

Since we already have an idea on the goal and purpose of the web site as well
as the audience, we are already ready to gather our materials for the site such
as pictures, background colors, video, music and other multimedia files. All the
gathered materials must be in relation to the objective, purpose and the desired
audience of the web site so that the content of the web site could really attract
the audience to read and visit the web site as well they could get reliable
information on the web site.

4. Plan and organize the site structure.

In planning the site structure, it should be carefully identified in relation to the
goal of the web site. The following are structures in designing a web site that
could be utilized by the you:
 Linear structure – is design to present the content of the web site one
by one specially in an educational website such as tutorials or online
coaching wherein the information given are in sequential and arrange
one by one.
 Hierarchical structure – is design to present the content of the website
in a tree like or a very simple organizational chart wherein one category
is part of the home and other sub categories belongs to a main
category.
 Random structure – is design to present the content in any order.
Wherein the audience can visit or go to any web page they want to visit.
A lot of these structure is typically used in small web sites which

21

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

contains few web pages in order to avoid complication of the content of

the web site.

5. Plan the web pages details.

The content of your web page will attach audience or visitors to visit your site. A
careful planning of the layout of your page, colors, themes, text styles, tables,
pictures and other elements will make the creation of your web site more
dynamic and can capture or attract visitors to visit your web site.

6. Planning and designing the navigation scheme.

This part is very crucial considering that you to be more precise on navigating
from one page to another so as not to wander around your visitors of your
website or in other words they will be guided all throughout their visit in your
web site. Indicating proper labeling of your links, forms buttons, index, menus
and other navigational elements.

7. Planning and gathering your resources.

Lastly, gathering of your resources such as graphics, images, animation,
multimedia, audio, video and even the content in text form must be organized
and available in a specific drive for proper safe keeping of resources. The
finalization of the web page theme must also be considered done in this time.

WHAT ARE HEAD TAGS?

HTML files are divided into two parts, the head and the body. The head part
contains the enclosed tag <head></head> and the contents in the body part are
enclosed in <body></body>
Here’s an example:
HTML CODE:

HEAD

22

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

This is how it look likes in Google Chrome Web Browser:

HEAD - TITLE

WHAT IS BODY TAGS?

Anything that appears on your Web Page like video, audio, images, text and the
like must be inside the body enclosed in <body></body>

Here’s the example HTML code:

BODY

23

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

BODY

WHAT ARE HEADINGS?

Headings are used to organize or group the contents of your page. Headings
are container tags which format text using pre-defined values for size and color.
There are six (6) heading tags and these are the following:
 <h1> </h1>
 <h2> </h2>
 <h3> </h3>
 <h4> </h4>
 <h5> </h5>
 <h6> </h6>

An HTML document has a main heading and sub-headings and they are
assigned font sizes to differentiate one from the other. The meain heading
and will have the biggest font size and is designated as <h1>, the next
heading is <h2> and so on up to <h6>.

Attributes for <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>

and <h6></h6>

Attribute Definition
align Indicates the horizontal alignment of
heading. Ex: <h2 align=”right”>This is right-
alignment</h1>
title Indicates the text that appears when the
mouse hovers over the heading.
Ex: <h2 title=”How are you? ”> Hope your
dong good! </h2>

class, id, style These attributes are used in Cascading

Style Sheets or CSS

24

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

HTML CODE sample for Headings

HEADING
LEVELS

GOOGLE CHROME VIEW

HEADING LEVELS

25

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

HTML CODE sample for Heading Alignments

GOOGLE CHROME VIEW

WHAT’S MORE

Activity 2.1

26

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Let’s have fun while learning, my dear students! Below is a word puzzle, identify the
word by encircling the word either diagonal, straight row, straight column and even the words
is in forward form or backward form. Goodluck!

Key to answers on page 48

Great Job my dear students

you are about to conquer another
exciting activities for you to familiarize
the common tags used in HTML5.

Activity 2.2

Directions: Below
are Table 1 which
contains the
format of a tag and Table 2 contains Web page contents. Write your answers
on Table 3 with the corresponding correct tag base on Table 2 definition of
the different web page content.

TABLE 1. TAG FORMAT

<head> </head> <!DOCTYPE> <audio> </audio>
<html> </html> <title> </title> <video> </video>
<h1> </h1> <b> </b> <hr>

27

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

<br> <p> </p> <ul>

<img> <h6> </h6> <body> </body>

TABLE 2. WEB PAGE CONTENTS

1. Defines a video or movie 2. Creates a line break 3. Defines an image
4. Encloses the body of the 5. Defines unordered list 6. Defines a bold text
HMTL document
7. Creates a horizontal rule 8. Defines sound content 9. Encloses the head of
line the HTML document
10. Creates a first-level 11. Encloses the entire 12. Creates a sixth-level
heading HTML document heading
13. Indicates the title of the 14. Creates a paragraph 15. Defines document type
document

TABLE 3. YOUR ANSWERS HERE!

1. 2. 3.
4. 5. 6.
7. 8. 9.
10. 11. 12.
13. 14. 15.

Activity 2.3 Key to answers on page 49

Directions:
Hi students! It’s another enjoyable activity that you will have to
work on. The table below contains a given tags with a wrong
and correct tag. You have to write on the correct tag column all
the tags that you think are correct and put on the wrong tag all
the tags that you think are wrong.

Correct Tag GIVEN TAGS WrongTag

A.
<!DOCTYPE>

<html>

<head>
<title>MY FIRST HEADING
</title>
</head>

<body>
<h title="HI">Topic 1</h>
<h2 align="right">Topic 2</h2>
<h3 "center">Topic 3</h3>
<h4 align="left">Topic 4</h4>
<h5 title=H5>Topic 5</h5>
<h6 align="center">Topic 6</h6>
<body>

</html>
B.

28

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

<!DOCTYPE html>
<html>
</head>My First HTML Code
</title>First Code
HTML</title>
</head>

<body bgcolor="FFFFF0"
text="#800000">

<font face="Arial" size="4" My First

Code <font>

</h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Key to answers on page 49

Activity 2.4

Directions: Hello students! Another fun filled activity we have to start. The
image below is a complete HTML code tag where in you have to label the
different HTML tags base on the arrows. You have to write the correct
name of the tag on the box provided.

29

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Key to answers on page 50

  WHAT I HAVE LEARNED

Hello my dear students! I hope that you have learned a lot on the different key
concepts on the Introduction to HTML5 as well as I hope that you really enjoy reading the
module. And to summarize the whole concepts, I prepared a summary for you.

1. The Internet consists of millions of interconnected computers that enable users to

communicate and share information.
2. Timothy Berners-Lee in 1989, and other researchers at the CERN nuclear research
facility, laid the foundation of the World Wide Web, or the Web
3. Hypertext offers a better way of locating information. Like reading a book it is
following a linear progression and reading one page after another. With hypertext, the
progress through pages in whatever way is best suited to the user’s and objectives of
the developer and designer.
4. HTML stands for Hyper Text Markup Language. It is used to design web pages using
markup language.
5. HTML is the combination of Hypertext and Markup language. Hypertext defines the
link between the web pages.
6. Markup language is used to define the text document within tag which defines the
structure of web pages.
7. HTML 5 is the fifth and current version of HTML. It has improved the markup
available for documents and has introduced application programming interfaces(API)
and Document Object Model(DOM).
8. Advantages of HTML5 are the following; all browsers supported, more device
friendly, easy to use and implement., HTML 5 in integration with CSS, JavaScript, etc
can help build beautiful websites.
9. Disadvantages of HTML5 are the following; long codes have to be written which is
time consuming, only modern browsers support it.
10. Tags format/syntax are all easy to remember and easy to use.

30

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

HTML5 FEATURES
 It has introduced new multimedia features which supports audio and video controls
by using <audio> and <video> tags.
 There are new graphics elements including vector graphics and tags.
 Allows to draw various shapes like triangle, rectangle, circle, etc.
 Capable of handling incorrect syntax.
 Easy DOCTYPE declaration i.e. <!doctype html>
 Easy character encoding i.e. <meta charset=”UTF-8″>

WHAT I CAN DO

Hi students! In this part you are expected to write an HTML

code base on the problem definition and the sample output as indicated
below.

PROBLEM DEFINITION:
Page title: “TVL-ICT HTML Example”. Use an aligned center heading 1 for
the first line of text is. Use separate paragraph tags for the next 2 lines of
text. Use bold, italic and underlined tags for the fourth line of text. After
this create the 3rd paragraph and insert a horizontal rule after it. Do not enclose the last part
in any tag, instead just write them directly and separate each line with a line break. NOTE:
Do not put unnecessary break tags.
TAGS NEEDED:
1 – h1, b, i, u, hr
3–p
3 – br

SAMPLE OUTPUT:

31

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Write your answers on the skeleton format of an HTML code which is base on the sample
output above.

<!DOCTYPE HTML>

<html>

<head>
<title>___________________________________________</title>
</head>

<body>
<h1 align=____________________>
_________________________________________</h1>
___________

<p>_________________________________________________________
_________________________________</p>
<p></p>

<p>_________________________________________________________
_________________________________</p>

____________________Internet growth____________________

p>___________________________________________________________

___________________________________________________________

__________________________________________________________</p>

<p></p>

<p>______________________________</p>
________
________

<p>Quick Study Charts Inc.</p>

_____Tel. No. 4248956</p>

<p>Purok Mangga Poblacion, Liloan, Cebu</p>

__________

</html>ASSESSMENT
Key to answers on page 51

32

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

PART I - POST TEST

PART IA. Direction: Students kindly, identify properly the parts of a notepad as tool in editing
a web page by writing your answer on the space provided after Figure 1.

Notepad Window 1
2

Figure 1
1. _______________________________
2. _______________________________
4
3. _______________________________
4. _______________________________
5. _______________________________

PART I B. Direction: Students in figure 2 it illustrates an example of how a tag is used and its
parts. Kindly identify it parts by labelling properly on the figure below.

Structure of a Tag

5
1
2

3
4

Figure 2.

PART II.
Direction: Choose the best answer and write the letter of your choice on the space
provided before each number.

________1. What is HTML?

E. Hyper text Mark up Language
F. Hypertext Message Language
G. Hypertext Markup Language
H. Hypetext Mark-up Language
________2. Which features of an HTML 5 is false?
E. New semantic elements and attributes.
F. It supports audio and video controls with the use of <audio> and <video>
tags.
G. It works with all old browsers.
H. New element for web structure like nav, header, footer etc.
________3. What is a DocType?

33

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

E. It is document inside a web page.

F. It is a document declaration that helps the browser to display webpage
connectivity.
G. It is a HTML tag.
H. It an introductory statement to identify that it is an HTML 5 document.
________4. What is a Metadata?
E. A metadata is an information or data about data.
F. A metadata cannot be used to display or reload page and keywords
G. A metadata provides additional information about it’s attributes
H. A metadata is place on the body part and will not be displayed.
________5. HTML has three principal markup components
E. Tag, Elements, Data
F. Values, Elements, Structure
G. Elements, Attributes, Values
H. Tag, Elements, Attributes
________6. In the figure below, identify the part of a structure tag that is being
indicated in an arrow.
E. Start Tag
F. Attributes
G. Content
H. End Tag

________7. Which of the following is an empty element.

E. <br>
F. <hr>
G. <img src=”dblogo.jpeg”>
H. </p>

________8. Which of the following is true about Content?

E. The content is the one being formatted by the elements.
F. The content is everything from the start and end tag.
G. The content signifies the start and end of the tag.
H. The content are used to provide additional information.
________9. What are Attributes?
E. It provides the properties of an element.
F. It is the basic building blocks of HTML.
G. It gives additional information to tags.
H. It provides additional information about HTML elements.
________10. What are Values?
E. It specifies the properties of the attribute which provide additional
information about the HTML elements
F. It specifies the values in a given elements.

34

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

G. It specifies the properties and its values in a given elements.

H. It specifies the content and information of an element.

Key to answers on page 47

PART II ASSESSMENT

I. Multiple Choice. Write the corresponding letter of your answer in CAPITAL

LETTER form on the base provided below.

1. 6. 11.
2. 7. 12.
3. 8. 13.
4. 9. 14.
5. 10. 15.

1. What does HTML stand for?

A. Home Tool Markup Language
B. Hyper Text Markup Language
C. Hypertext Markup Language
D. Hyperlinks and Text Markup Language

2. Who is making the Web standards?

A. Microsoft
B. Mozilla
C. Google
D. The World Wide Web Consortium

3. Choose the correct HTML element for the largest heading:

A. <h6>

35

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

B. <h1>
C. <heading>
D. <head>

4. What is the correct HTML element for inserting a line break?

A. <br>
B. <break>
C. <lb>
D. <br></br>

5. Which character is used to indicate an end tag?

A. /
B. *
C. <
D. ^

6. How can you make a numbered list?

A. <ol>
B. <dl>
C. <ul>
D. <list>

7. Which doctype is correct for HTML5?

A. <!DOCTYPE html>
B. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN"
"http://www.w3.org/TR/html5/strict.dtd">
C. <!DOCTYPE HTML5>
D. <DOCTYPE HTML>

8. Which HTML element defines the title of a document?

A. <meta>
B. <title>
C. <head>
D. <h>

9.It is the tag that creates a new paragraph and aligns the paragraph to center.
A. <p align=”center”> the quick brown fox jumps over the lazy dog <>
B. <p align=left> the quick brown fox jumps over the lazy dog </p>
C. <p align=”left”> the quick brown fox jumps over the lazy dog </p>
D. <p align=center> the quick brown fox jumps over the lazy dog <>

10.The formatting language used to create web documents.

A. Web Browser
B. Hypertext
C. URL
D. HTML

11. Software used to surf the web, such as Google Chrome and Internet Explorer.
A. Web Browser
B. Hypertext
C. URL

36

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

D. HTML

12. Hypertext is define as:

A. It is the document of the web.
B. It offers a better way of locating information.
C. It follows a liner presentation of information.
D. It is a page of the web.

13.The HTML codes that control the appearance of the document content.
A. attributes
B. tag
C. content
D. syntax

14 Choose the correct HTML element for the smallest heading:

A. <h6>
B. <h1>
C. <heading>
D. <head>

15. Choose the correct HTML element to define italic text

A. <b> </b>
B. <st> </st>
C. <i> </i>
D. <u> </u>

II. Error Identification. Rewrite the code on the designated blank space provided base on the
given codes on the first column.

A.) <html> </html>

<head>
</title>Your Page Title</title>
<head>
</body>
This area will contain everything that
will be visible through a web browser,
such as text and graphics. All of the
information will be HTML coded. For a
complete list of HTML codes, tags and
examples, see the HTML chart below.
</body>

B.) <html> <! Start of the document>

<head> My Home page
<\head>
<body<>
Text test text text text
</body>
<html>

C.) <body>
<h1 align=”center”> XYZ
<h2 align=”center”> Cebu City

37

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

<p> the quick brown fox jump over

the lazy dog
<hr size=5 align=center
</body>
D.) <html>
</head>
<body>
<font size=5 color=ff0000
face=courier new this is courier
new</font>
<ol type=1>
<li> Certified Internet Program
<ol type=1>
<li> Internet Essentials
<li> Internet Server
<li> Internet Interface
</ol>
</body>
</html>

III. 0 or 1. Write the value 1 if the statement is correct and 0 if the statement is incorrect.
Write your answer on the space provided.

1. 6. 11.
2. 7. 12.
3. 8. 13.
4. 9. 14.
5. 10. 15.

1. In order for computers to share resources efficiently, they can be linked together
using the internet structured networks.

2. The internet consists of millions of interconnected computers that enable users to

communicate and share information.

3. Hypertext document is one of the many methods of sharing and retrieving information
on the Internet becoming known as the WWW.

4. A Web page is stored on a Web server, which makes the page available to users of
the Web.

5. Documents on the Web are known as HTML.

6. HTML documents are text files, which a text editor such as Windows Notepad can be
used to create.

7. Document content is what the users see on the page, such as headings and images.

8. The <b> tag can be used to define a word in bold form.

38

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

9. Timothy Berners-Lee and other researchers at the CERN nuclear research facility,
laid the foundation of the World Wide Web, or the Web

10. HTML stands for Hyper Text Manager Language.

11. An HTML file is a text file containing small markup tags.

12. The mark-up language tells the web browser how to display the page.

13. A markup language then is a set of interpretation to text that describes how it is to be
structured, laid out or formatted.

14. Metadata is information or data about data.

15. HTML elements with no content are called empty elements.

IV. Tag writing.

Construct the correct HTML Tag on the following statement.
For example: Bold the word “TVL ICT PROGRAMMING”
Answer: <b>TVL ICT PROGRMAMING</b>

1. Center the word “LILOAN NATIONAL HIGH SCHOOL EXT-DON BOSCO CAMPUS”
in largest heading.

2. Make this statement bold, italic and underline – “The quick brown fox jump over the
lazy dog.”

Key to answers on page 52 & 53

ADDITIONAL ACTIVITIES

Direction: Answer the following questions in your own opinion and understanding.

39

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

1. HTML is the language of every Web page. How do you find HTML as a
student learning web programming? Is it easy, average or hard to understand?

2.What is your greatest learning in this whole Module I which is Introduction to

Hypertext Markup Language?

PRE-TEST and POST-TEST

PART IA.

1. Control Buttons
2. Title Bar
3. Menu Bar
4. Text Area
5. Scroll Area

PART IB.

40

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

1. Start Tag
2. Attributes
3. Content
4. End Tag

PART II.
1. C 6. A
2. C 7. D
3. B 8. B
4. A 9. C
5. C 10. A

Self-Test 1.1

1. CHROME
2. FIREFOX
3. WEB BROWSER
4. WEB PAGES
5. WWW
6. INTERNET
7. SAFARI
8.TIMOTHY
9.HYPERTEXT

Self-Test 1.2

Answer key
1. C 6. K 11.F
2. D 7. M 12.O
3. J 8. B 13.N
4. G 9. E 14.I
5. A 10.L 15.H

Activity 2.1

41

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

Activity 2.2

1. <video> </video> 2. <br> 3. <img>

4.<body> </body> 5. <ul> 6. <b> </b>
7. <hr> 8. <audio> </audio> 9. <head> </head>
10. <h1> </h1> 11.<html> </html> 12. <h6> </h6>
13. <title> </title> 14. <p> </p> 15. <!DOCTYPE>

Activity 2.3

Correct Tag GIVEN TAGS WrongTag

A.
<!DOCTYPE> <!DOCTYPE>

<html> <html>

42

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

<head> <head>
<title>MY FIRST <title>MY FIRST HEADING
HEADING </title>
</title> </head>
</head> <h title="HI">Topic
<body> 1</h>
<body> <h title="HI">Topic 1</h>
<h2 align="right">Topic <h2 align="right">Topic 2</h2> <h3 "center">Topic
2</h2> <h3 "center">Topic 3</h3> 3</h3>
<h4 <h4 align="left">Topic 4</h4> <h5 title=H5>Topic
align="left">Topic <h5 title=H5>Topic 5</h5> 5</h5>
4</h4> <h6 align="center">Topic 6</h6> <body>
<body>
<h6
align="center">Topic </html>
6</h6>
</html>
<!DOCTYPE html> B.
<html> <!DOCTYPE html>
<html>
</head>My First HTML </head>My First HTML Code </title>First Code
Code </title>First Code HTML</title>
HTML</title>
</head> </head>
<body
bgcolor="FFFFF0" <body bgcolor="FFFFF0" <font face="Arial"
text="#800000"> text="#800000"> size="4" My First Code
<font>
<font face="Arial" size="4" My First
Code <font> </h1>My First
Heading</h1>
<p>My first </h1>My First Heading</h1>
paragraph.</p> <p>My first paragraph.</p>

</body> </body>
</html> </html>

Activity 2.4

TITLE
DOCUMENT
TYPE

HEAD

PARAGRAPH 43

BODY
Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)
 lOMoARcPSD|19605557

WHAT CAN I DO

<!DOCTYPE HTML>

<html>

<head>
<title>TVL-ICT HTML Example</title>
</head>

<body>
<h1 align="center">It is easy to learn HTML</h1>
<p></p>
<p>This is the first paragraph. It is short but is still a paragraph</p>
<p></p>
<p>This is the second paragraph much shorter!</p>
<p></p>
<p><i><u><b>Internet growth</b></u></i></p>

<p>The online community has developed 44 into a incredible mixture of

culture, commerce, and entertainment. Whatever shopping, planning, an
wevening on the town, or exploring the many attractions, the Internet puts the
world at your fingertips.</p>
Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)
 lOMoARcPSD|19605557

PART II. ASSESSMENT

TEST I

1. C 6. A 11. A
2. D 7. A 12. A
3. B 8. B 13. C
4. B 9. A 14. A
5. A 10. D 15. C

TEST II

A.) <html> </html> <html>

<head> <head>
</title>Your Page Title</title> </title>Your Page Title</title>
<head> <head>
</body> </body>
This area will contain everything <p> This area will contain everything that will
that will be visible through a web be visible through a web browser, such as
browser, such as text and text and graphics. All of the information will
graphics. All of the information be HTML coded. For a complete list of HTML
will be HTML coded. For a codes, tags and examples, see the HTML
complete list of HTML codes, tags chart below.
and examples, see the HTML </p>
chart below. </body>

45

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

</body> </html>

B.) <html> <! Start of the document> <!DOCTYPE HTML>

<head> My Home page <html>
<\head> <head> My Home page
<body<> </head>
Text test text text text <body
</body> <p>Text test text text text </p>
<html> </body>
</html>

C.) <body> <body>

<h1 align=”center”> XYZ <h1 align=”center”> XYZ </h1>
<h2 align=”center”> Cebu City <h2 align=”center”> Cebu City</h2>
<p> the quick brown fox jump over <p> the quick brown fox jump over the
the lazy dog lazy dog </p>
<hr size=5 align=center <hr size=5 align=center>
</body> </body>
D.) <html> <html>
</head> <head>
<body> </head>
<font size=5 color=ff0000 <body>
face=courier new this is courier <font size=5 color=ff0000 face=courier
new</font> new this is courier new</font>
<ol type=1> <ol type=1>
<li> Certified Internet Program <li> Certified Internet Program
<ol type=1> </ol>
<li> Internet Essentials <ol type=1>
<li> Internet Server <li> Internet Essentials
<li> Internet Interface <li> Internet Server
</ol> <li> Internet Interface
</body> </ol>
</html> </body>
</html>

TEST III

1. 1 6. 0 11. 0
2. 1 7. 0 12. 0
3. 0 8. 1 13. 0
4. 1 9. 1 14. 1
5. 1 10. 0 15. 1

TEST IV

1. Center the word “LILOAN NATIONAL HIGH SCHOOL EXT-DON BOSCO CAMPUS”
in largest heading.

<h1 align=”center”> LILOAN NATIONAL HIGH SCHOOL EXT-DON

BOSCO CAMPUS</h1>
46

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)

 lOMoARcPSD|19605557

2. Make this statement bold, italic and underline – “The quick brown fox jump over the
lazy dog.”

<b><i><u>The quick brown fox jump over the lazy dog.</u></i></b>

REFERENCES

Online Resources

Geeks and Geeks. https: https://www.geeksforgeeks.org/difference-between-html-and-html5/

HTML5 Introduction.GeeksforGeeks https://www.geeksforgeeks.org/html5-introduction/
HTML tutorials on W3 school. https://www.w3schools.com/html/

Printed Materials

Deped Curriculum Guide in .Net Technolog Grade 12 TVL ICT Programming

HTML 5 & CSS 3. Jemma Development Group. 2013
Visual Guide. HTML, CSS and XHTML, Jemma Development Group Group.2013

For inquires or feedback, please write or call:

Department of Education: Division of Cebu Province
Office Address: IPHO Bldg. Sudlon, Lahug, Cebu City
Telefax: (032) 255-6405
Email Address: cebu.province@deped.gov.ph

47

Downloaded by Jellie Atienza (jellieanne.atienza@yahoo.com)