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.