COLLEGE OF ENGINEERING AND TECHNOLOGY
Notre Dame of Marbel University
City of Koronadal South Cotabato
SYLLABUS IN IT 132
COURSE NUMBER:
COURSE TITLE:
COURSE CREDIT:
PREREQUISITE:
PLACEMENT IN CURRICULUM:
IT 132
WEB DEVELOPMENT
3 credit hours
FACULTY:
OFFICE:
CONTACT NUMBER OR EMAIL:
CONSULTATION TIME:
Mrs. Hajah T. Sueno, MSIT
Computer Studies Department
jaitopacio@yahoo.com
4:30 – 5:30 MWF
Bachelor of Science in Information Technology (BSIT)
COURSE DESCRIPTION:
This course will provide Information Technology students with the knowledge of developing personal or commercial websites and deploy it to the World Wide Web. Students will be introduced to HTML and
other markup language(s) or scripting/Web authoring tools. A mixture of lectures and hands-on exercises will be delivered to help students absorb the lessons much faster and effectively.
COURSE OBJECTIVES:
At the end of the semester, the students will be able to:
1. Create static or dynamic web sites utilizing HTML, Cascading Style Sheet, and Scripting languages for web.
2. Develop a web application within the context of an enterprise environment.
3. Publish their personal websites to the World Wide Web.
NDMU: Computer Studies Department
SY 2013 - 2014
COURSE POLICIES/GUIDELINES
The students will be responsible for careful reading of their text book without which informed discussion each class meeting cannot take place. Class members contribute to each other's learning through
discussion, presentation, and sharing. The role of the professor will be that of a resource person and as such may once in a while include extended elaboration of issues and topics.
Academic Integrity
Academic integrity is expected of all students. The attempt by any student to present as his/her own work which he/she has not produced is regarded by the faculty and administration of NDMU as a serious
offense. Students are considered to have cheated if they turn in an assignment written in whole or in part by someone else. Students are guilty of plagiarism, intentional or not, if they copy from books,
magazines, Internet, or other sources without identifying and acknowledging those sources or if they paraphrase ideas from such sources without acknowledging them.
Students enrolled in this course who cheat on exams or quizzes or commit plagiarism, or copy another students work in any way, violate the Academic Integrity policy of the University and will receive an F (0
points) on the test or assignment in question. In addition, they will be reported to the College Dean for appropriate sanction.
Attendance
Each session is very important to your learning so you should avoid being absent. Unexcused and/or chronic lateness and early exits will be counted as an "absence." Missing a class does not excuse you from the
work assigned. You will be expected to complete and submit any assignments before or at the beginning of the next class session.
Class Management
All students are expected to come to class on time. Use of cell phones is prohibited. Put cell phones in silent mode.
COURSE REQUIREMENTS
Midterm
Examination
Quizzes
Laboratory Projects
Assignments
Total
40%
30%
20%
10%
100%
Final
Examination
Quizzes
Website
Laboratory Projects
Total
40%
20%
20%
15%
100%
NDMU: Computer Studies Department
SY 2013 - 2014
COURSE CONTENT
Objectives
At the end of the topic, the students will
be able to:


Discuss school policies, schedule,
classroom rules to be observed
Have a clear idea and understanding
of the course and its requirements
Objectives
At the end of the topic, the students will
be able to:







Describe the Internet and its
associated key terms
Describe the World Wide Web and
its associated key terms
Identify the types and purpose of
Web Sites
Discuss Web Browser and identify
their purpose
Define Hypertext Markup Language
(HTML) and the standards used for
Web development
Define Dynamic Hypertext Markup
Language (DHTML) and describe its
relationship to HTML
Discuss the Web development life
cycle
NDMU: Computer Studies Department
Topics
A. School /course policies and
guidelines
B. Classroom rules
C. Course coverage
Strategies/ Activities

Leveling of
expectations

Soliciting Feedback
Topics
I. Introduction to HTML
A.
B.
C.
D.
E.
What is Internet?
What is WWW?
What is HTML?
Tools for cresting HTML
documents
Web development life cycle.
SY 2013 - 2014
Materials


Strategies/ Activities



Lecture
Lab demonstration
Pen and paper test
PowerPoint
presentations
Class lists
Materials



PowerPoint
presentations
Lecture Notes
Video – What is
HTML?
Values Desired



respect, selfconfidence,
focus on priorities
willingness to share
observations and
personal experiences
Values Desired




Awareness
Creativity
Resourcefulness
Expressiveness
Expected Outcomes/Evaluation

Course schedule and list of
course requirements
Expected Outcomes/Evaluation


Participation in discussion
Quiz
Time Frame
2 hrs
Time Frame
3 hrs
Topics
Objectives
At the end of the topic, the students will
be able to:









Identify elements of a Web page
Start Notepad and describe the
Notepad window
Enable Word wrap in Notepad
Enter the HTML tags
Enter headings and paragraph of
text
Create an unordered, ordered,
or definition list
Save an HTML file
Use a browser to view a Web
page
Activate Notepad
Strategies/ Activities




Define how to create a link
Create jumping links
Make an image link
Describe absolute reference and
relative reference
NDMU: Computer Studies Department
Values Desired
Expected Outcomes/Evaluation
Time Frame


10 hrs
II. Creating and Editing A Web
page
A.
B.
C.
D.
Elements of a Web page
Starting HTML with Notepad
The Notepad Window
Entering HTML tags
 Elements and Basic Tags
 Formatting

Lists
 Entities
A. Using different browsers to
view Web page
B. Web page images
C. Improving the Appearance of
your Web site




Topics
Objectives
At the end of the topic, the students will
be able to:
Materials
Lecture
Lab demonstration
Group work
Pen and paper test



Strategies/ Activities
PowerPoint
presentations
Lecture Notes
Video - HTML
Editors




Materials
Awareness
Creativity
Resourcefulness
Expressiveness
Values Desired

Participation in discussion
Lab exercise: Project 1 Paragraphs
Quiz
Expected Outcomes/Evaluation
Time Frame

Lab exercises:
Project 2 – List
Project 3 – Links
10hrs

Hands- on Quiz
III. Creating Web pages with
Links, Images, and
Formatted text
A. Using links in a Web
page
B. Creating a Home page
C. Add a Text Link
D. Adding Email link
E. Viewing and testing
Links, printing a Web
page
F. Editing the Second Web
page
G. Adding image with
wrapped text
H. Adding a text link to
SY 2013 - 2014


Lecture
Lab demonstration




PowerPoint
presentations
Lecture Notes
Video
Readings on
HTML tags




Awareness
Creativity
Resourcefulness
Expressiveness
I.
another Web site
Adding links within Web
page
Topics
Objectives
At the end of the topic, the students will IV. Creating Tables in a Web site
be able to:
A. Creating Web page with
 Define table elements
tables
 Describe the steps used to plan,
B.
Planning, designing and
design,
coding a table
 and code a table
C.
Creating a Home page
 Create a borderless table to
with table
organize images
D. Using borderless tables
 Create a vertical menu bar with
to position images
text links
E. Creating tables with
 Create a borderless table to
borders
organize text
F.
Adding cellpadding,
 Create a horizontal menu bar
cellspacing, and caption
with text links
G.
Spanning rows and
 Create a table with borders
columns
 Change the horizontal alignment
of text
NDMU: Computer Studies Department
SY 2013 - 2014
Strategies/ Activities




Lecture
Lab demonstration
Presentation of
laboratory projects
Pen and paper test
Materials


PowerPoint
presentations
Lecture Notes
Values Desired





Awareness
Creativity
Resourcefulness
Expressiveness
Attention to details
Expected Outcomes/Evaluation
Time Frame

Lab exercises:
Project 4 – Tables and
Images
Project 5 – Tables and links
Project 6 – Tables and
Relative Links
10hrs


Quiz
Midterm Exam
Topics
Objectives
At the end of the topic, the students will
be able to:







•
•
Define terms relating to image
mapping
List the differences between
server-side
and client-side image maps
Name the two components of
an image
map and describe the steps to
implement an image map
Distinguish between
appropriate and
inappropriate images for
mapping
Sketch hotspots on an image
Create a table, insert an image
into a table, and use the
usemap attribute to define a
map
NDMU: Computer Studies Department
Strategies/ Activities
Materials
Values Desired
Expected Outcomes/Evaluation
Time Frame
V. Creating an Image Maps
A. Introduction to Image
maps
B. Creating an Image map
C. Using paint to locate x
and y coordinates
D. Creating a Homepage
E. Adding test to a table
cell
F. Coding the image map
using HTML tags
SY 2013 - 2014



Lecture
Website/Webpage
presentation
Group Work



PowerPoint
presentations
Lecture Notes
Video on
Creating Image
map
 Attention to details
 Awareness
 Respect for other’s
ideas
 Creativity
 Resourcefulness
 Expressiveness
 Nonjudgmental
attitude
 Cooperation I group
activity

Group presentation of
Image Map project
10hrs
Topics
Objectives
At the end of the topic, the students will
be able to:










Define terms related to frames
Describe the steps used to
design a frame
structure
Plan and lay out a frameset
Create a frame definition file
that defines
three frames
Use the <frameset> tag
Use the <frame> tag
Change frame scrolling options
Name a frame content target
Strategies/ Activities





Define terms related to frames
Describe the steps used to
design a frame
structure
Plan and lay out a frameset
Create a frame definition file
that defines
NDMU: Computer Studies Department
Values Desired
Expected Outcomes/Evaluation
Time Frame
VI. Using iFrames in a Web
site
A. Define terms related to
ifames
B. Describe the steps used
to design a iframe
structure
C. Plan and lay out a
iframe
D. Use the <iframeset> tag
E. Change frame scrolling
options
F. Name a iframe content
target
G. Target text or image
links to the iframe



Topics
Objectives
At the end of the topic, the students will
be able to:
Materials
Lecture
Lab demonstration
Website/Webpage
presentation


Strategies/ Activities
PowerPoint
presentations
Lecture Notes




Materials
Awareness
Creativity
Resourcefulness
Expressiveness


Values Desired
Lab exercises
Project 8 – iFrames
Hands- on Quiz
Expected Outcomes/Evaluation
10hrs
Time Frame
VII. Using Frames in a Web
site
A. Creating frames
B. Planning and lay
outing Frames
C. Creating a frame
definition file
D. Creating a header
page
SY 2013 - 2014





Lecture
Lab demonstration
Website/Webpage
presentation

PowerPoint
presentations
Lecture Notes






Awareness
Creativity
Resourcefulness
Expressiveness
Focus
Honesty



Lab exercises
Project 9 - Frames
Hands- on Quiz
Midterm Exam
10hrs





three frames
Use the <frameset> tag
Use the <frame> tag
Change frame scrolling options
Name a frame content target
E.
Creating a Frame with
frames
F. Creating a menu page
G. Viewing and testing
Web pages
H. Printing Webpages
Topics
Objectives
At the end of the topic, the students will
be able to:










Define terms related to forms
Describe the different form
controls and
their uses
Use the <form> tag
Use the <input> tag
Create a text box
Create check boxes
Create a selection menu with
multi options
Use the <select> tag
Use the <option> tag
NDMU: Computer Studies Department
Strategies/ Activities
Materials
Values Desired
Expected Outcomes/Evaluation
Time Frame
VIII. Creating Form in a Web
site
A. Creating Web page
forms
B. Creating a from in a
Web page
C. Adding radio buttons
and text area
D. Submit and reset
button
E. Organizing a form
using form groupings
SY 2013 - 2014




Lecture
Lab demonstration
Website/Webpage
presentation


PowerPoint
presentations
Lecture Notes
Video – Web
Design Practices






Awareness
Creativity
Resourcefulness
Expressiveness
Originality
Respect for
other’s ideas



Lab exercise
Project 11 - Forms
Quiz
Personal Website Outputs
 Student Philosophy
 Creative Resume
 About Me
 What’s New
5hrs
Topics
Objectives
At the end of the topic, the students will
be able to:












Describe the three different
types of CSS
Add an embedded style sheet to
a Web page
Change the margin and link
styles using an embedded style
sheet
Create an external style sheet
Change the body margins and
background using an external
style sheet
Change the link decoration and
color using an external style
sheet
Change the font family and size
for all paragraphs using external
style sheet
Change table styles suing
external style sheet
Use the <link> tag to insert a link
to an external style sheet
Add an inline style sheet to a
Web page
Change the text styles of a single
paragraph using inline style
sheets
Determined how to define style
classes
NDMU: Computer Studies Department
Strategies/ Activities
Materials
Values Desired
Expected Outcomes/Evaluation
Time
Frame
IX. Creating Style Sheets
A. Creating Style sheets
 CSS Introduction
 CSS Background
 CSS Text
 CSS Fonts
 CSS Links
 CSS Lists
 CSS Tables
 CSS Box Model
 CSS Outline
B. Working with classes
in style sheets
C. Adding style sheets to
a Web site
D. Adding embedded
style sheet
E. Adding external style
sheet
F. Linking to an External
style sheet
G. Adding inline style
sheet
SY 2013 - 2014



Lecture
Lab demonstration
Website/Webpage
presentation




PowerPoint
presentations
Lecture Notes
Readings on CSS
Properties
Video – CSS







Awareness
Creativity
Recreation
Resourcefulness
Expressiveness
Originality
Respect for
other’s ideas
 Focus
 Honesty






Lab exercises
Hands - Quiz
Personal Website Outputs
 Photo Gallery
 Contact Me
 Sitemap

Final Presentation of Individual
Websites
Student Website evaluation
Final Examination
20hrs
CLASS MANAGEMENT
1.
Basic Orientation of the Class Policy
 Attendance (for MWF – 10 absences, TTh – 7 absences). After the third absence, warning will be given. A student is required to present an admit slip from the office.
 Orderliness and cleanliness of the classroom
 Start and end the class with a Prayer.
 School Uniform, School Id, with proper haircut
2.
Students are encouraged to verify their grades if they have some questions.
REFERENCES
TEXT BOOK
Shelly, Gary, et al. (2006), HTML: Comprehensive Concepts and Techniques 3rd Ed, Philippine Edition, Cengage Learning
BOOKS
Goodman, Danny (2001), JavaScript Bible Gold Edition, John Wiley & Sons
Murdock, Kelly L., (2000), Java Script: Your Visual Blue Print for building dynamic Web Pages, Visual Publishing
ELECTRONIC SOURCES
Refsnes Data, (2012), HTML Tutorial, retrieved November 16, 2011 from http://www.w3schools.com/html/
NetKonteret, (2002), EchoEcho.Com Tutorials:HTML TUTORIAL, Retrieved from http://www.echoecho.com/html.htm
PageTutor, HTML Tutorial, Retrieved http://www.pagetutor.com/html_tutor/index.html
HTML.Net, HTML: Tutorial, retrived from http://www.html.net/tutorials/html/
HTS Learning Portal (2012), Materials and Resources, E-learning Portal for BSCS and BSIT Students, from , www.jai-csdomain.com
NDMU: Computer Studies Department
SY 2013 - 2014