Republic of the Philippines

DEPARTMENT OF EDUCATION
Region IV A– CALABARZON
DIVISION OF LAGUNA
District of Alaminos
Alaminos Integrated National High School

INSTRUCTIONAL PLAN

SUBJECT: Grade 12 – Computer Programming (.Net Technology).

CONTENT: Create a Web page that can dynamically adapt its layout.
CONTENT STANDARD: The learners demonstrate an understanding of the principles and
concepts in performing programming in HTML5 with JavaScript and
CSS3.
PERFORMANCE STANDARD: The learners independently demonstrate the programming in HTML5
with JavaScript and CSS3.
LEARNING COMPETENCY: Create a Web page that can dynamically adapt its layout to match
different form factors. (TLE_ICTP.NET 11-12PPHJC-IIIh-j-IVa-d-
32)
I. OBJECTIVES:
1. define what is a static and dynamic webpage,
2. integrate the importance of migrating static webpage to dynamic webpage;
3. create a dynamic website for Alaminos Integrated National High School.

II. SUBJECT MATTER:

A. TOPIC: Static Vs Dynamic Web Page
B. REFERENCES:
 Static Vs Dynamic Web Design
https://www.spiderwriting.co.uk/static-dynamic.php
 PHP Scripting Language
https://www.w3schools.com/php/default.asp
 The importance of having a good school website
https://www.webanywhere.co.uk/blog/2016/04/importance-good-school-website/
 Universities Websites
www.dlsu.edu.ph, www.lspu.edu.ph, www.pup.edu.ph, www.up.edu.ph

C. MATERIALS:
DLP Projector, Laptop, Desktop Computers, Lapel with Microphone and Whiteboard.

III. LEARNING TASKS:

A. DAILY ROUTINE/CLASSROOM MANAGEMENT(2 minutes)
Greetings, Checking of attendance
B. REVIEW OF THE PREVIOUS LESSON(3 minutes)
What are the different HTML Form Objects?
C. MOTIVATION/PRIMING ACTIVITY(5 minutes)
Teacher will show pictures of the websites of some universities. The teacher will ask some questions.

1. How important for a school to have a good website?

2. What are some features/links of those websites?
3. What do you think will be the advantage of a school for having a good website compared to other
schools that do not have?
D. ACTIVITY:(5 minutes)
Based on last session, the learners are grouped into 4 members each group. Each group will
create a website that will serves as the official website for Alaminos Integrated National High School.
Students will be asked, in creating a website for a school particularly for AINHS, what are the
important links/contents the website should have? Students will answer the important links/features
that the website must have.
E. ANALYSIS:(5 minutes)
The objective of the activity is to let the learners identify what are the different features that AINHS
website should have. Also by identifying the features, learners will explain the importance of each
feature. Here are the questions that may lead to the analysis of the lesson.

1. What are links and features that AINHS website should have?
2. Explain the importance of each links and feature.

F. ABSTRACTION:(34 minutes)
Teacher will present a video that shows comparison between static and dynamic website. After
showing the video, teacher will discuss the lesson between static and dynamic website
1. Static VS Dynamic Website Design

There are basically two main types of website - static and dynamic.
A static site is one that is usually written in plain HTML and what is in the code of the page is
what is displayed to the user.

A dynamic site is one that is written using a server-side scripting language such as PHP, ASP,
JSP, or Coldfusion. In such a site the content is called in by the scripting language from other files
or from a database depending on actions taken by the user.

Relative merits of static and dynamic websites

Static sites - advantages

Flexibility is the main advantage of a static site - every page can be different if desired, to match
the layout to different content, and the designer is free to put in any special effects that a client
may ask for in a unique way on different pages. For instance an author may want a different
theme for a different book and associated pages or perhaps for a series of books, in order to match
the cover designs or the context of the stories.

Cost is generally lower up-front than a dynamic site.

Static sites - disadvantages

The main problem with any static site appears when you wish to update the content. Unless you
are conversant with HTML and the design methods used in the site then you have to go back to
the designer to have any content changes made. This may be perfectly ok when a new page is
required which needs design input, but if all you want to do is change some text then it can be a
nuisance for both client and designer.

The second main problem is scalability. If you wish to sell products on your site and you have a
lot of them then you may have to construct individual pages for each one, which can take
considerable time, effort and cost.

Costs - there are ongoing costs for updating the content.

 Dynamic sites - advantages

The main advantages of dynamic sites are that by connecting them to databases you can easily
pull in information in an organised and structured way to create product pages or categories of
related products sorted in a variety of different ways depending on how the user wants to view
them.

This ability to connect to a database means that you can also create a content management system
- an interface which allows the client to input and manage data via a web-based series of
administration pages. That content can be text for their pages and images to go along with the
text, or items in their product range with categories, specifications, short and long descriptions,
images, etc. In both these cases it can be as simple or as complex as the client requires.

There are little or no ongoing costs unless there is a change in the basic design or an extra
capability added.

Dynamic sites - disadvantages

The design of a dynamic site is more fixed than a static one because many of the pages are
essentially a template into which data and content is poured to create multiple pages of a similar
type. So for instance all your product pages will be essentially the same page layout with different
data being displayed. While some customisation cabability can be built in it is usually quite
limited, such a selecting from a set of pre-defined options. Individual layout changes to particular
pages are not usually possible.

Costs are higher initially than for a static site, and additional functionality may also cost more,
particularly if it's something that wasn't envisaged originally and requires re-writing of the core
code or database.

G. APPLICATION/EVALUATION:(5 minutes)
Create a website for Alaminos Integrated National High School. Your website should have the
following links/features.
 Homepage
 About Us
o History
o Mission and Vision
o Faculty and Staff
o Location Map & Direction
o Contact Info
 Admission
o Principal’s Welcome
o Programs Offered
o Requirement and Process
o FAQ’s
 Buildings and Facilities
 School Calendar and Activities
 Building the whole school website takes a long time that’s why for this week the learners will only
focus on one of the links and features of the website. Each week, each group will build the website
links/features one by one until they finish the whole website. Every week the teacher will ask the
learners to submit their Journal containing the accomplished activities done by each members of the
group to monitor the learners progress.

Learners will be graded using the following Criteria/Rubric

Appearance – 10%
Quality content – 20%
Navigation – 20%
Right message – 20%
Mobile version – 20%
Engaging– 10%

IV. CLOSING/ASSIGNMENT:(1 minute)

To improve the design of your website, research and study Bootstrap and Cascading Style Sheet.

Prepared by:

JOSHUA F. MADERA
Master Teacher II

Observed by:

MELODY I. CUBE MARIE KRIS P. LATADE

Head Teacher I – TLE Master Teacher II – TVL

SANTIAGO F. FAJILAGO JR., Ed. D

Principal III