COURSE SYLLABUS

in
BTLED-ICT 329
(Course Code)

WEBSITE DEVELOPMENT: AUTHOR WARES

(Descriptive Title)

Second Semester, A.Y. 2022 - 2023

Department/Area : Specialization/ Information and Communication Technology

Curriculum : Bachelor of Technology and Livelihood Education (BTLEd)
Curricular Year : Third Year
No. of Hours/Sem : 73 hours
Credit Unit(s) :5
Prerequisites : None

Vision of the University : A premier, multidisciplinary-technological university

Mission of the University : The University shall primarily provide advanced professional and technical instruction for special purposes, advanced
studies in industrial trade, agriculture, fishery, forestry, aeronautics and land-based programs, arts and sciences, health sciences,
information technology and other relevant fields of study. It shall also undertake research and extension services, and provide
progressive leadership in its areas of specialization (Section 2 of R.A. 9744).

Goals of the University : The University shall produce scientifically and technologically oriented human capital equipped with appropriate knowledge, skill
and attitude. It shall likewise pursue relevant research, strengthen linkage with the industry, community and other institutions and
maintain sustainable technology for the preservation of the environment.

Program Outcomes : The minimum standards for the BTLEd program are expressed in the following set of learning outcomes:
 A. Common to all programs in all types of schools:

` The graduates have the ability to:

1. Articulate and discuss the latest developments in the specific field of practice (PQF level 6 descriptor);
2. Effectively communicate in English and Filipino, both orally and in writing;
3. Work effectively and collaboratively with a substantial degree of independence in multi-disciplinary and multi-cultural teams
(PQF level 6 descriptor);
4. Act in recognition of professional, social, and ethical responsibility; and
5. Preserve and promote “Filipino historical and cultural heritage” (based on RA 7722).

B. Common to the discipline (Teacher Education):

1. Articulate the rootedness of education in philosophical, socio-cultural, historical, psychological and political contexts;
2. Demonstrate mastery of subject matter/discipline;
3. Facilitate learning using a wide range of teaching methodologies and delivery modes appropriate to specific learners and their
environments;
4. Develop innovative curricula, instructional plans, teaching approaches, and resources for diverse learners;
5. Apply skills in the development and utilization of ICT to promote quality, relevant, and sustainable educational practices;
6. Demonstrate a variety of thinking skills in planning, monitoring, assessing, and reporting learning processes and outcomes;
7. Practice professional and ethical teaching standards sensitive to the local, national, and global realities; and
8. Pursue lifelong learning for personal and professional growth through varied experiential and field-based opportunities.

C. Specific to a sub-discipline and a major (Technical-Vocational Teacher Education)

1. Demonstrate the competencies required of the Philippine TVET Trainers-Assessors Qualifications Framework (PTTQF);
2. Demonstrate broad and coherent, meaningful knowledge and skills in any of the specific fields in technical and vocational
education;
3. Apply with minimal supervision specialized knowledge and skills in any of the specific fields in technical and vocational
education;
4. Demonstrate higher level literacy, communication, numeracy, critical thinking, learning skills needed for higher learning;
5. Manifest a deep and principled understanding of the learning processes and the role of the teacher in facilitating these
processes in their students;
 6. Show a deep and principled understanding of how educational processes relate to larger historical, social, cultural, and political
processes;
7. Apply a wide range of teaching process skills (including curriculum development, lesson planning, materials development,
educational assessment, and teaching approaches);
8. Reflect on the relationships among the teaching process skills, the learning processing in the students, the nature of the
content/subject matter, and other factors affecting educational processes in order to constantly improve their teaching
knowledge, skills and practices.

Course Description : This course will introduce students to authoring tools used in website development. Students will learn to use software and online
tools for creating and publishing websites. Topics covered will include web design principles, HTML and CSS coding, graphic
design, and website accessibility. Students will also learn to use content management systems (CMS) to create and manage
websites.

Course Learning Outcomes : By the end of this course, students will be able to:

1. Identify the components of a website and explain the principles of web design.
2. Develop websites using HTML and CSS code.
3. Design and create graphics and multimedia content for websites.
4. Use authoring tools and content management systems to create and manage websites.
5. Evaluate website accessibility and implement accessibility features.
6. Collaborate effectively in website development projects.

Course Content:
 INTENDED LEARNING ASSESSMENT TEACHING- LEARNING CONTENTS LEARNING TIME REMARKS
OUTCOMES TASKS ACTIVITIES RESOURCES ALLOCATION

• Relate the course to

Oral Recitation Discuss the importance the CTU/ CoEd Vision, Mission CTU Manual
mission, vision and
adherence of University’s
goals of CTU and Essay writing and Goals Student handbook 5 hrs.
VMGO;
COEd
Making an essay on the Slide presentation
relation of VMGO to their
respective degree program;

Create bookmarks of the

VMGO and distribute to
different stakeholders

Written Quiz
• Identify the components of Interactive Lectures Week 1: Introduction to Web • PowerPoint 10 hrs.
a website and explain the - Multiple Choices Design Principles • Presentation
principles of web design. - Classification Think- Pair- Share • Video Clips
- Identification 1.1 Components of a website • News Articles
- Oral Recitation Actual Video • Reference Book
- Group Activity Demonstration 1.2 Web design principles and best
• Internet Sources
practices

1.3 Tools for web design

 Written Quiz
• Develop websites using Interactive Lectures Week 2: HTML and CSS Coding • PowerPoint
HTML and CSS code. - Multiple Choices • Presentation
- Classification Think- Pair- Share 2.1 Basic HTML tags and elements • Video Clips 10 hrs.
- Identification • News Articles
Actual Video 2.2 Introduction to CSS
- Return Demo • Reference Book
Demonstration
2.3 Creating a basic website using • Internet Sources
HTML and CSS

Pass the major exam as

evidence of thorough learning PRELIM EXAMINATION 1.5 hrs.
of topics.

• Design and create Written Quiz Interactive Lectures Week 3: Graphic Design for • PowerPoint
graphics and multimedia Websites • Presentation
- Multiple Choices Think- Pair- Share • Video Clips 10 hrs.
content for websites.
- Classification 3.1 Creating graphics and images for • News Articles
- Identification Actual Video websites • Reference Book
- Oral Recitation Demonstration • Internet Sources
- Group Activity 3.2 Image optimization for web use

3.3 Introduction to multimedia

content for websites
• Use authoring tools and
content management
Written Quiz Interactive Lectures Week 4: Content Management • PowerPoint
Systems (CMS) • Presentation
systems to create and - Multiple Choices 10 hrs.
Think- Pair- Share • Video Clips
manage websites. - Classification 4.1 Introduction to CMS • News Articles
- Identification Actual Video • Reference Book
- Oral Recitation Demonstration 4.2 Installing and setting up a CMS
• Internet Sources
4.3 Using a CMS to create and
manage website content

Pass the major exam as

evidence of thorough learning MIDTERM EXAMINATION 1.5 hrs.
of topics.

• Evaluate website Written Quiz Interactive Lectures Week 5: Website Accessibility • PowerPoint
accessibility and • Presentation
5.1 Overview of website accessibility •
implement accessibility - Multiple Choices Think- Pair- Share Video Clips
features.
- Classification • News Articles
- Identification Actual Video 5.2 Guidelines for creating 10 hrs.
• Reference Book
- Oral Recitation Demonstration accessible websites
• Internet Sources
- Group Activity
5.3 Implementing accessibility
features in websites
• Collaborate effectively in Written Quiz Interactive Lectures Week 6: Collaborative Website • PowerPoint
website development Development • Presentation
projects. - Multiple Choices Think- Pair- Share • Video Clips
- Classification 6.1 Working in teams for website • News Articles
- Identification Actual Video 10 hrs.
development • Reference Book
- Oral Recitation Demonstration • Internet Sources
- Group Activity 6.2 Version control and collaboration
tools

6.3 Testing and deployment of

websites

Pass the major exam as

evidence of thorough learning FINAL EXAMINATION 5 hrs.
of topics.
(Project Title: Create a Responsive Website Using a Content Management System)
Note: The instruction will be provided
ASSESSMENT TASK:

WEEK 1: Introduction to Web Design Principles

1. Which of the following is NOT a principle of web design?
a) Contrast b) Alignment c) Proximity d) Saturation

2. Which of the following is a good practice for designing a website with accessibility in mind?
a) Use small font sizes to fit more content on the page
b) Use images without alt tags
c) Use high contrast between text and background
d) Use background music or sound effects

3. Which of the following is a good practice for creating an effective website layout?
a) Use as many different font styles and sizes as possible
b) Place important content in obscure locations
c) Use white space to create visual hierarchy and organize content
d) Use very small images and icons to reduce load times

4. Which of the following is NOT a common file format used for images on the web?
a) JPEG b) PNG c) GIF d) MP4

5. Which of the following is a good practice for designing a website with mobile users in mind?
a) Use large images and graphics that are slow to load on mobile devices
b) Use a fixed-width layout that does not adjust for different screen sizes
c) Use responsive design to adapt the layout and content to different screen sizes
 d) Use Flash animations that may not be supported on all mobile devices

6. Which of the following is a good practice for creating effective website navigation?
a) Use ambiguous or unclear labels for links and buttons
b) Use multiple levels of drop-down menus to organize content
c) Use clear and concise labels for links and buttons
d) Use different navigation styles on each page of the website

7. Which of the following is a good practice for using typography in web design?
a) Use a wide variety of fonts on a single page
b) Use small font sizes to fit more content on the page
c) Use fonts with good readability and legibility on screens
d) Use decorative or novelty fonts for body text

8. Which of the following is a good practice for creating effective website content?
a) Use long paragraphs with no headings or subheadings
b) Use generic or irrelevant images that do not enhance the content
c) Use headings and subheadings to break up the content and create visual hierarchy
d) Use complex jargon and technical terms that may not be understood by the audience
9. Which of the following is a good practice for using color in web design?
a) Use a wide variety of colors to make the website stand out
b) Use colors that clash or do not complement each other
c) Use colors to create a consistent and cohesive visual style for the website
d) Use dark colors for text on a dark background

10. Which of the following is a good practice for optimizing a website for search engines? a) Use hidden text or links to increase keyword density
 b) Use irrelevant or misleading meta tags to attract more visitors
c) Use descriptive and relevant page titles and meta descriptions
d) Use Flash animations and other multimedia content that may not be indexed by search engines

WEEK 2: HTML and CSS Coding

1. Which HTML tag is used to define a paragraph?

a) <div> b) <p> c) <span> d) <header>

2. Which CSS property is used to change the color of text?

a) background-color b) font-size c) color d) margin

3. What is the purpose of the <!DOCTYPE> declaration in HTML?

a) It declares the document type and version of HTML being used.
b) It specifies the background color of the web page.
c) It sets the font size for the entire document.
d) It defines the structure and layout of the web page.

4. Which HTML attribute is used to specify the URL of an image to be displayed on a web page?

a) src b) href c) alt d) id

5. Which CSS property is used to add space between the border and content of an element?
 a) padding b) margin c) border-width d) border-spacing

6. Which HTML tag is used to create an unordered list?

a) <ul> b) <ol> c) <li> d) <ul> and <li>

7. Which CSS property is used to set the font family for an element?

a) font-weight b) font-style c) font-size d) font-family

8. Which HTML tag is used to create a hyperlink?

a) <link> b) <a> c) <img> d) <div>

9. Which CSS property is used to change the background color of an element?

a) color b) font-family c) background-color d) text-align

10. Which HTML tag is used to define the document's head section?

a) <body> b) <head> c) <html> d) <title>

 WEEK 3: Graphic Design for Websites

1. Which of the following is NOT a common file format used for graphics on the web?
a) JPG b) GIF c) PNG d) DOCX

2. Which of the following is a principle of graphic design?

a) Alignment b) Compression c) Serialization d) Deletion

3. Which of the following is a good practice for creating effective website graphics?

a) Use small, low-quality images to reduce load time

b) Use a variety of colors and styles for visual interest
c) Use contrast and repetition to create visual hierarchy
d) Use multiple fonts for variety and interest

4. Which of the following is a good practice for using color in website design?

a) Use as many colors as possible for visual interest

b) Use bright colors for all text to make it stand out
c) Use a limited color palette for a consistent visual style
d) Use neutral colors for a subtle and understated look
5. Which of the following is a good practice for designing effective website logos?

a) Use a complex design with lots of detail

b) Use a small size that is hard to read
c) Use a simple design with clean lines and few colors
d) Use a font that is difficult to read

6. Which of the following is a good practice for using typography in website design?

a) Use multiple fonts for variety and interest

b) Use small font sizes to fit more text on the page
c) Use readable and legible fonts on screens
d) Use decorative fonts for all text to make it stand out

7. Which of the following is a good practice for creating effective website icons?

a) Use a detailed and complex design

b) Use a small size that is hard to see
c) Use a simple and recognizable design
d) Use a font that is difficult to read

8. Which of the following is a good practice for creating effective website buttons?

a) Use a small size that is hard to click

b) Use a variety of shapes and sizes for visual interest
 c) Use clear and concise labels for easy understanding
d) Use multiple colors for visual interest

9. Which of the following is a good practice for creating effective website backgrounds?

a) Use bright and flashy patterns for visual interest

b) Use a solid color or simple pattern to avoid distraction
c) Use multiple images for visual interest
d) Use neutral colors for a subtle and understated look

10. Which of the following is a good practice for creating effective website banners?

a) Use a small size that is hard to see

b) Use a variety of colors and patterns for visual interest
c) Use a clear and concise message for easy understanding
d) Use multiple fonts for variety and interest

WEEK 4: Content Management Systems

1. What is a Content Management System (CMS)?

a) A web application used to create and manage digital content

b) A type of web hosting service
c) A method of securing a website from cyber attacks
 d) A tool for designing website graphics

2. Which of the following is an example of a popular open-source CMS?

a) Wix b) Squarespace c) WordPress d) Shopify

3. What is the benefit of using a CMS for website development?

a) It eliminates the need for any coding
b) It allows for easy content creation and editing
c) It provides complete control over the website design
d) It is cheaper than hiring a professional web developer

4. Which of the following is a feature of a typical CMS?

a) Responsive design templates b) Server-side programming languages c) Web hosting services d) Content creation and editing tools

5. Which of the following is a disadvantage of using a CMS for website development?

a) It requires advanced coding skills

b) It can be expensive to purchase and maintain
c) It is not customizable for unique website designs
d) It can be difficult to learn how to use

6. Which of the following is an example of a CMS that is specifically designed for e-commerce websites?

a) Drupal b) Joomla c) Magento d) Weebly

7. Which of the following is a benefit of using a cloud-based CMS?

a) It provides greater security for website data

b) It eliminates the need for web hosting services
c) It allows for easier collaboration among team members
 d) It provides complete control over website design and functionality

8. What is a theme in a CMS?

a) A type of website plugin
b) A design template for website layout and appearance
c) A method of organizing website content
d) A tool for creating website graphics

9. What is a plugin in a CMS?

a) A design template for website layout and appearance

b) A tool for creating website graphics
c) A method of organizing website content
d) An additional software component that adds specific functionality to a website

10. What is the difference between a hosted CMS and a self-hosted CMS?

a) A hosted CMS is free to use, while a self-hosted CMS requires payment

b) A hosted CMS is easier to use than a self-hosted CMS
c) A hosted CMS is managed by the CMS provider, while a self-hosted CMS is managed by the user
d) A hosted CMS is less customizable than a self-hosted CMS

WEEK 4: Content Management Systems

1. What is a Content Management System (CMS)?

a) A web application used to create and manage digital content

 b) A type of web hosting service
c) A method of securing a website from cyber attacks
d) A tool for designing website graphics

2. Which of the following is an example of a popular open-source CMS?

a) Wix b) Squarespace c) WordPress d) Shopify

3. What is the benefit of using a CMS for website development?

a) It eliminates the need for any coding

b) It allows for easy content creation and editing
c) It provides complete control over the website design
d) It is cheaper than hiring a professional web developer

4. Which of the following is a feature of a typical CMS?

a) Responsive design templates

b) Server-side programming languages
c) Web hosting services
d) Content creation and editing tools

5. Which of the following is a disadvantage of using a CMS for website development?

a) It requires advanced coding skills

b) It can be expensive to purchase and maintain
c) It is not customizable for unique website designs
d) It can be difficult to learn how to use
6. Which of the following is an example of a CMS that is specifically designed for e-commerce websites?

a) Drupal b) Joomla c) Magento d) Weebly

7. Which of the following is a benefit of using a cloud-based CMS?

a) It provides greater security for website data

b) It eliminates the need for web hosting services
c) It allows for easier collaboration among team members
d) It provides complete control over website design and functionality

8. What is a theme in a CMS?

a) A type of website plugin

b) A design template for website layout and appearance
c) A method of organizing website content
d) A tool for creating website graphics

9. What is a plugin in a CMS?

a) A design template for website layout and appearance

b) A tool for creating website graphics
c) A method of organizing website content
d) An additional software component that adds specific functionality to a website

10. What is the difference between a hosted CMS and a self-hosted CMS?
a) A hosted CMS is free to use, while a self-hosted CMS requires payment
b) A hosted CMS is easier to use than a self-hosted CMS
c) A hosted CMS is managed by the CMS provider, while a self-hosted CMS is managed by the user
 d) A hosted CMS is less customizable than a self-hosted CMS

WEEK 5: Website Accessibility

1. What is website accessibility?

a) The ability of a website to be accessed by multiple devices

b) The ability of a website to be accessed by multiple languages
c) The ability of a website to be accessed by people with disabilities
d) The ability of a website to be accessed in offline mode

2. Which of the following is an example of an accessibility barrier on a website?

a) A website with a small font size

b) A website with a limited color scheme
c) A website with no images
d) A website with too much text

3. Which of the following is not considered a disability under website accessibility guidelines?

a) Visual impairment
b) Hearing impairment
c) Cognitive impairment
d) Left-handedness

4. What is the Web Content Accessibility Guidelines (WCAG)?

a) A set of guidelines developed by the World Wide Web Consortium (W3C) to ensure website accessibility
 b) A set of guidelines developed by Google to improve website ranking
c) A set of guidelines developed by Adobe to optimize website performance
d) A set of guidelines developed by Facebook to improve user engagement

5. Which of the following is not a level of WCAG compliance?

a) A b) B c) C d) AA

6. Which of the following is an example of an assistive technology used to access websites?

a) Google Analytics
b) Search engine optimization (SEO)
c) Screen readers
d) JavaScript

7. Which of the following is not a principle of WCAG?

a) Perceivable
b) Operable
c) Understandable
d) Adaptable

8. What is alt text?

a) A method of linking to external resources

b) A type of image file format
c) A text description of an image used for accessibility purposes
d) A code snippet used for website design

9. What is the purpose of captions and transcripts for videos on a website?

 a) To make videos load faster
b) To improve video quality
c) To make videos accessible to people with hearing impairments
d) To make videos accessible to people with visual impairments

10. Which of the following is an example of a website accessibility testing tool?

a) Google Analytics
b) Yoast SEO
c) WebAIM Wave
d) JavaScript Console

WEEK 5: Website Accessibility

1. What is collaborative website development?

a) The process of developing a website with a team of developers

b) The process of developing a website using collaboration software
c) The process of developing a website with the help of artificial intelligence
d) The process of developing a website with the help of a chatbot

2. Which of the following is an example of a collaboration tool used in website development?

a) Microsoft Word
b) Slack
c) Adobe Photoshop
d) Google Chrome
3. Which of the following is a benefit of collaborative website development?

a) It reduces the number of bugs in the website

b) It increases the time it takes to develop a website
c) It makes it harder to track changes in the website
d) It allows for input from multiple stakeholders in the website

4. Which of the following is not a common challenge in collaborative website development?

a) Communication breakdowns
b) Differing technical skills among team members
c) A lack of project management software
d) Misaligned goals and objectives

5. Which of the following is not a recommended practice for collaborative website development?

a) Establishing clear roles and responsibilities

b) Creating a detailed project plan
c) Limiting communication among team members
d) Holding regular team meetings

6. What is version control?

a) A system for tracking changes to a website over time

b) A tool used to create wireframes for a website
c) A method of optimizing website performance
d) A way to store images and videos used on a website
7. Which of the following is a version control system commonly used in collaborative website development?

a) Adobe Creative Cloud

b) GitHub
c) Google Analytics
d) Slack

8. What is a code repository?

a) A storage space for images and videos used on a website

b) A system for tracking website performance
c) A tool for creating wireframes for a website
d) A centralized location for storing and sharing code used in website development

9. What is a pull request?

a) A request for a team member to complete a task

b) A request to merge changes made to a code repository
c) A request to delete a section of a website
d) A request to add a new page to a website

10. What is continuous integration/continuous delivery (CI/CD)?

a) A process for automating website development tasks

b) A method of optimizing website performance
c) A system for tracking changes to a website over time
d) A tool for creating wireframes for a website
ANSWERS:

WEEK 1 WEEK 2 WEEK 3 WEEK 4 WEEK 5 WEEK 6

1.D 1.B 1.B 1.A 1.C 1.A

2.C 2.C 2.A 2.C 2.A 2.B
3.C 3.A 3.A 3.B 3.D 3.D
4.D 4.A 4.C 4.D 4.A 4.C
5.C 5.A 5.C 5.B 5.C 5.C
6.C 6.A 6.C 6.C 6.C 6.A
7.C 7.D 7.C 7.C 7.D 7.B
8.C 8.B 8.C 8.B 8.C 8.D
9.C 9.C 9.B 9.D 9.C 9.B
10.C 10.B 10.C 10.C 10.C 10A

References:
• Raskin, J. (2000). The humane interface: New directions for designing interactive systems. Addison-Wesley Professional.

• MacKenzie, I. S. (1992). Fitts' law as a research and design tool in human-computer interaction. Human-Computer Interaction, 7(1), 91-139.

• Gallaugher, J. (2021). Information Systems: A Manager's Guide to Harnessing Technology. FlatWorld.

 • O'Reilly, T., & Battelle, J. (2009). Web Squared: Web 2.0 Five Years On. O'Reilly Media, Inc.

• Meeker, M. (2019). Internet Trends 2019. Bond.

• Laugesen, J. (2019). Writing Online: A Guide to Effective Digital Communication. Routledge.

• Rife, M. C., & Voss, D. (2019). Digital Writing Research: Technologies, Methodologies, and Ethical Issues. Routledge.

• Schreibman, S., Siemens, R., & Unsworth, J. (Eds.). (2016). A New Companion to Digital Humanities. John Wiley & Sons.

• Straker, K., Wegerif, R., & Mansour, N. (Eds.). (2019). The Routledge International Handbook of Research on Teaching Thinking. Routledge.

• Vorderer, P., Klimmt, C., & Ritterfeld, U. (2004). Enjoyment: At the heart of media entertainment. Communication theory, 14(4), 388-408.

• Potts, L., & Hunter, A. (2018). Writing for Digital Media. Routledge.

• Snyder, I. (2017). Writing and Digital Media. Routledge.

• Pigg, S., & Löwgren, J. (2019). Collaborative media production: tools, methods, and best practices. Routledge.

• Nielsen, J. (1995). Ten Usability Heuristics. Nielsen Norman Group.

• Berners-Lee, T., & Fischetti, M. (1999). Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web. Harper Business.

Course Requirements:
1. Class participation
2. Attendance and Punctuality
3. Daily Quizzes, Recitation and Summative Tests
4. Major Examinations (Prelim /Midterm /Final)
 5. Assignments
6. Projects/Proposals/Compilation of Outputs/ Job Sheets

Evaluation Procedure: (Approved Grading System Applicable to the Course/Program)

Weight Components
20% of grade Quizzes
30% of grade Graded Oral Presentation
10% of grade Projects/ Assignments/ Final Reports
40% of grade Term Examination (Prelim, Midterm, Semi and Finals)

100%

Prepared by:

RYAN C. GIMARINO

Checked by:

PROFESSOR: ERIC R. VILLARIN