School: Rio Chico National High School Grade Level: 8

MATATAG K to 10
Name of Teacher: DONNA MAY Z. PADOLINA Learning Area: SP – ICT 8 (Web Design)
Curriculum - Lesson
Exemplar Teaching Dates and Time: Sept. 29 – Oct. 4, 2024 Quarter: 2nd

I. CURRICULUM CONTENT, STANDARDS, and LESSON COMPETENCIES

Day: 1 Day: 2 Day: 1 Day: 2 Day: 1
A. CONTENT: Basic body tags Tags Headings Division of Pages (DIVs) Attribute codes
Lesson____: Lesson 1 Lesson 1 Lesson 2 Lesson 2 Lesson 3
The learner demonstrates The learner demonstrates The learner demonstrates The learner demonstrates The learner demonstrates
basic understanding of basic understanding of basic understanding of basic understanding of basic understanding of
terminologies, history, terminologies, history, terminologies, history, terminologies, history, terminologies, history,
principles of creating an principles of creating an principles of creating an principles of creating an principles of creating an
effective web page, effective web page, including effective web page, including effective web page, effective web page, including
including an in-depth an in-depth consideration of an in-depth consideration of including an in-depth an in-depth consideration of
B. Content
consideration of information architecture. information architecture. consideration of information architecture.
Standards
information architecture. Become familiar with graphic Become familiar with graphic information architecture. Become familiar with graphic
Become familiar with design principles that relate design principles that relate Become familiar with design principles that relate
graphic design principles to the web and learn how to to the web and learn how to graphic design principles to the web and learn how to
that relate to the web and implement these theories implement these theories that relate to the web and implement these theories
learn how to implement into practice. into practice. learn how to implement into practice.
these theories into practice. these theories into practice.
By the end of the quarter, By the end of the quarter, the By the end of the quarter, the By the end of the quarter, By the end of the quarter, the
C. Performance the learners are able to learners are able to develop learners are able to develop the learners are able to learners are able to develop
Standards develop skills in analyzing skills in analyzing the usability skills in analyzing the develop skills in analyzing skills in analyzing the
the usability of a website. of a website. usability of a website. the usability of a website. usability of a website.
D. Learning Enumerates and describes Describes tags, and their Creates and customizes Divides page into sections Describes attribute codes.
Competencies different body tags. structures. different level of headings. using DIV element.

E. Instructional By the end of this lesson, By the end of the lesson, By the end of this lesson, By the end of this lesson, By the end of this lesson,
Objectives students will be able to: students will be able to: students will be able to: students will be able to: students will be able to:
1. Enumerate different 1. Define HTML tags and 1. Identify different 1. Define the purpose of 1. Define attributes in HTML
body tags used in explain their function in heading levels (<h1> to the <div> element in and explain their purpose.
HTML. web development. <h6>) in HTML. HTML. 2. Identify common
2. Describe the function 2. Enumerate common 2. Demonstrate how to use 2. Demonstrate how to attributes used in HTML
and structure of each HTML tags used in a various heading tags to use the <div> element tags (e.g., src, href, alt, id,
body tag. webpage. structure content. to divide a webpage class).
 3. Integrate appropriate 3. Describe the structure of 3. Customize heading tags into sections. 3. Demonstrate how to use
body tags in a simple at least three HTML tags using CSS for font size, 3. Use basic CSS to style attributes to modify HTML
HTML webpage. and demonstrate their color, and style. sections created with tags.
proper usage in an HTML 4. Create a basic webpage <div>. 4. Create an HTML
document. that includes different 4. Create a basic webpage document that uses
4. Create a simple HTML heading levels with divided into sections attributes to add
document using at least customized styles. using the <div> functionality and enhance
five different HTML tags. element. content.
Subject Integration: Subject Integration: English Subject Integration: English Subject Integration: English Subject Integration: English
ICT (Information and (technical descriptions) (using headings for content (organizing content with (describing the use of
Communication Values Integration: Attention structure) sectioning) attributes in sentences)
Technology), particularly to detail and proper Values Integration: Creativity Values Integration: Values Integration: Attention
focusing on HTML and basic structuring in coding. in customizing headings to Orderliness and proper to detail in coding and
F. Integration web design principles. enhance presentation. structure in designing web ensuring accuracy in attribute
Skills Integration: pages. usage.
Logical thinking, creativity
in web design, and practical
application of technical
knowledge.
II. LEARNING RESOURCES
Ppt presentation on basic Ppt presentation on tags. Ppt presentation on headings Ppt presentation on the Ppt presentation on attribute
body tags DIVs codes
III. TEACHING AND LEARNING PROCEDURES
A. Pre- Lesson Proper Review of Previous Lesson Review of Previous Lesson: Review of Previous Lesson: Review of Previous Lesson: Review of Previous Lesson:
a. Activating Prior Ask students to recall the Ask students to briefly recall Ask students to recall the Ask students to recall how Briefly recall the structure of
Knowledge
b. Establishing Purpose basic structure of an HTML the components of a basic structure of an HTML HTML is used to structure a HTML tags such as <img>,
of the Lesson document. HTML document (e.g., <html>, document, especially webpage, mentioning <a>, and <input>.
Highlight the importance of <head>, <body>). focusing on tags like <p> and previous lessons on Inform students that today’s
the <head> and <body> Mention that today’s focus <h1>. headings and paragraphs. lesson will focus on
tags. will be on describing different Mention that today’s lesson Briefly introduce that attributes, which are used to
Briefly revisit any tags HTML tags and understanding will focus on using headings today’s lesson will focus on add more information to
discussed before, such as their structures. (<h1> to <h6>) and how to dividing a page into sections these tags.
<title> or <meta>. customize them. for better content
Motivation: organization. Motivation:
Motivation/Introduction Display a simple webpage and Motivation: Show an image on a webpage
Show a simple HTML ask students: "How do you Show two webpages: one Motivation: and ask, "How does the
webpage and ask the class, think the browser knows what with no headings and Display a basic webpage browser know where to find
“What do you think makes to display on this page?" another with properly without sections, followed this image?"
 up the content displayed Lead into the idea that tags structured headings. by another page with Guide the discussion toward
here?” are like instructions for Ask, "Which one is easier to clearly divided sections attributes like src and explain
Introduce that today, they browsers, telling them how to read? Why do you think using colored boxes. Ask, how they provide essential
will learn how to control display content. headings are important in a “Which one is easier to information to the browser.
the structure and content webpage?" follow? Why do you think
displayed on the page using organizing content into
different body tags. sections is important?”
B. Lesson Proper Lecture and Discussion Introduction to HTML Tags: Introduction to HTML Introduction to the <div> Introduction to HTML
a. Developing and -Key Concepts: Define what an HTML tag is: headings Element Attributes
Deepening
Understanding Discuss the <body> tag and an instruction to the browser Explain the concept of Define the <div> tag as a
b. Making Generalization Define attributes as
its role in containing all the to perform a specific task like headings in HTML, which block-level HTML element
additional information inside
visible elements of a displaying text or adding range from <h1> (the largest) that groups content or
an HTML tag that provides
webpage. structure to the webpage. to <h6> (the smallest). other elements together. It
more details about how the
-Different Body Tags: Explain that tags usually come Emphasize the hierarchical is often used to create
tag should behave or be
List and explain common in pairs: an opening tag (e.g., nature of headings in sections on a webpage.
displayed.
tags used within the body: <p>) and a closing tag (e.g., structuring content. Show the basic structure of
<h1> to <h6> for headings </p>), except for self-closing Provide an example of using a <div> element: Attributes usually come in
<p> for paragraphs tags like <img>. headings to break down a name-value pairs, where the
<img> for images page into sections: <div> name is the type of
<a> for links Discussion on Common HTML <!-- Content inside the div information, and the value
<div> and <span> for layout Tags and Their Structures <h1>Main Title</h1> --> provides the actual data.
and styling purposes Provide and explain the <h2>Subheading</h2> </div>
<ul>, <ol>, and <li> for lists structure of some common <h3>Smaller Explain that the <div> tag Example:
<table> for tables HTML tags: Subheading</h3> does not have inherent <img src="image.jpg" alt="An
<h1> to <h6>: Heading tags meaning but is used for image description">
Open a simple HTML file for creating titles of different Discussion on Heading Levels: layout and styling purposes.
and demonstrate how to sizes. Describe each heading tag src is the attribute name, and
use the body tags: Structure: and demonstrate how to use Usage of <div> to Divide "image.jpg" is the value.
Add headings, paragraphs, <h1>Main Title</h1> them: Web Pages: Common HTML Attributes
and images to the <h1>: Used for the main title Demonstrate how <div> can Introduce some of the most
webpage. <p>: or most important heading be used to divide content common attributes and
Create a bulleted and Paragraph tag used to define a on the page. into sections on a webpage. explain their purpose:
numbered list. block of text. <h2>: Represents secondary Example code:
Add a link and discuss how Structure: headings or sections. src (source): Used in <img> to
hyperlinks work within the <p>This is a paragraph.</p> <h3> to <h6>: Used for <div> define the image file location.
body. <img>: Image tag used to subheadings of lesser <h1>Header href (hyperlink reference):
Show students how display images. It’s self-closing importance. Section</h1> Used in <a> to define the URL
modifying the tags can and requires the src attribute. Show an example webpage <p>This is the header of
change the appearance of a Structure: that uses multiple heading the webpage.</p> of the link.
webpage. <img src=”image.jpg” alt=”A levels. </div>
alt (alternative text): Used in
descriptive text”> <div>
<img> to provide a
<h1>About Our <h2>Main Content
description of the image for
<a>: Anchor tag used for Company</h1> Section</h2>
accessibility.
creating hyperlinks. <h2>Mission</h2> <p>This is the main
Structure: <h3>Our Goals</h3> content of the id: Used to assign a unique
<a <h4>Short-term Goals</h4> webpage.</p> identifier to an HTML
href=”https://www.example.c <h5>Projects</h5> </div> element for styling or
om”>Visit Example</a> <h6>Upcoming <div> scripting purposes.
Projects</h6> <h3>Footer Section</h3>
Activity: Identifying Tag <p>This is the footer of class: Used to group similar
Structures: Hands-On Practice: the webpage.</p> elements for CSS styling or
Project a simple HTML code Creating and Customizing </div> JavaScript interactions.
snippet and ask students to Headings: Point out how <div> is used Show examples for each
identify the tags used in it. to group the header, attribute:
Example: Ask students to open their content, and footer into
<h1>Welcome to My HTML editor and write a separate blocks. <a
Website</h1> webpage with three different href="https://www.example.c
<p>This is an example of a levels of headings (<h1>, Ask students to open their om">Click here</a>
paragraph.</p> <h2>, and <h3>). HTML editor and create a <img src="image.jpg" alt="A
<a webpage divided into three beautiful scenery">
href=”https://www.example.c <h1>Welcome to My sections: a header, a main
om”>Click here to visit Website</h1> content area, and a footer. <div id="header">Website
Example</a> <h2>About Us</h2> Provide them with a Header</div>
Students will point out the <h3>Our Services</h3> template to follow: <p class="content">This is a
structure of each tag and paragraph with a class.</p>
describe its function. <div>
<h1>My Webpage
Hands-On Practice: Writing Header</h1>
Hands-On Activity: Using
HTML Code: </div>
Attributes in HTML Tags
Ask students to open their <div>
HTML editor and write a <h2>Main Content</h2> Ask students to open their
simple webpage that includes <p>This is where the HTML editor and create a
the following tags: main content goes.</p> simple webpage using tags
<h1>, <p>, <img>, <a>, and </div> with attributes.
<div>. <div>
Provide a sample layout for
Example code structure: <h3>Footer Section</h3>
 <h1>My First Webpage</h1> <p>Footer information students to modify:
<p>This is a paragraph on my here.</p>
<h1>My First Webpage</h1>
webpage.</p> </div>
<img src=”image.jpg” alt=”A <p class="intro">Welcome to
description of the image”> my webpage.</p>
<a
href=”https://www.example.c <a
om”>Visit Example</a> href="https://www.example.c
om">Visit Example</a>
<img src="image.jpg" alt="A
description of the image">
Instruct students to change
the href attribute to their
favorite website and modify
the alt text for the image.
Divide the class into small Review the key concepts Review the importance of Recap the key points: how Review the purpose of
groups and ask each group covered: using different heading levels the <div> element is used to attributes in HTML and their
to write the HTML code for What HTML tags are, the to organize content. group and organize content role in providing extra
a simple webpage structure importance of structure, and Recap how to customize on a webpage, and how CSS information to HTML tags.
using at least 3 body tags how each tag serves a specific headings with CSS properties can be used to visually Recap common attributes
they’ve just learned. function in a webpage. such as font-size, color, and separate those sections. (src, href, alt, id, and class)
Provide them with a Call on students to describe text-align. Ask a few students to and their usage in common
template to fill in the tags one tag and its structure from Ask students why describe the purpose of the HTML elements.
they want to use. their hands-on activity. customizing headings can <div> tag and why it’s
Students will input the code enhance the visual appeal of important for structuring Assessment
C. Post-Lesson Proper
a. Evaluating Learning on computers and test the Assessment: a webpage. webpages. Conduct a short oral quiz:
b. Remarks output in a browser. Conduct a quick oral quiz: -What is the purpose of the
c. Reflection
-What is the function of the Assessment Assessment: src attribute in an <img> tag?
<h1> tag? -What is the purpose of the Conduct a quick oral quiz: -How is the href attribute
-How does the <img> tag <h1> tag? -What is the purpose of the used in a hyperlink (<a>)?
differ from the <p> tag? -How can you change the <div> element in HTML? -Why is the alt attribute
-Why is it important to use color of an <h2> heading -How can you use CSS to important for images?
proper structure in HTML? using CSS? add a border to a <div>
-What are some reasons for section?
using different heading levels -Why is it helpful to divide a
on a webpage? webpage into different
sections?
 Remarks: Remarks: Remarks: Remarks: Remarks:

Prepared by: Checked: APPROVED:

DONNA MAY Z. PADOLINA ALMA G. PAR CARLOS G. CORPUZ, PhD
Teacher III Head Teacher III School Principal IV