1.

INTRODUCTION TO WEB

1.1 What is Web

What is www?
The World Wide Web (WWW) is a vast collection of interconnected information that can be
accessed via the internet. It enables users to visit websites, access videos, engage in online
gaming, and moreHere are some key points to understand:

● Websites: A website is a group of connected web pages about a specific topic. Websites
can be about anything—like sports, music, or education.
● Web Pages: A web page is a single document on a website. It’s what you view when you
enter a URL in your browser.

History of WWW:

In 1980, Tim Berners-Lee began researching how computers

could store information with links. In 1989, while working at
the European Particle Physics Laboratory, he proposed the
idea of a global hypertext space where information could be
linked using a single "universal Document Identifier." This
idea grew in 1990 and became known as the World Wide
Web.

Evolution of the Web

The World Wide Web has changed a lot since it started. Let’s look at how it has evolved over
time:

1. Web 1.0 (The Static Web: 1990-2000s)

● Content: Web 1.0 was the first version of the web. It was mainly made up of static web
pages—simple, read-only content. Users could only view information, but they couldn't
interact with it much.
● Technology: Websites were created using basic HTML, which displayed text, images, and
links. There were no dynamic or interactive features.
● User Experience: The user experience was very limited. Websites didn’t have dynamic
content, and there was no way for users to contribute or modify the content.
Example: Early websites like Yahoo! or Ask Jeeves allowed people to find information but not
interact with the content.

2. Web 2.0 (The Social Web: 2000-2010)

● Content: Web 2.0 marked the rise of interactive and social websites. Users were no
longer just passive readers; they could now contribute, share, and engage with content.
● Technology: New technologies like CSS, JavaScript, and AJAX allowed for more dynamic
websites. The introduction of databases and server-side programming languages (like
PHP) made it possible for websites to store and retrieve user data, leading to the growth
of social networks, blogs, and e-commerce sites.
● User Experience: Users could now interact with websites through comments, forms,
videos, and live chats. Social media platforms and e-commerce grew during this time.

Example: Websites like Facebook, YouTube, and Wikipedia allowed users to share content, post
comments, and interact with others.

3. Web 3.0 (The Semantic Web: 2010 onwards)

● Content: Web 3.0 is still evolving and is often called the "Semantic Web." The goal is to
make the internet more intelligent by allowing machines to understand and interpret
data in a way that is meaningful.
● Technology: The use of Artificial Intelligence (AI), Machine Learning (ML), and Natural
Language Processing (NLP) will allow web applications to process and understand
content better. Blockchain technology is also part of Web 3.0, enabling decentralized
platforms where users have more control over their data.
● User Experience: Websites and apps provide personalized content based on user
preferences. Users have more control over their data and privacy.

Example: A music app (e.g., Spotify) that uses AI to suggest songs you might like, or services like
Siri, Google Now, and Wolfram Alpha, which use AI to provide personalized recommendations
and answers.
Key Points:

Web 1.0 - Read-only, static pages.

Web 2.0 - Social, interactive, and dynamic pages.

Web 3.0 - Intelligent, decentralized, and personalized.

Additional Information (Not for Exams):

Web 3.0 is still changing, but people are already talking about Web 4.0 and Web 5.0. These are
ideas about the future of the internet. They are not fully developed yet, but they imagine a web
that understands us better, feels more personal, and connects with how we act. Web 4.0 might
use more AI and virtual reality, while Web 5.0 could make the web understand our emotions.

Key Concepts Related to the Web

It’s important to understand that the internet and the web are not the same:

The Internet:

● The internet is a huge network of connected computers around the world.

● It allows different devices to communicate with each other.
● It’s like the roads that connect different places.

The Web,:
 ● The web, or World Wide Web (WWW), is a system of websites and pages you can
visit using the internet.
● It’s made up of websites with text, images, videos, and links.
● It’s like the places (websites) you can visit on the internet.

In short: Internet is the connection, like roads. Web is the content, like the places you visit on
those roads.

The Importance of the Web

The web has changed how we communicate, share information, and access services. Its
significance includes:

● Information Access: Quickly find information on almost any topic.

● Communication: Connect with people worldwide through social media, emails, and
messaging platforms.
● E-Commerce: Shop online and access services without leaving home.

1.2 How does the Web work?

To understand how we access websites, let’s break it down into three main parts: Web
Browsers, Servers, and URLs.

1. Web Browsers

A web browser is a program that allows us to view web pages. Popular web browsers
include:

○ Google Chrome
○ Mozilla Firefox
○ Safari
○ Microsoft Edge
 When you type a website address (URL) into the browser and press enter, the browser
sends a request to the web server that holds the website’s information.

2. Servers

A server is a powerful computer that stores websites and their files (like text, images,
and videos). When you request a web page, the server sends the information back to
your browser.

Think of the server like a library where websites (books) are kept. When you ask for a
website (book), the server (librarian) sends it to you.

3. URLs (Uniform Resource Locators)

A URL is the address that tells the browser where to find specific web pages. For
example, the URL for Google is https://www.google.com.

A typical URL has three parts:

● Protocol: This tells the browser how to connect. Most websites use HTTP or
HTTPS (the ‘S’ stands for secure).
● Domain Name: The name of the website (e.g., google.com).
● Path: The specific address of a page (e.g., /search).

4. How Information is Transferred

The web uses HTTP (HyperText Transfer Protocol) to send information between the
browser and the server. This allows you to load pages, click on links, and interact with
websites.

Activity 1: Explore Websites

Objective: To help students understand how websites work and explore the evolution of the
Web.

1. Goal: Visit three different websites, each representing a different phase of the Web's
evolution.
○ Visit a basic website (Example: A simple personal blog or old website) – this
represents Web 1.0.
○ Visit a social or interactive website (Example: Facebook or Wikipedia) – this
represents Web 2.0.
 ○ Visit a personalized or AI-driven website (Example: Spotify, Google Now, or
Amazon) – this represents Web 3.0.
2. Questions to Answer:
○ What is the main purpose of each website?
○ How does the website allow you to interact with the content (e.g., can you
comment, share, or personalize your experience)?
○ Which version of the Web do you think the website represents (Web 1.0, 2.0, or
3.0)? Why?

Activity 2: Build a Simple URL Map

Objective: To help students understand how websites work and explore the evolution of the
Web.

1. Goal: Learn how to break down and understand a URL. Take a URL like
https://www.example.com/blog/article.
● Protocol: What type of connection is used (HTTP or HTTPS)?
● Domain Name: What is the name of the website?
● Path: What specific page is being accessed?
2. Task: Write out the parts of the URL for three websites you visit regularly. Share your
findings with a partner.

1.3 Web Development

Web development refers to the creating, building, and maintaining of websites. It includes
aspects such as web design, web publishing, web programming, and database management. It
is the creation of an application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

● Web: It refers to websites, web pages or anything that works over the internet.
● Development: It refers to building the application from scratch.

Web development has two main parts:

● Frontend Development: This is the part of the website users see and interact with.
● Backend Development: This is the part that works behind the scenes to make everything
function.
Web development is essential in today’s world because it helps businesses, individuals, and
organizations establish their presence online and connect with people globally.

1.4 Types of Web Development

Frontend Development
Frontend development focuses on creating the visible parts of a website, like its design, layout,
and interactive features. It determines how the website looks and feels to the user.

Key Technologies:

● HTML (HyperText Markup Language): Provides the basic structure of a webpage, like
headings, paragraphs, and images.
● CSS (Cascading Style Sheets): Styles the webpage with colors, fonts, and layouts.
● JavaScript: Adds interactivity, such as buttons that respond to clicks or animations that
bring a page to life.

Backend Development

Backend development manages everything users don’t see but is critical to how a website
works. It handles data storage, user requests, and server responses.
Backend development is about managing the server, database, and application logic that power
the website.

● Role of the Server: Handles requests from users and sends appropriate responses.
● Role of Databases: Stores and retrieves data for the website.
● Server-Side Languages: Examples include PHP, Python, Ruby, and Node.js.

Full-Stack Development
Full-stack development combines frontend and backend skills. Full-stack developers can build a
complete web application, from designing the user interface to managing the server and
database.

1.5 Tools Used in Web Development

Text Editors and IDEs
These tools help developers write, edit, and organize code.

Examples: Visual Studio Code, Sublime Text, Atom.

Web Development Frameworks

Frameworks make web development faster and more organized.
● Frontend Frameworks: React, Angular, Vue.js, Bootstrap.
● Backend Frameworks: Express.js, Django, Ruby on Rails.

Version Control Systems

Helps track changes in code and allows developers to collaborate easily.
Examples: Git and GitHub.

Web Hosting and Domains

Web Hosting: Services like Netlify, AWS, or HostGator make websites accessible online.
Domains: Unique addresses (e.g., www.example.com) help users find websites.

1.6 Types of Websites

Websites are created for different purposes and can be categorized as follows:
Static Websites
Description: Static websites have fixed content that does not change unless manually updated
by a developer. They are created using basic web technologies like HTML and CSS.
Features: Simple, fast to load, and cost-effective to build.
Examples:
● Personal portfolios showcasing work.
● Basic informational pages for businesses or events.

Dynamic Websites
Description: Dynamic websites display content that changes based on user interaction or data
from the server. They use scripting languages like PHP, Python, or JavaScript to manage this
functionality.
Features: Interactive, user-friendly, and data-driven.
Examples:
● Social media platforms like Facebook and Twitter.
● News websites with frequently updated content.

E-commerce Websites
Description: These websites allow businesses to sell products or services online. They include
features like shopping carts, payment gateways, and product catalogs.
Features: Secure transactions, easy navigation, and customer reviews.
Examples:
● Global marketplaces: Amazon, eBay.
● Niche online stores: Websites selling local or handcrafted products.

Content Management Systems (CMS)

Description: CMS-powered websites make it easy for users to add, update, and manage content
without deep technical skills.
Features: Templates for design, user-friendly interfaces, and flexible content organization.
Examples:
● Personal blogs for writers or photographers.
● News portals or online magazines.
Web Applications
Description: These websites function like software applications, offering complex features for
user interaction.
Features: User authentication, real-time collaboration, and advanced functionalities.
Examples:
● Google Docs for document creation and collaboration.
● Online calculators or booking systems.

1.7 Single Page Vs Multi-Page Application

Single-Page Applications (SPAs)

● What are SPAs?

SPAs are websites or web applications where everything happens on one page. Instead
of reloading the whole page when you click something, only the required part of the
page updates.
● How do they work?
SPAs load most of the resources (like code and images) once when you open the
website. After that, the website only sends or receives small pieces of data, which makes
it faster and smoother.
● Advantages of SPAs:
○ Fast performance: Since only parts of the page update, users don’t have to wait
for the whole page to reload.
○ User-friendly experience: Everything feels seamless because the page doesn’t
reload.
○ Simple development: Developers don’t need to write extra code for creating
new pages on the server.
● Examples of SPAs:
○ Gmail: When you open an email or compose a message, the page doesn’t reload.
○ Google Docs: You can type and edit in real-time without leaving the page.

Multi-Page Applications (MPAs)

● What are MPAs?
MPAs are websites or web applications that have multiple pages. Whenever you click on
a link or button, the entire page reloads, even if you are just loading a small part, like an
image or icon.
 ● How do they work?
MPAs follow the traditional way of working. They are designed for large-scale websites
that need to handle a lot of content. These applications usually have several levels,
subsections, and links to other pages.

● Advantages of MPAs:
○ They are good for websites with a lot of content, like online shopping platforms
or educational portals.
○ They are more secure because the frameworks and tools used to build MPAs
have been tested for years.
● Examples of MPAs:
○ E-commerce websites like Amazon or Flipkart.
○ News websites with many articles and categories.

Activity 3: Explore Websites

Objective: Help students identify different types of websites based on their features and
purpose.

Instructions:
1. Divide students into small groups.
2. Provide the following scenarios and ask groups to classify each website as Static,
Dynamic, E-commerce, CMS, or Web Application:
a. A blog for sharing travel stories.
b. An online shop selling handmade jewelry.
c. A social media platform for sharing updates and photos.
d. A portal for reading news articles updated daily.
e. A tool for editing and sharing documents online.
3. Ask each group to present their classifications and explain their reasoning.

Activity 4: Explore Websites

Objective: Help students identify Single Page Applications (SPAs) and Multi-Page Applications
(MPAs) by researching examples.

Instructions:
● Divide students into small groups.
● Ask each group to research and list 5 websites that are SPAs and 5 that are MPAs
 ● Have each group present their list of websites and explain why they classified them as
SPAs or MPAs.

Summary:

What is the Web?

The Web (WWW) is a collection of linked information accessed via the Internet, including
websites with text, images, and videos.

History and Evolution:

● Web 1.0: Static websites (1990-2000s).

● Web 2.0: Interactive, social websites (2000-2010).
● Web 3.0: Personalized, AI-driven websites (2010 onwards).

Key Difference:
The Internet connects computers; the Web is the content accessed over it.

How It Works:
Browsers (e.g., Chrome) access websites stored on servers. URLs help browsers find specific
pages.

Web Development:

● Frontend: Design and user interaction (HTML, CSS, JavaScript).

● Backend: Servers, databases, and logic (PHP, Python, Node.js).

Types of Websites:

● SPAs: Dynamic, fast-loading (e.g., Gmail, Google Docs).

● MPAs: Multiple pages, content-heavy (e.g., Amazon, news sites).

Tools: Text editors (VS Code), frameworks (React, Django), version control (Git), hosting (AWS,
Netlify).