Course Description Republic of the Philippines

Department of Science and Technology

The course employs output-based learning and focuses on client Philippine Science High School
-side web development using HTML, CSS and Javascript. Cagayan Valley Campus
Masoc, Bayombong, Nueva Vizcaya

Course Objectives

1. Promote curiosity and independent exploration of WWW

resources;
2. Appreciate and critique a web page/site;
3. Use basic HTML tags and their attributes;
4. Manipulate the appearance of web page elements through
Cascading Style Sheets;
5. Perform the different stages involved in the web develop-
ment process;
6. Employ a variety of techniques to embed multimedia ele-
ments into a web page;
7. Understand and use the built-in Script objects for mathe-
matical calculations, string processing, date and time manip-
ulation;
8. Apply basic programming algorithms using a web scripting
language; and
9. Create web pages suitable for the client’s needs and specifi- Client-Side
cations, and adhere to web standards.
Web
Development
Grading System

Exercises (Seatworks, Lab Exercises 20%

Homework)
Quizzes 30%
Long Test/Practical Test/Project 50%
100%

Grade 9 Computer Science Course Outline

 TOPICS c. Canvas 6. Math and String Functions
 2D objects a. Math.random
First Quarter  Lines, shapes b. String.length
c. String.toUpperCase
A. Introduction to Web Development
I. More Cascading Style Sheets d. String.toLowerCase
1. How the Internet Works
1. Different units of measurements (em, pt, %, px, ps, ex) 7. Date and Number Object
2. 2/3 column, fluid layout
B. Basic HTML
O. Control Statements
1. doctype, html, head, title, body, meta
J. Advanced CSS 1. if, if..else, if..else..if, switch
2. div, span, ul, ol, h1 to h6
1. Text Links (link, visited, hover, active)
3. img, a, br, p, strong, em, del
2. Events in CSS (onmouseover, onmouseout, onclick) P. Quarter Project
4. embed, <|-- -- >
3. Image Sprite  Simple mini mind game integrating basic Javascript with
5. tag specific attributes
4. What’s new in CSS 3 HTML and CSS elements
 src of <img>
 Selectors
 href of <a>
 Background, border Fourth Quarter
 Transform
C. Tables Q. Javascript Forms as an Alternate User Interface and Interaction
1. table, tr, td, th, colgroup, col 1. HTML Form Tags
K. Layering
2. Attributes specific to tables
1. z-index  form, input (textbox, radio, password, button, check-
 rowspan, colspan of td/th box), buttons, submit, select, textarea
L. Quarter Project 2. Form Handling
D. Best Practices for Web Design and Layout
 Online newspaper through collaboration  onSubmit, onChange, onSelect, onBlur, onFocus
1. Wire framing 3. Form Properties
 value, disabled, selected, hidden
E. Introduction to Cascading Style Sheets (CSS) Third Quarter
1. Selectors (tag, id, class) M. Javascript Overview R. More Control Structures
2. Types (in-line, internal, external) 1. Syntax (Scripts elements, Javascript rules) 1. Loop Structure
3. Basic Syntax 2. Variable declarations and data types (primitive)  while, do..while, for
4. Properties 3. Operations (logical, arithmetic, comparison, assignments)
5. All properties for font, text, background, and box model 4. Basic Statements S. Arrays
6. float, position, width, height, top, bottom, left, right a. I/O Statements 1. Declaring Arrays
 Built-in window dialog boxes (alert, confirm, 2. Using Arrays
F. HTML Validation prompt)  Integer Index
1. W3C  getElementById, innerHTML and .src  Associative Array
b. Assignment statements and conditional statements 3. Sorting and Searching
G. Quarter Project  Traversing using loops
 Static website consistent between at least 2 web browsers N. Javascript Functions  for..in, for
1. Declaring and calling functions
Second Quarter 2. Event handlers T. User Input Validation
a. onClick (<button>) 1. Data Validation
H. What’s New in HTML 5?
1. Features
b. onLoad  null, number of characters, type of data, format of data,
3. Mouse Tracking trim, invalid characters, date, try..catch
a. Layout tags
a. ClientX, ClientY 2. Session Handling
 header, footer, nav, aside
b. Multimedia tags
b. ScreenX, ScreenY  Cookies
4. Processing Function Output
 video, audio
5. Commonly Used Javascript Objects U. Course Project