St.

Bridget College
Batangas City
INTEGRATED BASIC EDUCATION DEPARTMENT
PAASCU Accredited
Contact Nos. (043) 980-5669 or (043) 722-2950

Subject: Computer
Grade Level: 10
Unit 2: Hypertext Markup Language HTML 5
Lesson 5: Introduction to HTML 5

Content Standard
The learner demonstrates understanding of the features of HTML 5 and the elements and
attributes of HTML.

Performance Standard
The learner applies the different HTML attributes in a webpage.

Formation Standard
The learner becomes understanding and build enthusiasm in learning new knowledge.

Essential Question:
1. What is HTML 5?
2. Why HTML elements is important?

Enduring Understanding:
1. HTML5 is the newest version of HTML that is used to develop websites. This version introduces new
and enhanced features including the application cache, drag-and-drop, geolocation, input types, server-
sent events, web storage, and web worker.
2. HTML elements mainly consist of the html, head, title, and body tags. Some of the HTML attributes
include the alt, background, href, src, title, width and height.

Learning Targets
Acquisition:
Identify four (4) new features of HTML 5.

Meaning Making
Explain the different tags and attributes used in HTML.

Transfer
Apply the HTML attributes in creating a webpage.

1. Introduction
In young children who like playing, they usually play “Tags” where in children are running
around to tag someone. In this lesson we will play Tags but not running around but with the use of
HTML tags. We will use it to create a basic webpage.

At the end of this module, you are expected to:

1. describe HTML5
2. identify and discover new features of HTML5
3. identify and use the basic HTML attributes.

2. Anticipatory Set
REVIEW
To review the previous lesson, in your Computer Notebook write the basic structure of an HTML
document.
BASIC STRUCTURE OF HTML DOCUMENT
Cite your ideas about the basic structure of an HTML document.

3. Learning Activities
A. iTRY
Answer the “iTRY" activity on page 43 of your textbook.

Complete the sentences by choosing and underlining the correct word.

1. The (html, body) tag encapsulates all the contents of the web page.
2. The (meta, head) tag contains meta information about the document.
3. A web worker is a (JavaScript, CSS) code that runs in the background of the web page.
4. The (html, title) tag is used at the beginning and end of every web page.
5. The (background, bg) attributes specifies a background for a web page.
6. The (iref, href) attribute provides address information links.
7. An application cache allows developers to create (offline, online) applications using HTML5.
8. The (src, alt) attribute specifies the URL or web address for an image.
9. The (body, title) attribute provides additional tool-tip information.
10. The web (storage, worker) is used to store data on the user’s browser.

B. READ AND LEARN

Read Lesson 5 Introduction to HTML5 in your textbook pp. 44-50.

C. PRESENTATION OF LESSON
To discuss the lesson, there will be synchronous learning using Zoom.

Guide Questions:
1. What is HTML5 and how does it differ from the old version?
2. How do you use the title tag and body tag?
3. What are the main elements of an HTML document?
4. Why is it important to add an alt attribute in image tag?
5. Why background attribute creates an impact on a web page?

C. iLAB ACTIVITY

iLAB 5
GUESS THE HTML ATTRIBUTES
For this activity, you will use a Notepad or any text editor to create a webpage.

Create the HTML document base on the web page below and use the given attributes. Once you are
done, save your work as attributes.html. Submit your work in your CLE HTML ATTRIBUTES.
  Background color – powder blue
 Image source – rose
 Alternative text – one pink rose
 Width in pixel – 200
 Height in pixel - 200
 href - https://sbchs.aralinks.net

4. Formative Assessment
Target Goal: 90% of the students will get at least 85% on the Formative Assessment.
To check your understanding of the Numeral System, using the CLE Quiz answer the
iWORKSHEET 5A and iWORKSHEET 5B.

iWORKSHEET 5

__________________ 1. This new feature allows developers to create offline applications using
HTML5.
__________________ 2. This feature allows users to drag and drop an element to another location or
even to a different application.
__________________ 3. This feature is used to find out the current location or geographic coordinates
of the site visitor.
__________________ 4. These are introduced in HTML5 to enhance the user experience and produce
more interactive forms.
__________________ 5. This features enables a webpage to get information from the web server
automatically.
__________________ 6. This is a feature that enables a developer to store some information locally on
the user’s computer.
__________________ 7. This is a JavaScript code that runs in the background of the web page.
__________________ 8. This is something which is usually made up of three basic parts – a start tag,
content, and an end tag.
__________________ 9. It is the newest version of HTML that is used to develop websites and is
supported by major web browsers.
__________________ 10. These are tags which improve the appearance of a web page and provides
additional information about HTML elements.

5. Reflect
Self-Reflection
Your thoughts about the hardest part in HTML Attributes.
_________________________________________________________________________________
_________________________________________________________________________________
Things you learned doing the task and throughout this lesson.
_________________________________________________________________________________
_________________________________________________________________________________
6. Summative Assessment
There will be a Summative Assessment after Lesson 7.

7. Closure
Cheat Sheet
Write the HTML attributes in your index card that would be useful during a quiz.
References

“Programming Using WebTechnology” iBook IT Series Textbook 2019 Ed. iBook Publishing, Inc. by Arlene A.
Velasquez et. al

Programming Interactive Courseware

Checked: oct 14, 2020