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: Oct. 7-11, 2024 Quarter: 2nd

I. CURRICULUM CONTENT, STANDARDS, and LESSON COMPETENCIES

Day: 2 Day: 1 Day: 1 Day: 2
A. CONTENT: Division of Pages (DIVs) Attribute codes Displaying Text Styling Text
The learner demonstrates The learner demonstrates The learner demonstrates The learner demonstrates
basic understanding of basic understanding of basic understanding of basic understanding of
terminologies, history, terminologies, history, terminologies, history, terminologies, history,
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,
including an in-depth an in-depth consideration of an in-depth consideration of including an in-depth
B. Content
consideration of information architecture. information architecture. consideration of
Standards
information architecture. Become familiar with graphic Become familiar with graphic information architecture.
Become familiar with design principles that relate design principles that relate Become familiar with
graphic design principles to the web and learn how to to the web and learn how to graphic design principles
that relate to the web and implement these theories implement these theories that relate to the web and
learn how to implement into practice. into practice. learn how to implement
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,
C. Performance the learners are able to learners are able to develop learners are able to develop the learners are able to
Standards develop skills in analyzing skills in analyzing the usability skills in analyzing the develop skills in analyzing
the usability of a website. of a website. usability of a website. the usability of a website.
D. Learning Divides page into sections Describes attribute codes. Applies font styles, size, Applies font styles, size,
Competencies using DIV element. effects, tags, face effects, tags, face

E. Instructional By the end of this lesson, By the end of this lesson, At the end of the lesson, At the end of the lesson,
Objectives students will be able to: students will be able to: learners should be able to: learners should be able to:
1. Define the purpose of 1. Define attributes in HTML 1. Understand how to use 1. Understand how to
the <div> element in and explain their purpose. basic HTML tags to apply basic inline styles
HTML. 2. Identify common attributes display text on a to text in HTML using
2. Demonstrate how to used in HTML tags (e.g., webpage. CSS.
use the <div> element src, href, alt, id, class). 2. Use various text 2. Use different CSS
to divide a webpage 3. Demonstrate how to use formatting elements properties to change
into sections. attributes to modify HTML such as headings, text color, font size, font
3. Use basic CSS to style tags. paragraphs, bold, italics, family, and text
 sections created with 1. Create an HTML and line breaks. alignment.
<div>. document that uses 3. Write a simple HTML 3. Write an HTML
1. Create a basic webpage attributes to add document that displays document with styled
divided into sections functionality and enhance formatted text. text using inline CSS.
using the <div> content.
element.
Subject Integration: English Subject Integration: English Subject Integration: English Subject Integration: Art
(organizing content with (describing the use of (formatting text for web (designing attractive text
sectioning) attributes in sentences) writing), ICT (understanding presentations), ICT
F. Integration Values Integration: Values Integration: Attention HTML’s role in web (understanding how HTML
Orderliness and proper to detail in coding and development). and CSS work together for
structure in designing web ensuring accuracy in attribute web design)
pages. usage.
II. LEARNING RESOURCES
Ppt presentation on the Ppt presentation on attribute Ppt presentation on Ppt presentation on styling
DIVs codes displaying text text in html
III. TEACHING AND LEARNING PROCEDURES
A. Pre- Lesson Proper Review of Previous Lesson: Review of Previous Lesson: A. Review A. Review
a. Activating Prior Ask students to recall how Briefly recall the structure of Briefly review the concept of Review basic HTML tags
Knowledge
b. Establishing Purpose HTML is used to structure a HTML tags such as <img>, <a>, HTML and its role in creating from the previous lesson:
of the Lesson webpage, mentioning and <input>. webpages:  HTML is used to
previous lessons on Inform students that today’s  HTML (HyperText structure content on a
headings and paragraphs. lesson will focus on attributes, Markup Language) is webpage, and we’ve
Briefly introduce that which are used to add more the standard learned to display and
today’s lesson will focus on information to these tags. language for creating format text using tags
dividing a page into web pages. like <h1>, <p>, <b>, and
sections for better content Motivation: Questions: <i>.
organization. Show an image on a webpage o What is HTML used for? Questions:
and ask, "How does the o Have you ever looked at o Can anyone remind me
Motivation: browser know where to find the source code of a how to create a heading
Display a basic webpage this image?" webpage? in HTML?
without sections, followed Guide the discussion toward B. Motivation o How do we make text
by another page with attributes like src and explain Ask the class: bold or italic in HTML?
clearly divided sections how they provide essential  "Have you ever wondered B. Motivation
using colored boxes. Ask, information to the browser. how the text on a website Ask the class:
“Which one is easier to is displayed and  "Have you ever visited a
follow? Why do you think formatted? Today, we’ll website and noticed
organizing content into learn how HTML makes how different fonts,
 sections is important?” that happen." colors, and text styles
Show examples of websites make the page more
with different text formats interesting? Today,
(headings, paragraphs, bold, we’re going to learn how
italicized text, etc.). Explain to style text on a
that learning HTML enables webpage to make it look
you to control how text more attractive."
appears on a webpage. Show examples of plain vs.
C. Objectives Setting styled text on a webpage
State the objectives clearly toand discuss how CSS is used
the class: to add style.
 "By the end of this lesson, C. Objectives Setting
you will be able to displayState the objectives clearly
and format text using to the class:
basic HTML tags, including  "By the end of this lesson,
headings, paragraphs, you’ll be able to style text
bold, italic, and line using CSS, changing
breaks." colors, fonts, sizes, and
alignment."
B. Lesson Proper Introduction to the <div> Introduction to HTML A. Discussion/Activity ( A. Discussion/Activity
a. Developing and Element Attributes 1. Introduction to Basic HTML 1. Introduction to CSS for
Deepening
Understanding Define the <div> tag as a Tags for Text: Styling Text:
b. Making Generalization Define attributes as additional
block-level HTML element  Explain that HTML  CSS (Cascading Style
information inside an HTML
that groups content or uses tags to structure Sheets) is used to style
tag that provides more details
other elements together. It and display content the appearance of
about how the tag should
is often used to create on a webpage. Tags content on a webpage.
behave or be displayed.
sections on a webpage. are enclosed in angle We can use CSS to change
Show the basic structure of Attributes usually come in brackets (< >). the color, font, size, and
a <div> element: name-value pairs, where the 2. Basic Text Display Tags: alignment of text.
name is the type of  Headings (<h1> to 2. Using Inline CSS:
<div> information, and the value <h6>):  Inline CSS allows you to
<!-- Content inside the div provides the actual data. Headings are used to apply styles directly to
--> create titles and an HTML element using
</div> Example: subheadings. There the style attribute.
Explain that the <div> tag <img src="image.jpg" alt="An are six levels of
does not have inherent image description"> headings, with <h1> <p style="color: blue;">This
meaning but is used for being the largest and text is blue.</p>
layout and styling purposes. src is the attribute name, and <h6> the smallest. 3. Basic CSS Properties for
 "image.jpg" is the value. <h1>This is a Heading 1</h1> Styling Text:
Usage of <div> to Divide <h2>This is a Heading 2</h2>  Color: Changes the color
Common HTML Attributes
Web Pages: <h6>This is a Heading 6</h6> of the text.
Introduce some of the most
Demonstrate how <div> can  Paragraphs (<p>):
common attributes and
be used to divide content Paragraphs are used <p style="color: red;">This
explain their purpose:
into sections on a webpage. to structure text into text is red.</p>
Example code: src (source): Used in <img> to blocks.  Font Family: Changes
define the image file location. the font used to display
<div> <p>This is a paragraph of the text.
<h1>Header href (hyperlink reference): text.</p>
Section</h1> Used in <a> to define the URL  Bold (<b>) and Italic <p style="font-family:
<p>This is the header of of the link. (<i>): Arial;">This text is in Arial
the webpage.</p> alt (alternative text): Used in Bold and italic tags font.</p>
</div> <img> to provide a description are used to  Font Size: Changes the
<div> of the image for accessibility. emphasize text. size of the text.
<h2>Main Content
Section</h2> id: Used to assign a unique <p>This is <b>bold</b> and <p style="font-size:
<p>This is the main identifier to an HTML element <i>italic</i> text.</p> 20px;">This text is 20px in
content of the for styling or scripting  Line Breaks (<br>): size.</p>
webpage.</p> purposes. Line breaks are used  Text Alignment: Aligns
</div> class: Used to group similar to insert a break and the text to the left, right,
<div> elements for CSS styling or move the text to the center, or justify.
<h3>Footer Section</h3> JavaScript interactions. next line.
<p>This is the footer of <p style="text-align:
the webpage.</p> Show examples for each <p>This is line 1.<br>This is center;">This text is
</div> attribute: line 2.</p> centered.</p>
Point out how <div> is used <a Example of a Simple HTML Example of a Simple HTML
to group the header, href="https://www.example.c Document: Document with Inline CSS:
content, and footer into om">Click here</a>
separate blocks. <!DOCTYPE html> <!DOCTYPE html>
<img src="image.jpg" alt="A <html> <html>
Ask students to open their beautiful scenery"> <head> <head>
HTML editor and create a <title>My First HTML <title>Styling Text with
<div id="header">Website
webpage divided into three Page</title> CSS</title>
Header</div>
sections: a header, a main </head> </head>
content area, and a footer. <p class="content">This is a <body> <body>
Provide them with a paragraph with a class.</p> <h1>Welcome to My <h1 style="color: green;
template to follow: Webpage</h1> text-align:
 <p>This is a simple center;">Welcome to My
<div> paragraph of text.</p> Webpage</h1>
Hands-On Activity: Using
<h1>My Webpage <p>This is <b>bold</b> and <p style="font-family:
Attributes in HTML Tags
Header</h1> <i>italic</i> text.</p> Verdana; font-size:
</div> Ask students to open their <p>Here is a line 16px;">This is a paragraph
<div> HTML editor and create a break:<br>New line starts in Verdana font.</p>
<h2>Main Content</h2> simple webpage using tags here.</p> <p style="color: blue;
<p>This is where the with attributes. </body> font-size: 18px;">This text is
main content goes.</p> </html> blue and 18px in size.</p>
</div> Provide a sample layout for B. Guided Practice </body>
<div> students to modify: Activity: </html>
<h3>Footer Section</h3> <h1>My First Webpage</h1> Ask the students to open a B. Guided Practice
<p>Footer information text editor and create a Activity:
here.</p> <p class="intro">Welcome to simple HTML file that Ask students to open a text
</div> my webpage.</p> includes a heading, a editor and write an HTML
<a paragraph, and some bold file that uses inline CSS to
href="https://www.example.c and italic text. style a heading and a
om">Visit Example</a> Task: Create a webpage that paragraph.
displays your name as the  Task: Style a webpage to
<img src="image.jpg" alt="A heading and write a short include a heading in a
description of the image"> paragraph about your green color, a paragraph
Instruct students to change favorite hobby. Make one in Arial font, and another
the href attribute to their word bold and another paragraph with text
favorite website and modify italicized. aligned to the right.
the alt text for the image.
C. Post-Lesson Proper Review the purpose of Review the key concepts A. Generalization Recap the key points: how
a. Evaluating Learning attributes in HTML and covered: Ask the class: the <div> element is used to
b. Remarks
c. Reflection their role in providing extra What HTML tags are, the  "What are HTML tags, group and organize content
information to HTML tags. importance of structure, and and how do we use on a webpage, and how CSS
Recap common attributes how each tag serves a specific them to format text?" can be used to visually
(src, href, alt, id, and class) function in a webpage.  "Can someone explain separate those sections.
and their usage in common Call on students to describe the difference Ask a few students to
HTML elements. one tag and its structure from between headings describe the purpose of the
their hands-on activity. and paragraphs?" <div> tag and why it’s
Assessment Summarize: important for structuring
Conduct a short oral quiz: Assessment:  HTML tags like <h1>, webpages.
-What is the purpose of the Conduct a quick oral quiz: <p>, <b>, and <i>
 src attribute in an <img> -What is the function of the allow us to display Assessment:
tag? <h1> tag? and format text on Conduct a quick oral quiz:
-How is the href attribute -How does the <img> tag web pages. Headings -What is the purpose of the
used in a hyperlink (<a>)? differ from the <p> tag? help organize <div> element in HTML?
-Why is the alt attribute -Why is it important to use content, while -How can you use CSS to
important for images? proper structure in HTML? paragraphs are used add a border to a <div>
for blocks of text. section?
B. Assessment -Why is it helpful to divide a
Give a short quiz: webpage into different
1. What tag is used to sections?
create a heading in
HTML?
2. How do you make
text bold in HTML?
3. Write the HTML code
to create a paragraph
that includes italicized
text.

Remarks: Done Remarks: Done Remarks: Remarks: Remarks: Inter School

Prepared by: Checked: APPROVED:

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