Module 1: Introduction to the Web and Internet

Overview

This unit begins with an in-depth explanation of the World Wide Web and its basic building
blocks. It starts by defining the distinctions between the Internet and the World Wide Web
and their respective structure and functionality. It then classifies different types of websites,
such as static, dynamic, and e-commerce. The Web Development Life Cycle (WDLC) details
the website creation process. In addition, the unit describes basic web development
languages, such as HTML and CSS, and the tools used to create web pages, such as text
editors and browsers. Understanding these building blocks is necessary for effective web
development and design.

Learning Objectives:

At the end of the unit, I can:

1. Define key terms: Internet, World Wide Web, Web Browsers, URLs, and Web
Servers.
2. Differentiate various types of websites.
3. Understand the Web Development Life Cycle (WDLC).
4. Identify tools needed for web development.

Setting up

Pre-Test

Name: _______________________________________________________ Date: _______________________

Course & Section: __________________________________________

Directions: Multiple Choices. Carefully read each question and select the ONE best answer
from the choices provided. Mark your answer by circling the corresponding letter.

1. Which of the following best defines the World Wide Web (WWW)?
A) A physical network of interconnected computers
B) A collection of websites and web pages accessible via the Internet
C) A type of software used for browsing the Internet
D) A programming language for creating websites

2. How does a web browser function when accessing websites?

A) It creates web pages and publishes them on the Internet
B) It translates domain names into IP addresses and retrieves web pages from
servers
C) It designs and develops websites
D) It connects directly to the web server without using URLs

1
 3. Which type of website would best suit an organization that wants to post news
articles and updates regularly?
A) E-commerce website B) Blog or news website
C) Social networking website D) Portfolio website

4. Which of the following correctly categorizes an online shopping website like

Amazon?
A) Personal website B) Informational website
C) E-commerce website D) Social media platform

5. A web developer is in the planning phase of the Web Development Life Cycle
(WDLC). Which of the following tasks should they prioritize?
A) Coding the website's front-end interface
B) Identifying the target audience and defining website goals
C) Testing the website for bugs and performance issues
D) Launching the website for public access

Lesson Proper

THE INTERNET

The Internet is a vast, global network of devices and computers connected to communicate
and exchange data worldwide. It is a distributed network transporting data through the
Transmission Control Protocol/Internet Protocol (TCP/IP). The birth of the Internet is
traced to the Advanced Research Projects Agency Network (ARPANET), a U.S. Department
of Defense innovation of the late 1960s designed for use in the military and for research
(Leiner et al., 2009). The Internet has since expanded into a public and commercial network,
revolutionizing communication, business, education, and entertainment.

The most basic role of the Internet is exemplified by the World Wide Web (WWW), a system
of information that enhances users' capacity to access and share digital information through
websites and hyperlinks. The Internet also enables various services such as email, social
networking, cloud computing, and online shopping. The Internet's infrastructure is an
interconnected network of networks, servers, and data centers that enable seamless
connectivity. The rapid advancement of wireless networks and mobile technology has
mainly enhanced global access to the Internet, hence filling the gaps between people and
organizations worldwide (Castells, 2010).

The Internet has transformed modern society with a deep reach, changing numerous
industries and shaping human-to-human interactions. It enables instant messaging and
video conferencing, remote working and e-learning, and access to a vast repository of
information. It also poses numerous challenges, including cybersecurity attacks, privacy
issues, and unequal access to the Internet by regions and socio-economic factors (Hunsinger
et al., 2020). With technology evolving incessantly, the Internet keeps changing, integrating
artificial intelligence, the Internet of Things (IoT), and 5G networks, thus enhancing
connectivity and fueling digital transformation.

2
WORLD WIDE WEB (WWW)

World Wide Web (WWW) is a collection of interconnected hypertext documents accessible

for retrieval over the Internet. The system was conceived by Tim Berners-Lee in 1989 when
he was an employee at CERN, and a website was developed in 1991. WWW operates on
three fundamental technologies: Hypertext Markup Language (HTML), which is used to
structure content; Uniform Resource Locators (URLs), whose function is to provide web
resources' identification; and Hypertext Transfer Protocol (HTTP), which is used to enable
data exchange (Berners-Lee, 1999). The Web allows users to navigate documents through
hyperlinks, thus offering seamless access to extensive information. Compared to the
Internet, the global network infrastructure of interconnected networks, the Web is
recognized as a service that runs on this infrastructure.
The history of the Web can be divided into three broad phases: Web 1.0, Web 2.0, and Web
3.0. Web 1.0, the initial phase, was predominantly static and read-only, with users able to
read content but not interact much. Web 2.0 brought dynamic and user-generated content,
and social networking sites, wikis, and interactive applications gained prominence (O'Reilly,
2005). Web 3.0, or the semantic Web, is focused on improving machine comprehension of
data through artificial intelligence and decentralized technologies such as blockchain
(Berners-Lee et al., 2001).

The WWW has revolutionized global communication, learning, business, and entertainment
to a large extent. It facilitates e-learning websites, e-commerce web-based shopping,
telecommuting, and social networking, forming a contemporary digital culture. Data
privacy, disinformation, and cyberattacks remain threats to its progress. With the emerging
technologies of the Internet of Things (IoT) and artificial intelligence (AI), the Web will
likely keep evolving with even more intelligent and customized user interfaces. Knowing the
WWW's structure and history is essential to unleash its potential responsibly in the digital
era.

TYPES OF WEBSITES

Static Websites
A static website consists of fixed content and does not change dynamically. These websites
are typically built using HTML, CSS, and sometimes JavaScript without a backend database.

Characteristics:
 Simple and fast to load
 Requires manual updates to change content
 Best for informational or small-scale websites

Example: A personal portfolio site or a company’s landing page with basic contact details
and services.

Dynamic Websites
A dynamic website generates content on the fly, often using databases and server-side
technologies such as PHP, Python, Node.js, or ASP.NET.

Characteristics:
 Content changes dynamically based on user interaction
 Uses a database (e.g., MySQL, PostgreSQL) to fetch data

3
  More complex and resource-intensive than static websites

Example: Social media platforms like Facebook and news websites like CNN, where content
updates in real-time.

E-commerce Websites
An e-commerce website is an online platform where users can buy and sell products or
services.

Characteristics:
 Shopping cart functionality and payment gateways
 Product listings and user authentication
 Secure transactions and order management

Example: Amazon, eBay, Shopify stores.

Portfolio Websites
A Portfolio Websites Designed to showcase a person’s work, particularly for artists,
designers, and developers.

Characteristics:
 Visually appealing with project showcases
 Contact details and a resume section

Example: A graphic designer’s portfolio on Behance or a developer’s portfolio using GitHub

Pages.

Blogging Websites
A blog website allows users to publish articles, news, and personal opinions on different
topics.

Characteristics:
 Content management systems like WordPress, Blogger, or Medium
 Comment sections for audience engagement

Example: TechCrunch (tech news blog), WordPress blogs.

Business/Corporate Websites
These websites represent companies and organizations, providing details about services,
products, and contact information.

Characteristics:
 Professional design with branding elements
 Often includes company history, services, and client testimonials

Example: Apple.com (corporate website of Apple Inc.).

Educational Websites

4
Used for learning and online courses.

Characteristics:
 Online courses, quizzes, and interactive learning tools
 Often subscription-based or free with ads

Example: Coursera, Udemy, Khan Academy.

Entertainment Websites
Provides movies, music, games, and other multimedia content.

Characteristics:
 Video and audio streaming
 High traffic and user interaction

Example: Netflix, YouTube, Spotify.

Forum & Community Websites

Focus on discussions and user-generated content.

Characteristics:
 Users can create posts, reply, and interact
 Moderation and ranking systems (like upvotes)

Example: Reddit, Quora, Stack Overflow.

Government & Nonprofit Websites

Provide information about government services, policies, and nonprofit organizations.

Characteristics:
 Often static or dynamic depending on the function
 Secure and official-looking design

Example: USA.gov (U.S. government website) or UNICEF.org.

Web Development Life Cycle Discussion

The Web Development Life Cycle (WDLC) consists of several phases to ensure a structured
and efficient development process. The six key phases are:

5
1. Gathering Relevant Information- At this initial stage, developers collect requirements
and information needed for the project:
 Client interviews to understand business goals
 Market research to identify target audience
 Competitive analysis of similar websites
 Technical requirements and constraints

Example: For an e-commerce website, developers would gather information about product
categories, payment gateways, shipping methods, and customer preferences.

2. Planning: Sitemap and Wireframe- This phase involves creating the blueprint for the
website:
 Developing a sitemap showing page hierarchy
 Creating wireframes to outline layout and user flows
 Planning database structure
 Defining technical specifications

Example: For a news website, this would include planning category pages, article
templates, user registration flows, and search functionality wireframes.

3. Design: Layout- The visual design stage transforms wireframes into polished designs:
 Creating mockups with brand colors and typography
 Designing UI components and interactive elements
 Creating responsive layouts for different devices
 Establishing design systems and style guides

Example: For a banking website, designers would create secure login interfaces, dashboard
layouts, and transaction screens with clear visual hierarchy.

6
4. Development-This is the coding and implementation phase:
 Front-end development (HTML, CSS, JavaScript)
 Back-end development (server, database, APIs)
 Integration of third-party services
 Implementation of CMS if needed

Example: Developers building a social media platform would code user authentication, post
creation functionality, commenting systems, and notification features.

5. Testing, Review, and Launch- This critical phase ensures quality before the website
goes live:
 Cross-browser and device testing
 Performance optimization
 Security testing
 User acceptance testing
 Deployment to production servers

Example: Before launching a healthcare portal, thorough testing would verify HIPAA
compliance, form submission security, and accessibility standards.

6. Gathering Relevant Information (again)-This appears to be an ongoing or post-launch

phase for gathering performance data:
 Analytics review
 User feedback collection
 Performance monitoring
 Planning for future iterations

Example: After launching an educational platform, developers would analyze user

engagement metrics, gather student feedback, and identify features for improvement in the
next iteration.

References
Castells, M. (2010). The rise of the network society (2nd ed.). Wiley-Blackwell.
Hunsinger, J., Allen, M., & Klastrup, L. (Eds.). (2020). Second international handbook of
internet research. Springer.

7
Leiner, B. M., Cerf, V. G., Clark, D. D., Kahn, R. E., Kleinrock, L., Lynch, D. C., Postel, J., Roberts,
L. G., & Wolff, S. (2009). A brief history of the Internet. ACM SIGCOMM Computer
Communication Review, 39(5), 22-31.
Berners-Lee, T. (1999). Weaving the Web: The Original Design and Ultimate Destiny of the
World Wide Web by Its Inventor. Harper San Francisco.
Berners-Lee, T., Hendler, J., & Lassila, O. (2001). The Semantic Web. Scientific American,
284(5), 34-43.
O'Reilly, T. (2005). What is Web 2.0? Design patterns and business models for the next
generation of software. O'Reilly Media.

Topics Covered:
1. Essential Web Development Tools (Editors, Browsers, Debugging Tools)
Activities:
Research and report on the history and evolution of the Web.
Compare different types of websites.
Hands-on activity: Set up a basic web development environment.

Module 2: Structuring Web Pages with HTML

Learning Objectives:
1. Understand the structure of an HTML document.
2. Use basic HTML tags for content structuring.
3. Organize HTML files and naming conventions.
4. Implement links, images, and lists in HTML.
Topics Covered:
Basic HTML Structure
1. Headings, Paragraphs, and Formatting Tags
2. Links and Navigation
3. Images and Multimedia Elements
4. Lists (Ordered, Unordered, Description Lists)
Activities:
Create a simple webpage using basic HTML elements.
Hands-on exercise: Insert and format images and links in a webpage.
Peer review of created HTML pages.

Module 3: Enhancing Web Pages with CSS

Learning Objectives:
Differentiate between Inline, Internal, and External CSS.
Apply CSS properties to style web pages.
Implement responsive design techniques.
Explore CSS frameworks like Bootstrap or Tailwind CSS.
Topics Covered:
CSS Selectors and Properties
Box Model and Layout Techniques

8
Responsive Design with Media Queries
Introduction to CSS Frameworks
Activities:
Style a basic webpage using CSS.
Design a responsive layout using media queries.
Group project: Create a styled multipage website.

Module 4: Advanced Web Design Concepts

Learning Objectives:
Use semantic HTML5 elements for better structure and accessibility.
Implement best practices in web design.
Plan and create a multipage website.
Evaluate web pages for usability and performance.
Topics Covered:
Semantic vs. Non-Semantic Elements
Website Planning and Wireframing
Performance Optimization Techniques
Testing and Debugging Websites
Activities:
Build a multipage website following best design practices.
Conduct usability testing on a peer's website.
Final project presentation and feedback session.

Assessment and Evaluation

Quizzes & Written Assessments: 25%
Laboratory Exercises & Case Studies: 30%
Project Work: 20%
Midterm & Final Exams: 25%

References:
Web Programming with HTML5, CSS, and JavaScript - John Dean (2019)
Web Design with HTML & CSS3 - Jessica Minnick (2017)
Introduction to Web Development using HTML5 - Kris Jamsa (2014)