Detailed Lesson Plan
I. Learning Objectives
At the end of the lesson, the students should be able to:
a. identify the basics of web programming;
b. explain the importance of web programming; and
c. program the basic codes of HTML and CSS.
II. Subject Matter:
Materials: Powerpoint presentation
Projector
Laptop
Reference: www.w3schools.com
https://www.techpinas.com/2011/07/top-10-most-visited-websites-in.html
Values: Cooperation during the discussion
Respect to the ideas of the students
III. Learning Experiences
Teacher’s Activity Students’ Activity
A. ACTIVITY
Good morning/afternoon, class!
Good morning/afternoon, Sir!
Kindly stand up for the prayer. Ms.
_____ please lead the prayer. Praise be thy name of Our Lord Jesus
Christ. Now and forever. Amen.
Before you take your sits, kindly pick
up the pieces of papers and plastics and
arrange your chairs properly.
Class beadle, is there any absentees
for today? None, Sir.
Very good, class! Keep it up.
Before we proceed to our topic today,
let me ask you a question.
What comes into your mind when you
hear the word “WEBSITE”?
(Students raise their hands)
Yes, Ms.____?
Website is a collection of publicly
accessible, interlinked Web pages that
share a single domain.
1
Thank you, Ms. ____.
Website is also a group of World Wide
Web usually containing hyperlinks to
each other and made available online by
an individual, company, educational
institution, government, or organization.
B. ABSTRACTION
I can see that you are already familiar
with the meaning of website. I have here
images of some websites that you may
have already visited.
(The teacher will flash the first image)
Who can tell me if what website is
this? Yes, Mr./Ms. _____?
Sir, that is very common and well-
known as Facebook.
How about this one? Yes, Mr./Ms.
_____? That is Google, Sir.
Next picture. Who can answer?
Yes, Mr./Ms. _____?
It’s a video sharing service that
allows you to watch videos posted by
other users and upload videos of their
own. Youtube, Sir!
That is correct! How about this one?
Yes, Mr./Ms. _____? Lazada, Sir!
How about the next picture. Who can
answer? Yes, Mr./Ms. _____?
Sir, that’s Manila Bulletin.
What website is this? Yes, Mr./Ms.
_____? It’s Netflix, Sir!
How about the next picture. Who can
answer? Yes, Mr./Ms. _____? Sir, that’s Shopee.
Who can answer the last picture?
Yes, Mr./Ms. _____? Yahoo, Sir.
C. ANALYSIS
Today, we are going to discuss about
web programming.
What does web programming means?
Web programming refers to the
2
writing, mark up and coding involved in
Web development, which includes Web
content, Web client and server scripting
and network security.
What is the purpose of creating a
website? Yes, Mr. ___? To connect, interact with others
through internet.
Thank you, Mr. ____. Any other
answer? Yes, Ms.____? For business purposes and
transactions.
That’s right. Now, let’s identify the
different tools used in web programming.
First tool is the browser. Browser is a
computer program used for accessing
websites or information on a network.
Who among you knows any example
of browser? Yes, Mr./Ms. _____? An example of this is Chrome and
Mozilla Firefox.
That’s right. Thank you.
Next is the text editor. This is where
you create your personalized website.
Who can give an example of text
editor? Yes, Mr./Ms. _____?
Sir, an example of text editor is
notepad++, atom, sublime text and text
wrangler.
Very good! Now, let’s move to the
platform that we will use in creating a
website which is the html.
But before that, what does HTML
stands for? Yes, Mr./Ms. _____?
Sir, HTML stands for Hyper Text
Markup Language.
That’s correct! Thank you.
HTML or Hyper Text Markup Language is
the standard markup language for
creating Web pages.
HTML elements are represented by
tags which labels pieces of content such
as "heading", "paragraph", "table", and
so on. Browsers do not display the HTML
tags, but use them to render the content
of the page.
(The teacher will show an example of
html code that will run on the browser.)
3
The <html> element is the root
element of an HTML page.
The <head> element contains meta
information about the document.
The <title> element specifies a title
for the document.
The <body> element contains the
visible page content.
The <h1> element defines a large
heading.
The <p> element defines a paragraph.
Class, do you have any questions?
(a student raises his/her hand)
Yes, Mr./Ms.____?
Sir, after you’ve finished coding, how
would you save the file and what is the
file extension?
That’s a wonderful question! Thank
you for asking.
What you will do is save the file on
your computer. Select File > Save as in
the Notepad menu.
Name the file "index.htm" and set
the encoding to UTF-8 (which is the
preferred encoding for HTML files).
Is it clear, Mr./Ms.____?
Yes, Sir. Thank you.
Now, if you don’t have any questions
about html let’s proceed to CSS. Are you
familiar with that?
Not really, Sir.
If HTML stands for Hyper Text Markup
Language, what does CSS stands for?
Anyone? Yes, Mr./Ms.____?
Sir, CSS stands for Cascading Style
Sheet.
Very good!
CSS or Cascading Style Sheet is a
4
language that describes the style of an
HTML document. It also describes how
HTML elements should be displayed.
Here is an example of CSS:
Why Use CSS?
CSS is used to define styles for your
web pages, including the design, layout
and variations in display for different
devices and screen sizes.
D. APPLICATION
Since we have already discussed
HTML and CSS, who wants to volunteer
on how to save a HTML file? (Students raised their hands and the
teacher will call one volunteer)
(The teacher will guide the student on
how to save a HTML file)
Class, do you have any questions? None, Sir!
Since you don’t have any questions.
Kindly get ¼ sheet of paper and we will
be having a short quiz.
IV. Evaluation
1-5. Give 5 examples of websites.
6-7. Give at least 2 examples of browser.
8. Give one example of a text editor.
5
9. This is a computer program used for accessing websites or information on a
network. An example of this is Chrome and Mozilla Firefox. What is it?
10. This is a language that describes the style of an HTML document.
V. Assignment
Research in the internet about the following:
1. What is Javascript?
2. Find 1 HTML, CSS and JAVASCRIPT code printed in a bond paper.
