Final Demo

The National Teachers College
Quiapo, Manila
Basic Education
Junior High School Department
LESSON PLAN
Area: Information Communication Technology Date:

Subject: Computer 9 Time:
Grade and Section: Grade 9 - Narra Room:
I. Objectives
At the end of the lesson, 100% of the students with at least 85%
proficiency will be able to:
 discuss on how to create new project in adobe photoshop

 execute the proper usage of basic tools for creating new project,
 value the importance of using Adobe Photoshop.
II. Content
Topic: Adobe Photoshop

Sub – Topic: Basic steps in Adobe Photoshop, Creating a New
Project, Basic Tools
Materials:
1. Laptop, Adobe Photoshop Application, PowerPoint
presentation, LCD projector, HDMI cable, Clicker
2. Materials
a. Cartolina
b. Marker
c. Crayon
d. Manila Paper
e. Scotch tape
References:
 https://www.instructables.com/id/Basics-of-Photoshop/
 https://helpx.adobe.com/photoshop/how-to/ps-basics-
fundamentals.html
III. Procedure
A. Preparation
1. Daily routine
a. Prayer, Greetings and Checking of Attendance.
b. Review of the past lesson – The teacher will ask the
students to answer the following.
 What is Adobe?
 What is Adobe Photoshop?
 Parts of tool panel in basic tools?
c.
d. Motivation – Make it bright – The class will be
divided into six groups which they will be given a printed
black & white image. They have the freedom to put a color
or design on the printed image.
e. Unlocking difficulties:
 Selector • Syntax
 Element • Declaration
 Style
IV. Presentation
CSS Selectors are used to “find” (or select) HTML elements based on
their element name, id, class and more.
 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">

</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:
B. Application
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.
C. Generalization
The teacher will call volunteers to complete the following phrases:
I learned that: ___________________________________________

I realized that: ___________________________________________
I will: __________________________________________________
V. Evaluation
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;}
ANSWER KEY:
1. C
2. B
3. A
4. B
5. A
VI. Agreement
Follow up agreement:
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
Rubric scoring sheet (Application-50%)
Criteria Performance Indicator Score

5 3 1 0
The group The group The group The
are able to are able to are able to group are
Accuracy create to create to create to not able
(40%) create a create a create a to create
HTML code HTML code HTML code to create
and with a with a and with a a HTML
proper proper proper code and
usage of usage of usage of with a
tags and tags and tags and proper
CSS CSS CSS usage of
selectors selectors selectors tags and
without any with 1-3 with 3-5 CSS
mistake. mistakes. mistakes. selectors.
The group The group The group The
finished the finished the finished the group did
Time (10%) activity activity a activity not finish
within the minute within the 2 the
given time after the minute activity
frame given time extension
frame
Total:
Prepared by:
JHAIZAR S. LADJAHALI
Student Teacher
Checked By:
MR. JUSTIN KYLO – MARC M. ORPIA

Cooperating Teacher

Final Demo

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Final Demo

Uploaded by

Copyright:

Available Formats

The National Teachers College

Area: Information Communication Technology Date:

 discuss on how to create new project in adobe photoshop

Topic: Adobe Photoshop

The Element Selector

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

The teacher will call volunteers to complete the following phrases:

I learned that: ___________________________________________

A sheet of paper will be provided for the students to serve as an

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

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

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

_____4. Which of the following is used to find HTML elements based

Rubric scoring sheet (Application-50%)

Criteria Performance Indicator Score

MR. JUSTIN KYLO – MARC M. ORPIA

You might also like