Scribd
Upload
61 views4 pages

DLL 1

This document outlines a lesson plan for teaching 9th grade computer science students about CSS selectors. The lesson plan includes objectives, content, learning resources, and procedures. Students will learn about different types of CSS selectors like element selectors, class selectors, and ID selectors. They will practice applying CSS selectors in HTML code. Formative assessments include students creating HTML code using CSS selectors and answering multiple choice questions to evaluate their learning.

Uploaded by

jazh ladjahali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
61 views4 pages

DLL 1

This document outlines a lesson plan for teaching 9th grade computer science students about CSS selectors. The lesson plan includes objectives, content, learning resources, and procedures. Students will learn about different types of CSS selectors like element selectors, class selectors, and ID selectors. They will practice applying CSS selectors in HTML code. Formative assessments include students creating HTML code using CSS selectors and answering multiple choice questions to evaluate their learning.

Uploaded by

jazh ladjahali
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

GRADE 9 COMPUTER: MR.

JHAIZAR LADJAHALI

GRADE LEVEL QUARTER/DOMAIN Week 3 DAY 2 PAGE NO.


9 4TH Quarter/ CSS 8

I. OBJECTIVES Date February 12, 2019


A. Content Standard The learners will be able identify the types of CSS Selectors and their uses in
HTML.
B. Performance Standards The learner’s will be able to apply knowledge and skill in CSS selectors.

The learners should be able to.


a. Discuss CSS Selectors
b. execute the proper usage of CSS Selectors in HTML,
C. Learning Competencies c. Enumerate the proper steps in inserting CSS Selectors
Objectives Write the LC code for
each At the end of the lesson, the students should be able to.
a. Define what CSS is.
b. identify the types of CSS Selectors and their uses in HTML,
c. state the importance of using CSS Selectors in HTML.

II. Content Web Design and Development CSS Selectors


III. LEARNING RESOURCES
D. References
1. Teacher’s Guide pages HTML5, CSS3, JavaScript by Mapua Information Technology Center pp. 64-65
2. Learning Materials pages www.w3schools.com/cssref/css_selectors
3. Textbooks pages
4. Additional Materials from
Learning Resource Laptop, Notepad Application, PowerPoint presentation, LCD TV, HDMI cable,
5. (LR) portal Clicker

1. Materials
a. Cartolina
b. Marker
c. Crayon
d. Manila Paper
e. Scotch tape

E. Other Learning Resources Computer Laboratory


IV. Procedure
A. Reviewing previous lesson or The students will identify the parts of a CSS Syntax.
presenting the new lesson
Elicit (5 min)

h1 {color: blue; font-size: 12px ;}

B. Establishing a purpose for the Make it bright – The class will be divided into six groups which they will be
lesson Engage (5min) given a printed black & white image. They have the freedom to put a color or
design on the printed image.

C. Presenting examples/instances
of the new lesson
D. Discussing new concepts and CSS Selectors are used to “find” (or select) HTML elements based on their
practicing new skills # 1 element name, id, class and more.
Explore (15 min) • Also known as tag name.
• It ensures that a style is only applied to one or more set page elements.

The Element Selector


• Selects elements based on the element name.
Example:

<p> That’s all! </p>

Element Name
Class Selector
• Selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.)
character, followed by the name of the class.
Example:

.main_text {
color: #f00;
}

ID Selector
 Uses the id attribute of an HTML element to select a
specific element.
 The id of an element should be unique within a page, so the
id selector is used to select one unique element.
 To select an element with a specific id, write a hashtag (#)
character, followed by the id of the element.
Example:

#first_paragraph {
font-weight:bold;
}

Code: <!DOCTYPE html>


<head>
<style type="text/css">
<!--
p{
font-size: 0.8em;
}
.main_text {
color: #f00;
}
#first_paragraph {
font-weight:bold;
}
-->
</style>
</head>
<body>
<p id="first_paragraph" class="main_text"> Let's do
this! </p>
<p class="main_text"> Let's get it on! </>
<p> That's all! </p>
</body>
</html>

Output:
E. Developing mastery (leads to Activities:
formative Assessment 3)
Explain 20 min The class will be divided into six groups and let the students create a HTML
code with the proper usage of tags and CSS Selectors. They will write the codes
on a given material (cartolina). The activity will be supervised by the teacher.
Safety precautions and group cooperation should be observed.
F. Finding practical applications Example Classification Explanation
of concepts and skills in daily h1 Type Selector Selects an element by its type
living tagline Class Selector Selects an element by the class
Elaborate ( 5 min)
G. Making Generalizations and The teacher will call volunteers to complete the following phrases:
Abstraction about the Lesson.
I learned that: ___________________________________________
I realized that: ___________________________________________
I will: __________________________________________________
H. Evaluating Learning A sheet of paper will be provided for the students to serve as an answer sheet.
Multiple Choice.
Read each item carefully and choose the best answer. Write your answer on the
blank space provided.

_____1. How do you select an element with class “love”?


a. –love
b. #love
c. .love

_____2. Which of the following is the other term for selector?


a. hash tag
b. tag name
c. class

_____3. How do you select an element with id “pure_heart”?


a. #pure_heart
b. _pure_heart
c. .pureheart

_____4. Which of the following is used to find HTML elements based on their
element name, id, class and more?
a. Syntax
b. Selectors
c. CSS

_____5. Which of the following is the correct CSS syntax for class selector?
a. .good {font-size: 12px;}
b. #good {color:blue;}
c. good {font-family: Arial;}

I. Additional Activities for Follow up agreement:


Application or Remediation 1. Print in a short bond paper an example of HTML code that uses three
common types of CSS Selectors and identify each selector.

Advance agreement:
2. Define the following and give one example of HTML code. Write it on
your notebook.
• Child Selector
• Sibling Selector
V. REMARKS
VI. REFLECTION
A. No. of learners earned 80%in the
evaluation.
B. No. of learners who required
additional activities for remediation
who scored below 80%
C. Did the remedial lesson work? No. of
learners who have caught up with
the lesson.
D. No. of learner who continue to
require remediation
E. Which of my teaching strategies
worked well? Why did these work?
F. What difficulties did I encounter
which my principal or supervisor
can help me solve?
G. What innovation or localized
materials did I used/discover which
I wish to share with other teachers?

Prepared by:

JHAIZAR S. LADJAHALI
Student Teacher

Checked By:

MR. JUSTIN KYLO – MARC M. ORPIA


Cooperating Teacher

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy