NAMEI POLYTECHNIC INSTITUTE

123 A. Mabini St., Mandaluyong City

COURSE SYLLABUS
S.Y. 2017 – 2018

Course Title: Web Development Grade Level: Grade 8

Course Description: Web Development aims to produce and practice the creation of a web page with styles and designs since Internet is widely used as a source of
information today. It helps the learners to demonstrate undersatanding of Creative Design by applying the different concepts and skills on web page
making.

Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
FIRST QUARTER (UNIT 1: INTRODUCTION TO WEB DEVELOPMENT)
Lesson 1: The learner exhibits a deeper The learner shall be able  Define HTML  Preparatory  Recitation 3
A Brief History of HTML understanding on the to illustrate the historical  Illustrate the basic web Activities  Hands-On/ meetings
historical development of development of HTML. page structure 
 Overview of HTML Discussion Performance
 HTML Elements
HTML as well as its basic  Identify the HTML Test
concepts and elements.  Demonstration
elements
 XHTML  Group Activity  Paper and
 Determine the syntax for
 HTML5 SYNTAX Pencil Test
HTML  Book Activity
 HTML Editing
Software  Identify the most popular  Hands-on
 Web Browsers HTML editing software  Assignment
 Enumerate the different
web browsers used by
the users
 Familiarize oneself with
the HTML5 syntax
 Identify the new HTML
elements used in HTML5
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
 Create a simple website
using the basic HTML
elements
Lesson 2: The learner gets acquainted The learner shall be able  Identify the parts of  Preparatory  Recitation 3
Creating Your First HTML with the HTML structure as to create well-formed HTML structure Activities  Paper and meetings
Page: The HTML well as in creaing well-formed tags in an HTML page.  Define “tag” in HTML  Discussion Pencil Test
Structure tags.
 Discuss the purpose of  Demonstration
 HTML Tags tags  Book Activity
 Well-Formed Tags  Identify common HTML
 Empty Tags tags
 Write well-formed HTML
tags
Lesson 3: The learner relates the use of The learner shall be able  Create a simple  Preparatory  Recitation 3
Adding Titles, Headings, title, heading, line breaks, to accurately generate a webpage using a well- Activities  Hands-On/ meetings
and Paragraphs and horizontal rule tags in simple webpage formed HTML structure  Discussion Performance
creating a webpage. incorporating title, showing the use of title,
 Heading Tags  Demonstration Test
heading, line break, and paragraph, line break,
 Paragraph Tags horizontal rule tags.  Video  Paper and
and horizontal rule tags
 Line Breaks Presentation Pencil Test
 Horizontal Rules
 Hands-On
 Assignment
Lesson 4: The learner becomes familiar The learner shall be able  Differentiate an ordered  Preparatory  Recitation 3
Creating Lists with the different kinds of to effectively create and list from an unordered list Activities  Hands-On/ meetings
lists, their definitions, and the format list examples and  
 List Item Tag Define a glossary list Cooperative Performance
process of creating them. nest a listwithin a list.
 Ordered Lists  Identify the tags used for Learning Test
 Unordered Lists creating ordered and  Discussion  Paper and
 Definition Lists unordered lists, and a  Demonstration Pencil Test
 Nesting Lists glossary list
 Hands-on
 Create and format lists
 Book Activity
 Nest a list within a list
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
Lesson 5: The learner becomes familiar The learner shall be able  Format text using  Preparatory  Recitation 3
Formatting Text with th process of formatting to apply different character styles and Activities  Hands-On/ meetings
texts in HTML development. concepts in formatting physical style tags 
 HTML Text Brainstorming Performance
text in HTML  Format text within a Test
Formatting Tags
development.  Discussion
 Phrasing paragraph
 Demonstration  Paper and
Elements  Create a pre-formatted Pencil Test
text  Hands-On
 Group/Book
Activity
Lesson 6: The learner exhibits mastery The learner shall be able  Add links within a  Preparatory  Recitation 3
Working with Links and while working with links and to accurately add links webpage and between Activities  Hands-On/ meetings
Embedded Content embedded content. within a webpage and pages in a website  Discussion Performance
create links to other 
 Anchor Tag Create links to other  Demonstration Test
websites.
 Hyperlinks websites
 Hands-on  Paper and
 Link pages using Pencil Test
pathnames  Think-Pair Share
 Embed images, sounds,
and dynamic contents in
a webpage
Lesson 7: The learner becomes The learner shall be able  Identify the parts of an  Preparatory  Recitation 3
Adding Tables acquainted with the concepts to generate and modify HTML table Activities  Hands-On/ meetings
of HTML tables – its parts, an HTML table.  Create an HTML table  Discussion Performance
process of creation, and Test
formatting.  Format an HTML table  Demonstration
 Hands-on  Paper and
Pencil Test
 Book Activity
SECOND QUARTER (UNIT 2: INTRODUCTION TO CASCADING STYLE SHEETS)
Lesson 1: The learner justifies the The learner shall be able  Define “style” in the  Preparatory  Recitation 3
importance of using CSS in to efficiently identify the context of HTML Activities meetings
Overview of CSS  Hands-On/
web development. “styles” used in a certain  Identify the advantages  Group Performance
website.
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
in using CSS Discussion Test
 Recall significant events  Discussion  Paper and
in the history of CSS  Demonstration Pencil Test
 Hands-on
Lesson 2: The learner becomes familiar The learner shall be able  Discuss the three  Preparatory  Recitation 3
with the three methods in to effectively perform the methodsof using CSS Activities meetings
Understanding the CSS  Hands-On/
System using CSS as well as the steps in writing CSS  Describe how CSS styles  Discussion Performance
process in writing CSS styles. styles. are written Test
 Demonstration
 Define “selectors” in the  Hands-on  Paper and
context of CSS Pencil Test
 Book Activity
 Describe the different
types of selectors  Assignment

Lesson 3: The learner becomes The learner shall be able  Describe the common  Preparatory  Recitation 3
acquainted with the concept to accurately generate a CSS layout properties Activities meetings
How to Set Layout Styles  Hands-On/
of layout style and its webage using CSS  Identify the values used  Discussion Performance
properties. layout. for each layout property Test
 Demonstration
 Create a webpage using  Hands-on  Paper and
CSS layout styles Pencil Test
 Book Activity
Lesson 4: The learner exhibits mastery The learner shall be able  Describe the common  Preparatory  Recitation 3
on the process of creating to incorporate CSS styles CSS text, paragraphs, Activities meetings
How to Add Styles to  Hands-On/
Text, Headings, and CSS styles for text, headings, for text, paragraphs, and and heading style  Discussion Performance
Paragraphs and paragraphs. headings in creating a properties Test
webpage.  Demonstration
 Identify the values used  Paper and
for each property  Hands-on
Pencil Test
 Create a webpage using  Book Activity
CSS styles for text,  Assignment
paragraphs, and
headings
Lesson 5: The learner becomes familiar The learner shall be able  Add alist style rule  Preparatory  Recitation 3
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
Adding Styles to Lists with the process of adding to transform graphics into  Create graphic bullets Activities  Hands-On/ meetings
styles to lists. bullets.  Discussion Performance
Test
 Demonstration
 Paper and
 Hands-on
Pencil Test
Lesson 6: The learner becomes familiar The learner shall be able  Differentiate between  Preparatory  Recitation 3
with the process of setting to modify tables by fixed and automatic table Activities meetings
How to Create Table  Hands-On/
Styles table layouts and creating adding styles toits styles  Think-Pair Share Performance
table styles. borders.  Identify and describe Test
 Discussion
properties and values for  Paper and
adding styles to table  Demonstration
Pencil Test
cells  Hands-on
 Add styles to table
borders
Lesson 7: The learner exhibits mastery The learner shall be able  Discuss the  Preparatory  Recitation 3
in adding styles to to effectively utilize backgrounddeclarations Activities meetings
How to Add Styles to  Hands-On/
Backgrounds backgrounds. background styles  Identify the properties  Group Performance
declarations in adding and values used to style Discussion Test
styles to backgrounds. the background of a  Discussion  Paper and
webpage Pencil Test
 Demonstration
 Hands-on
 Book Activity
 Assignment
THIRD QUARTER (UNIT 3: INTRODUCTION TO DHTML)
Lesson 1: The learner grasps a deeper The learner shall be able  Differentiate the  Preparatory  Recitation 3
understanding on the concept to maximize the use of concepts of HTML and Activities meetings
Introduction to Document  Hands-On/
Object Model of Document Object Model Document Object Model DHTML  Group Performance
(DOM). (DOM).  Identify ways in which Discussion Test
DHTML operates with  Discussion  Paper and
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
different technologies  Demonstration Pencil Test
 Discuss how DHTML and  Hands-on
DOM arebeing used  Book Activity
 Describe how toset up
DOM
 Set up an element ID via
CSS
 Use the event handler to
properly configure
elements
Lesson 2: The learner grasps a deeper The learner shall be able  Larn the basics in  Preparatory  Recitation 3
understanding of what to incorporate the use of JavaScript Activities meetings
JavaScript and DHTML  Hands-On/
DHTML is as well as the JavaScript in producing  Know the  Interactive Performance
JavaScript structure. DHTML. basicJavaScript codes Discussion Test
 Understand how  Demonstration  Paper and
JavaScript came  Hands-on Pencil Test
aboutand evolved toits
current standard  Book Activity
 Know the guidelines  Assignment
forwriting JavaScript
scripts
 Identify the process by
which JavaScript works
with DHTML
 Know the rules in writing
JavaScript scripts
toproduce DHTML
 Learn how to utilize
JavaScript to produce
DHTML
Lesson 3: The learner realizes the role The learner shall be able  Know the different  Preparatory  Recitation 3
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
Commonly Used of JavaScript functions and to utilize commonly used JavaScript functions and Activities  Hands-On/ meetings
JavaScript Functions and operators in web JavaScript functions and operators  Discussion Performance
Operators development. operators.  Understand how and Test
 Demonstration
when to use the function  Paper and
or operator  Hands-on
Pencil Test
 Learn the output/ result  Book Activity
of a certain operator or  Assignment
function
 Identify a specific
function or operator and
describe its behavior and
operaion within a script
Lesson 4: The learner exhibits mastery The learner shall be able  Distinguish the different  Preparatory  Recitation 3
while working with objects, to incorporate various objects and proeprties Activities meetings
Working with Objects,  Hands-On/
Properties, and Methods properties, and methods. methods in creating  Know the various  Discussion Performance
DHTML. methods that can be Test
 Demonstration
applied in DHTML  Paper and
 Hands-on
 Learn the various output/ Pencil Test
results for certain  Group/Book
methods Activity
 Identify a specific  Assignment
function or operator and
describe its behavior and
operation within a script
 Understand what
comprises an object
 Describe the different
objects
 Understand the
relationship and
dynamics between
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
methods and properties
Lesson 5: The learner relates the role of The learner shall be able  Know what functionsare  Preparatory  Recitation 3
functions in creating an event to effectively generate and their roles in DHTML Activities meetings
Functions and Events  Hands-On/
or event handlers. event or event handlers. setup  Group Performance
 Identify the importance of Discussion Test
functions in relation to  Discussion  Paper and
events Pencil Test
 Demonstration
 Distinguish functions
from commands  Hands-on
 Learn how to create  Book Activity
event or event handlers  Assignment
 Know how to define
functions and assign
them to events or event
handlers
 Learn the various
methods of assigning
events or event handlers
Lesson 6: The learner gets acquainted The learner shall be able  Know the practical uses  Preparatory  Recitation 3
with the process of creating to incorporate the of alert statements and Activities meetings
How to Create Alert  Hands-On/
Statements alert statements. functions of variable and when to use them  Think-piar Share Performance
conditional statements in  Learn how to provide the Test
creating JavaScript  Discussion
JavaScript statement for  Paper and
staements. alerts  Demonstration
Pencil Test
 Gain knowledge on the  Hands-on
different common uses of  Book Activity
alert statements in
JavaScript
 Apply the use of a
variable and a
conditional statement to
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
produce a JavaScript
statement
 Learn how to add a
confirmation alert box to
verify a website
Lesson 7: The learner explains the The learner shall be able  Know how to present  Preparatory  Recitation 3
process of manipulating the to apply CSS styles in tabular data using tables Activities meetings
Add Style to Your Table  Hands-On/
border, background, padding, creating tables.  Learn how to produce a  Discussion Performance
alignment, and color table using CSS to apply Test
attributes of a table.  Demonstration
different ways of  Paper and
presenting table content  Hands-on
Pencil Test
 Learn that CSS codes  Group/Book
can be used externally Activity
 Learn the importance of  Assignment
having an external CSS
line of codes via CSS
being externally mapped
to your HTML page
 Understand the value of
using CSS to produce
the table instead of
providing a normal table
tag using only a normal
HTML table tag
command
 Know that reusing the
style sheet maintains
consistency of tables
across all web pages
FOURTH QUARTER (UNIT 4: WEB DEVELOPMENT AND PUBLISHING MANAGEMENT)
Lesson 1: The learner illustrates the The learner shall be able  Discuss the stages in  Preparatory  Recitation 3
meetings
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
The Web Development stages in a typical web to follow the web atypical web Activities  Hands-On/
Process development process. development process to developmental process  Discussion Performance
generate a web  Identify the usual Test
development project plan.  Demonstration
required pages or  Paper and
sections in a website  Hands-on
Pencil Test
 Create a web
development project plan
Lesson 2: The learner relates the The learner shall be able  Identify the important  Preparatory  Recitation 3
advantages and to illustrate what is an inclusions in a wb Activities meetings
Web Hosting and  Hands-On/
Publishing disadvantages of each using ideal web hosting hosting package  Discussion Performance
different type of web hosting. package.  Describe the different Test
 Demonstration
types of web hosting  Paper and
 Hands-on
 Compare the different Pencil Test
types of web hosting in  Book Activity
terms of advantages and  Assignment
disadvantages
Leson 3: The learner gets acquainted The learner shall be able  Define the following  Preparatory  Recitation 3
with the concepts of domain to illustrate the process terms: domain, domain Activities meetings
Domain Names and Web  Hands-On/
Hosts names as well as the process ofregistering a domain name, and URL  Discussion Performance
of registering it. name.  Identify the parts and Test
 Demonstration
structure of a domain  Paper and
name  Hands-on
Pencil Test
 Identify the meaning of  Assignment
common domain names
 Discuss how to register a
domain name
Lesson 4: The learner relats the The learner shall be able  Explain why web  Preparatory  Recitation 3
importance of web usability. to compare and usability and web Activities meetings
Web Usability Standards  Hands-On/
contrastthe different usability testing are  Discussion Performance
categories of web important Test
usability standards.  Demonstration
 Distinguish between the  Paper and
 Evaluation/
Performance Learning Learning Time
Content Content Standard Performance
Standard Competencies Activities Frame
Task
categories of web  Hands-on Pencil Test
usability standards
Lesson 5: The learner justifies the The learner shall be able  Explain the importance of  Preparatory  Recitation 3
significance of web quality to compare and contrast web quality assurance Activities meetings
Web Quality Assurance  Paper and
assurance in web the different QA test  Distinguish between the  Group Pencil Test
development. areas. QA test areas Discussion
 Discussion
 Demonstration
 Book Activity
 Assignment
Lesson 6: The learner exhibits a deeper The learner shall be able  Explain the importance of  Preparatory  Recitation 3
understanding on to effectively critique how promoting a website Activities meetings
Promoting Your Web Site  Hands-On/
promotingwebsites. some websites are  Describe the different  Discussion Performance
promoted. ways of promoting a Test
 Demonstration
website  Paper and
 Hands-on
 Eplain how each method Pencil Test
of promotion can help  Book Activity
promote the website  Assignment
Lesson 7: The learner becomes familiar The learner shall be able  Identify key skills needed  Preparatory  Recitation 3
with the different skills to effectively evaluate in publishing and Activities meetings
Interdisciplinary Skills  Hands-On/
Needed in Publishing and needed topublish and one’s self to check managing websites  Group Performance
Managing a Web Site manage a website. his/her capability to  Discuss how different Discussion Test
publish and manage a skills contribute to
website.  Demonstration  Paper and
effectively publish and Pencil Test
manage websites  Hands-on

Materials Needed:
 Textbook, Interactive Board/Projector/TV, Whiteboard, Whiteboard marker and eraser, cartolina/manila paper, permanent marker, short/long bond paper,
speaker, Computer Units, and PowerPoint Presentations
Websites:
 https://www.upwork.com/blog/2014/03/web-development-101-web-developer/
 https://www.codeschool.com/beginners-guide-to-web-development
 https://www.w3schools.com/
 https://en.wikipedia.org/
 http://technokids.ph/t-lib
 https://css-tricks.com/
 http://www.htmldog.com/guides/css/beginner/
 https://www.w3.org/Style/CSS/Overview.en.html

Resources:
 Experiencing ICT: Web Development1, Computer Assisted Learning Corporation, Quezon City

Prepared by:

MS. ABIGAIL A. CORTEZ