Republic of the Philippines

UNIVERSITY OF ANTIQUE
Tario-Lim Memorial Campus
Tibiao, Antique
E-mail: [email protected]

COLLEGE OF COMPUTER STUDIES

COURSE SYLLABUS IN WEB SYSTEMS AND TECHNOLOGIES – INFOT 2

1st Semester 2021-2022
Revised as of August 2021

Vision
A leading university in science and technology by 2022

Mission
The University shall provide quality, relevant, and responsive scientific, technological and professional education and advanced training in different areas of specialization;
and shall undertake research and extension services in support to socio-economic development of Antique, the Filipino nation, and the global community.

Quality Policy
The University of Antique commits to hone global citizens thru the delivery of quality education of international standard anchored on scientific researches articulated
through responsive instruction, extension, and production, reinforced by effective and efficient support services and driven by quality management system.

We, in partnership with our stakeholders, shall strive for continual improvement considering the statutory and regulatory requirements, client satisfaction, and industry
dynamics while keeping the spirit of the Filipino and the ideals of an Antiqueño.
The College shall endeavour to achieve the following goals:
1. Provide quality IT education responsive to the needs of human development and social transformation.
Goals of the 2. Produce globally-skilled IT graduates committed to the life-long process of personal and professional improvement and service.
College 3. Conduct quality development research to generate new knowledge for technological advancement.
4. Improve quality of life in the Philippine society through community outrage services responsive to the needs of the clientele.

VAA- FM-001 Rev.1 / 01-09-20

 Page 2 of 18

The Bachelor of Science of Information Technology aims to:

1. To constantly place the University in the information superhighway.
Program 2. To strengthen local and national linkages with public and private institutions.
Objectives 3. To conduct periodic management review for quality delivery of technical service to the clientele.
4. To conduct regularly quality developmental researches.
5. To provide extension services necessary for the needs of the clientele and the society.
Course Web Systems and Lecture 2 Hours
Course Code INFOT 2 Type Credit Units 3
Title Technologies Laboratory 3 Hours
Course This course is an in-depth study of the internet and World Wide Web. It covers web technologies, information architecture, digital media, web
Description development, vulnerabilities, social software, HTML, Cascading Sheets, and JavaScript code. Extensive laboratory exercises are expected.
LABORATORY DAY
Course Pre- LECTURE TIME DAY/ROOM
Consultation Hours: TIME ROOM
requisites
Course BSIT 2A
Schedule
Wednesday: 10:30 - 11:30 AM & 1:00 - 3:00 PM BSIT 2B
CPROG 2 BSIS 2A
Thursday: 7:30 - 8:30 AM
BSIS 2B

LEGEND FOR PROGRAM OUTCOMES (PO)

Level of
PO
Graduate Attribute Program Outcome Articulation Performance Indicator
CODE
I E D
Apply knowledge of computing, science, and mathematics Assist in the creation and management of an
IT01 Knowledge for E effective dynamic website.
appropriate to the discipline
Solving Computing
Problems Understand best practices and standards and their Identify the enabling technologies for building
E
IT02 applications Internet and Web.
Analyze complex problems, and identify and define the
IT03 E
computing requirements appropriate to its solution
Assist in the creation and management of an
Problem Analysis Identify and analyze user needs and take them in account in
effective dynamic website.
IT04 the selection, creation, evaluation and administration of E
computer based systems
IT05 Design/Development Design, implements and evaluate computer based systems, E Design, implement, and evaluate a computer-
of Solutions process, components, or programs to meet desired needs based system, process, component, or
and requirements under various constraints. program to meet the needs of an organization
and its users.
VAA- FM-001 Rev.1 / 01-09-20
 Page 3 of 18

IT06 Integrate IT based solutions, into user environment effectively

Apply knowledge through the use of current techniques, skills, Assist in the creation and management of an
IT07 Modern Tools Usage E
tools and practices necessary for the IT professionals effective dynamic website.
Function effectively as a member or leader of a development
IT08 Individual and Team team recognizing the different rules within a team to
Work accomplish a common goal.
IT09 Assist in the creation of an effective IT project plan
Communicate effectively with computing community and with
IT10 society at large about complex computing activities through
logical writing, presentation and clear instructions
Computing, Analyze the local and global impact of computing information
IT11
technology on individuals, organizations, and society
Professional and
Understand professional, ethical, legal, security and social Discovering of professional, ethical, legal,
IT12 Social responsibility issues and responsibilities in the utilization of information E security, and social issues and responsibilities
technology related to Information Systems.
Recognized the need for an engaged in planning self-learning
IT13 and improving performance as foundation for continuing
Life Long Learner professional development
Preserve and promote “Filipino historical and cultural
IT14
heritage”.
Committed Professional imbued with high personal integrity and
IO01
Professionals (P) commitment.
Research Oriented Research – oriented innovators willing to contribute for the
IO02
(R) development
Nationalistic,
Intellectuals that shows patriotism and love for the country,
environmental,
IO03 concern to the environment, respect to the cultural, and
cultural and artistic
artistic sense;
Intellectual (I)
Development-driven Assist in the creation and management of an
Development – driven leaders and socially responsible
and socially effective dynamic website.
IO04 change agents. Excellent workers with high technological and E
responsible leader
technical expertise.
(D)
Excellent workers Excellent workers with high technological and technical Implement websites using HTML5, CSS, and
IO05 E
(E) expertise. JavaScript.
LEGEND FOR LEVEL OF ARTICULATION
CODE Descriptor
I Introductory Course (A course that introduces the outcome)
E Enabling Course (A course that strengthens the outcome)
VAA- FM-001 Rev.1 / 01-09-20
 Page 4 of 18

D Demonstrating Course (A course that demonstrating an outcome)

TIME
TEACHING AND ASSESSMENT OF
REFERENCES ALLOTMENT
INTENDED LEARNING OUTCOMES COURSE CONTENT LEARNING LEARNING
AND
(ILO) ACTIVITIES OUTCOMES LEC LAB
RESOURCES
(TLA) (ALO) (HRS) (HRS)
 At the end of the unit, the students
must be able to:
Virtual Orientation/Discussion
 Introduce oneself in the class  Syllabus content and course polices
 State expectations from the course,  Online Classroom Netiquettes 1
the instructor, and the class Vision, Mission Goals and Objectives  University Code  Virtual Self-  Online Recitation
 Tell the vision, mission, goals and Getting – to – know one another  Student Introduction
objectives of the University Handbook
 Discuss the important information  Course
about the course Syllabus
 Discuss the classroom and Values Integrated: Possessed desirable
laboratory room rules attributes as UA Pride

Gender Issue Integrated: Appreciation of

both male and female to the VMGO of the
University

Chapter I:
Introduction to Web Design
Lesson 1:
Basic Web Concepts Book/s
 Identify basic web technologies  The Web Design Terminologies A. By Jemma  Online  LMS-based Quiz
 Discover the history of the Internet  The History of the Web Development, Synchronous  Graded Forum
and the World Wide Web  The Origin of the Internet 2017, Web Discussion Recitation
 The Internet and the World Wide Web Design 3rd  Online Web
 How the Internet Began Edition Search
 Uses of the Internet B. Patrick Carey.  Modular Instruction
 The Inventor of the Web 2010. HTML, (Printed/via LMS)
 The Web in Perspective XHTLM and  Independent Study
VAA- FM-001 Rev.1 / 01-09-20
 Page 5 of 18

XML. pp 2-3  Netsurfing

Lesson 2: C. Jennifer T.
Web Browsers Campbell,
 What is a Web Browsers Shelly
 Web Browser User Interface Cashman
 Building Blocks of the Web Series, 2018, 4
 Fundamental Technologies of Today’s Web Design
 Determine common means of Web 6th Edition
accessing the web  Kinds of Web Browsers
 Identify the kinds of web browsers
and elements Online
Resource/s
Lesson 3:  https://
Web Technologies www.scss.tcd.i
 What is Web Technology? e/
 Who Introduced Web Technology? owen.conlan/
 How Does Web Technology Work? CS7062/1_We
 What are the different Types of Web b_Technologie
Technologies? s_Handout.pdf
6
 Components of a Webpage

 Classify the different types of web Values Integrated: Well-mannered in

technologies and its applications words and actions
 Identify the different components
for developing webpages. Gender Issue Integrated: Equal
 Combine multiple web opportunity for both men and women in
technologies to expressing their own ideas.
create advanced web
components. Internationalization Concept Integrated:
Study of the origin of the world wide web
and uses of internet.
Chapter II: Book  Online  LMS-based Quiz
Information Architecture A. Jennifer T. Synchronous  Graded Forum
Lesson 1: Information Architecture Campbell, Discussion Recitation
 Identify the standards of an Concepts Shelly  Online Web
effective web page, including an in-  What is Information Architecture Cashman Search 2 3
VAA- FM-001 Rev.1 / 01-09-20
 Page 6 of 18

depth consideration of information  Main Components of Information Series, 2018,  Modular Instruction
architecture. Architecture Web Design (Printed/via LMS)
 Acquire basic design, web contents  Steps of Information Architecture 6th Edition  Independent Study
and planning. Development  Netsurfing
 Study how to plan and conduct  Create a UI Prototype for Future
Development Online
user research related to web
 Principles of Information Architecture Resource/s
usability.  Examples of Information Architecture A. https://
 Describe the key design related www.w3schoo
issues, principles in enterprise ls.com/js.
application and how different Values Integrated: Healthy and Accessed
design patterns for enterprise constructive thoughts August 16,
application architecture works. 2021
Gender Issue Integrated: Appreciation of B. https://
both concepts from men and women computer.ho
wstuffworks.c
Internationalization Concept Integrated: om/
Use of existing information architecture information-
contributed by information architects from architecture3
around the world. .htm

Chapter III:  Online  LMS-based Quiz

Digital Media and Web Development Book Synchronous  Graded Forum
 Develop a foundation that draws on Lesson 1: Digital Media A. Jennifer T. Discussion Recitation
history, theory and practice of  What is Digital Media? Campbell,  Online Web
media studies on theories for  Examples of Digital Media Shelly Search 2 3
interpretation of diverse forms of  Types of Digital Media Cashman  Modular Instruction
technology, communication, and  Social Software Series, 2018, (Printed/via LMS)
media.  Ethical and Legal Issues Web Design 6th  Independent Study
Edition  Netsurfing
Lesson 2: Web Development B. By Jemma
 What is Web Development? Development,
 Divisions of Web Development 2017, Web
 Social Software Design 3rd
 Design Principles Edition
 Importance of Web Development
 Employ fundamental computer  Purpose of a Website
theory to basic programming  Programming Languages Used in Web
VAA- FM-001 Rev.1 / 01-09-20
 Page 7 of 18

techniques. Development Online Source

 Incorporate aesthetics and formal  https://
concepts of layout and organization Values Integrated: Learning and www.lee.k12.nc
to design websites that effectively Responsibility .us/cms/lib/
communicate using visual NC01001912/
elements. Gender Issue Integrated: Both men and Centricity/
 Conceptualize and plan an internet- women are given the same set of topics, domain/651/
based business that applies activities, exams and projects. pshop
appropriate business models and %20powerpoint
web technologies. Internationalization Concept Integrated: s/
Discover different mark-up languages and dm_101.01_p_d
multimedia packages use to communicate igitalmediaconc
around the world. epts.pdf. August
16, 2021

Chapter IV: Book/s  Online  LMS-based Quiz

HyperText Mark-up Language (HTML) A. By Jemma Synchronous  Graded Forum
Development, Discussion Recitation
Lesson 1: 2017, Web  Online Web  Online Hands-on
Introduction to HTML Design 3rd Search Activity
15
 Identify what is HTML and the text What is HTML? Edition  Modular Instruction
<!DOCTYPE> Declaration B. Sasha Vodnik. (Printed/via LMS)
editors
Meta Data 2012. HTML5  Independent Study 10
 Recognize document declaration
Exploring HTML Editors and CSS3  Netsurfing
and metadata Web Browsers Support Introductory.
 Use Notepad++ to create codes HTML Page Structure Unit B and G,
 View HTML code in a browser Web Browsers Support Getting
Writing HTML Files Started with
HTML and
Lesson 2: organizing
HTML Tags and Attributes Content with
What is Tag? Lists and
 Describe tags and attributes Structure of a Tag Tables. pp 35-
 Classify the structure of a tag HTML Versions 50, pp 142-
VAA- FM-001 Rev.1 / 01-09-20
 Page 8 of 18

 Identify container and empty tags What are Head Tags? 154
 Recognize new tags and elements What are Body tags? C. Patrick Carey.
in HTML5 What is an Attribute 2010. HTML,
HTML Heading XHTLM and
HTML Paragraphs XML. pp 4-51
HTML Links
HTML Text Formatting D. Jim Shuman,
HTML Styles 2011,
 Recognize the head and body tags HTML Images Multimedia
 Identify heading, its attributes and HTML Lists Concepts
grouping headings HTML Forms Enhanced Edition
HTML Layouts E. Jennifer T.
Campbell,
Shelly
Lesson 3: Cashman
Background, Text, Video and Audio Series, 2018,
Changing the Background Color of a Web Design
Page 6th Edition
Highlight Text
 Build, view save, exit and print an Adding Video
HTML file Adding Audio Online
 Apply header, footer, navigation, Linking to Audio or Video Files Resource/s
article and section Specifying Font A. https://
Special Character Entities www.w3schoo
ls.com/js.
Lesson 4: August 16,
Adding Images 2021
 Preparing for the Image or Graphic
 Inserting Graphics into a Web Page
 Attributes for <img>
 Specifying the Background Image of a
Page
 Using graphics as a Hyperlink

Lesson 5:
Inserting Table
What is a Table?
 Build and align paragraphs
Creating a Table
 Classify ordered and unordered
VAA- FM-001 Rev.1 / 01-09-20
 Page 9 of 18

lists Adding Cell Padding

 Apply line and multiple line breaks Adding Cell Spacing
and horizontal rule Adding Border Spacing
 Explore nesting tags and lists Adding a Caption
Modifying a Table
Attributes for <table>
Modifying Table Rows
Attributes for <tr>
Modifying Table Data
Attributes for <td>
Merging Cells
Nesting Tables
Creating a Border with Invisible Border
Adding an Image to a Table

Lesson 6:
Working with Hyperlinks
 What is Hyperlink?
 Apply background and highlight  Three Types of Hyperlinks
 Identify the tags for font style  Creating a Link From One Page to
 Discover special character entities Another
 Attribute for <a>
 Target Attribute
 Creating an Email Link
 Linking to a Page on a Different Web
Site
 Using Graphic as Links

Values Integrated: Open minded and able

to think logically.
 Place images on the web page
 Identify the different attributes for Gender Issue Integrated: Eliminate the
images discrimination for both men and women on
 Apply a background image on a their idea of how everyone is different from
page each other.

VAA- FM-001 Rev.1 / 01-09-20

 Page 10 of 18

 Apply graphics as hyperlink

Internationalization Concept Integrated:
Design and develop web pages that
simplify the information architecture of
structuring the content as it is applied to
websites globally.

 Create and modify what a table is

 Identify the different attributes of
tables, rows and data and how to
merge a cells
 Add images to a table

 Identify the hyperlink and its type

 Build a link from one page to
another
 Identify the attributes for anchor
and target attributes
 Use graphic as a link

Chapter V: Web Books  Online Synchronous Discussion  LMS-based Quiz

Security A. Kadema  Online Web Search  Graded Forum
Vulnerabilities and Carter, 2015,  Modular Instruction (Printed/via LMS) Recitation
Countermeasures Computer  Independent Study  Online Hands-on
Lesson 1: Web Security and  Netsurfing Activity
VAA- FM-001 Rev.1 / 01-09-20
 Page 11 of 18

Security Cryptography
Vulnerabilities B. Gregory J.
 What is Web Touhill and C.
 Recognize a problem as being a Security Joseph Touhill,
possible network security threat Vulnerabilities 2015,
 Familiarize the security issues  Anatomy of Cyber Cybersecurity
involved with different Network Attacks for Executives
operating systems.  Web Applications
.  Preventing the
organization from
cyber attacks
 Applying Modern
Technologies For
Better Cyber 2
Security
 Two Sides of Web
Security
 Introduction to
Cybercrime

Values Integrated:
Honesty, Responsibility
and Determination

Gender Issue
3
Integrated: Equal
opportunity for both
men and women in
expressing their own
ideas.

Internationalization
Issues Integrated:
Study of the web
security vulnerabilities
and its counterpart
across the globe.

VAA- FM-001 Rev.1 / 01-09-20

 Page 12 of 18

Chapter VI: Book/s  Online Synchronous Discussion  LMS-based Quiz

Cascading Style A. By Jemma  Online Web Search  Graded Forum
Sheet Development,  Modular Instruction (Printed/via LMS) Recitation
Lesson 1: Working 2017, Web  Independent Study  Online Hands-on
 Study what CSS is and its kinds with Style Sheets Design 3rd  Netsurfing Activity
 Identify the CSS structure, its  What is CSS? Edition
capabilities and advantages  CSS Structure B. Sasha Vodnik.
 Differentiate embedded, linked  Kinds of CSS 2012. HTML5
and external CSS  Creating and and CSS3
External CSS File Introductory.
 Linking CSS File to Unit C and D,
HTML file Getting Started
with CSS and
Fornatting Text
 Identify the kinds of elements in Lesson 2: wit CSS. pp 59
CSS Selectors, Div Span – 101
and Link C. Patrick Carey. 8 12
 Use display property, div, tag,
span tag, class, id, selector  Display Property 2010. HTML,
pseudo-classes and links  Span and Div Tags XHTLM and
 Classify its class, id and multiple  CSS Classes XML. pp 122-
selectors and grouping selectors  Class Selectors 136
 Pseudo-classes and D. Jennifer T.
links Campbell,
Shelly
Cashman
Series, 2018,
Web Design 6th
Edition

 Identify its typography, font, text Lesson 3: Online Resource/s

properties and CSS styles Formatting Text with A. https://
 Apply a background color and CSS www.w3schoo
border to a text  Typography ls.com/js.
 CSS Comments Accessed
 Ways to Insert CSS August 16,
 Cascading Order 2021
 CSS Colors B. https://

VAA- FM-001 Rev.1 / 01-09-20

 Page 13 of 18

 CSS Backgrounds hostpapasupp

 CSS Borders ort.com/
 CSS Margins understanding
-external-
internal-inline-
Lesson 4: css-styles/.
Formatting Layout Accessed
 Discover the concept of box with CSS August 16,
model, element positioning, offset  Box Model 2021
and float  Element
 Apply background colour, Positioning
background image and  Offset
background position  Float
 Wrapping Text
around element
 Background
 Setting Margins

Values Integrated:
Open minded and able
to think logically

Gender Issue
Integrated: Eliminating
the discrimination for
both men and women
on their idea of how
everyone is different
from each other.

Internationalization
Concept Integrated:
Design and develop
web pages that simplify
the information
architecture of

VAA- FM-001 Rev.1 / 01-09-20

 Page 14 of 18

structuring the content

as it is applied to
websites globally.
Chapter VII: Book/s  Online Synchronous Discussion  LMS-based Quiz
JavaScript A. By Jemma  Online Web Search  Graded Forum
Development,  Modular Instruction (Printed/via LMS) Recitation
Lesson 1: 2017, Web  Independent Study  Online Hands-on
 Develop basic programming skills Introduction to Design 3rd  Netsurfing Activity
using JavaScript JavaScript Edition
 Insert JavaScript lines in HTML  What JavaScript B. Michael
 Use JavaScript to add dynamic  How to Start Using Moncur. 2007. 8 12
content to pages. JavaScript JavaScript in 24
 Apply positioning the scripts  Where you can Hours. Pp 7 –
Place Scripts? 207
 Discover what events are  What are the C. John Pollock,
 Explore the different events that JavaScript 2005,
JavaScript can invoke Guidelines? JavaScript: A
 Identify the attributes for event Beginner’s
triggers Lesson 2: Events and Guide, Second
 Distinguish what popup boxes are Popup Boxes Edition
 Demonstrate the use of popup  What are the Events D. Kirupa
boxes  What are the Popup Chinnathambi,
Boxes 2017,
JavaScript
Lesson 3: Variables Absolute
 Classify what variables are their and Comparison Begginer’s
uses Statements Guide
 Identify and use comparison  What is Variable?
statements and the expression  What are
Comparison
Statements? Online Resource/s
 https://
Lesson 4: Functions www.w3schools.c
 Distinguish what functions are and and Loops om/js. Accessed
how functions are used  What is Function? August 16, 2021
 Discover what loops are  The return
 Identify the different kinds of loops Statement
available in JavaScript  What is Loop?
VAA- FM-001 Rev.1 / 01-09-20
 Page 15 of 18

 Apply to use loops  The break and

continuous
 Manipulate strings Statements
 Discover what arrays are and how
to declare and use it Lesson 5: String and
 Identify the properties and Array Objects
methods for array objects  What is String?
 What is an Array?
 Use date objects
 Identify the methods for date Lesson 6: Date, Time,
object and Math Objects
 Apply inserting simple time stamps  What is a Math
and JavaScript timing Object?
 Describe what math object is  Insert Simple Time
 Identify the properties of math Stamp
object  JavaScript Timing
 The setTimeout ()
 The clearTimeout ()
 What is a Math
Object?

Values Integrated:
Able to form
judgements.

Gender Issue
Integrated: Creating
an equal opportunity
for both men and
women in expressing
their own idea.

Internationalization
Concept Integrated:
Design and develop
web pages that simplify
the information
architecture of

VAA- FM-001 Rev.1 / 01-09-20

 Page 16 of 18

structuring the content

as it is applied to
websites globally.

RUBRIC FOR ASSESSMENT

EXCELLENT SATISFACTORY FAIR NEEDS IMPROVEMENT FAIL

ASSESSMENT
20 15 10 5 0
Student initiates Student initiates
Student initiates Student does not
ONLINE contributions more contribution at least
contribution once in each initiate contribution
RECITATION/PATICIPATION than once in each in half of the
recitation. & needs instructor
recitation. recitations
to solicit input.

Output was not produced

Output was not
Output has no errors and student shows little
The output is working but produced and contains
PROJECT and delivered within a knowledge about the No output at all
contain some errors considerable amount of
specified time subject matter being
errors
tested
Required output was Required output was Required output was not
Required output was
produced with no not produced and produced and student
ONLINE LABORATORY produced with little errors No output at all
errors and delivered laboratory exercises shows little knowledge
EXERCISES and delivered within a
within a specified was a least 50% about laboratory
specified time
time finished exercises.
Presentation was Presentation was Contents were not
Contents were
VIRTUAL delivered perfectly delivered in a complete and presentation No Presentation at
complete but not
PRESENTATION/REPORTING and all required considerable manner and was delivered in a all
delivered perfectly
content is complete content is complete considerable manner

VAA- FM-001 Rev.1 / 01-09-20

 Page 17 of 18

GRADING SYSTEM
Part I ( 45%)
Online Recitation/Participation 15%
Course Outputs (Projects and Online Laboratory 30%
Exercises)

Part II ( 55%)
LMS =-Based Quizzes 10%
LMS =-Based Long Test 20%
LMS =-Based Major Exam 25%
Total 100%

Grading System:

To pass this course , one must accumulate at least 75% based on the criteria given below:
GRADE = ½ (Midterm Grade) + ½ (Final Grade)

Prepared by: Checked & Verified by: Recommending Approval: Approved by:

VAA- FM-001 Rev.1 / 01-09-20

 Page 18 of 18

ELISA B. GENOVE NOLAN M. YUMEN, MIS MAY LYNN M. FARFREN, P.h.D.TM. BEVERLY D. FRANCISCO, MA. Ed.
Instructor 1 Program Head, BSIT Associate Dean, CCS Director for Academic Affairs

LONDABEE P. MARGARSE, MIS

Instructor III

JONALYN E. ANDRES
Part-time Instructor

VAA- FM-001 Rev.1 / 01-09-20