Introduction to Web Technologies (25CSE0101)
Lecture-1
1. What is Web?
2. History of the Web.
3. What are Internet and Intranet?
4. How does the internet work?
5. What is Client Server Architecture?
6. Frontend and Backend in web
7. What Happens When You Visit a website?
The web—short for the World Wide Web (WWW)—is a system for accessing and sharing
information over the internet, using a combination of web browsers, web servers, and
hyperlinks.
It’s not the same thing as the internet—the internet is the underlying network of computers, and
the web is one of the services that runs on it (like email or file transfer).
What the Web Is
Definition: The web is a collection of interconnected documents and resources, linked by
hyperlinks and identified by URLs.
How It Works:
1. You type a web address (URL) into a web browser.
2. The browser sends a request to a web server.
3. The server sends back HTML (and often CSS, JavaScript, images, etc.).
4. The browser displays it to you.
History of the Web
1989 – Invention
Inventor: Sir Tim Berners-Lee at CERN (European Organization for Nuclear Research).
He proposed a system to share and link documents over the internet using hypertext.
1990 – First Prototype
Berners-Lee developed:
o The first web browser (World Wide Web, later renamed Nexus).
o The first web server (info.cern.ch).
o The first webpage (about the project itself).
1993 – Public Release
Mosaic browser (by Marc Andreessen’s team at NCSA (National Center for
Supercomputing Applications in the U.S.)) made the web popular—first with images inline
with text.
The web started spreading beyond scientific institutions.
Mid–1990s – Web 1.0 Era
Mostly static HTML pages.
Limited interactivity—used mainly for reading information.
Early search engines like Lycos, Yahoo, AltaVista appeared.
2000s – Web 2.0
User-generated content, social media, blogs, and interactive sites emerged.
Technologies like JavaScript, AJAX, and CSS allowed dynamic content.
Platforms like Facebook, YouTube, Wikipedia flourished.
2010s–Present – Web 3.0 and Beyond
Increased use of AI, personalization, and mobile-first design.
Web apps rival desktop software (Google Docs, Figma).
Growth of blockchain-based applications and decentralized web ideas.
Voice assistants and IoT integration.
Fact
The first-ever website is still online:
🔗 http://info.cern.ch — a simple, text-only page explaining the project.
How does the internet work?
The internet works like a huge global postal system—but instead of moving paper letters, it
moves packets of data between computers.
Here’s the breakdown:
1. The Basics
Internet = A worldwide network of networks.
Devices (computers, phones, servers, sensors) communicate using a common set of rules
called protocols (mainly TCP/IP).
The internet doesn’t have a single “control center”—it’s decentralized.
2. How Data Travels
Step 1 – You Make a Request
Example: You type www.example.com into your browser.
Step 2 – Domain Name System (DNS)
The name (“example.com”) is translated into an IP address (like 93.184.216.34)—
similar to looking up a phone number in a directory.
Step 3 – Your Device Sends Packets
The request is broken into small chunks called data packets.
Each packet contains:
o The destination IP address.
o The source IP address.
o The piece of the data it carries.
Step 4 – Routers Guide the Way
Routers act like postal sorting centers.
They look at the destination address and forward packets toward it.
Packets might take different routes to reach the destination.
Step 5 – The Destination Responds
The server hosting example.com sends packets back to you.
TCP (Transmission Control Protocol) ensures:
o Packets arrive in order.
o Missing packets are resent.
Step 6 – You See the Result
Your browser reassembles the packets and displays the web page.
3. Key Infrastructure
Cables & Wireless: Data moves via fiber-optic cables (undersea & underground), copper
wires, and radio waves (Wi-Fi, cellular).
Servers: Store and serve websites, files, apps.
Routers & Switches: Direct traffic.
Protocols:
o IP – addressing and routing.
o TCP – reliable delivery.
o HTTP/HTTPS – how browsers request and display websites.
What is Client Server Architecture?
Client–Server Architecture is a computing model where tasks are divided between clients
(which request services) and servers (which provide services).
How It Works
1. Client – The device or application that makes requests (e.g., your web browser, mobile
app).
2. Server – A powerful computer or program that listens for requests and responds with the
requested data or services.
3. Communication – Usually happens over a network (like the internet) using standard
protocols (HTTP, FTP, SMTP, etc.).
Example
When you open www.example.com:
1. Your browser (client) sends a request for the website.
2. The web server processes that request.
3. The server sends back HTML, CSS, images, etc.
4. The browser displays the website to you.
Key Features
Separation of roles – Clients handle the user interface; servers handle data and logic.
Scalability – You can add more clients or upgrade servers independently.
Centralized control – Data and business logic live on the server, making updates easier.
Common Types
Two-Tier Architecture – Client ↔ Server.
Three-Tier Architecture – Client ↔ Application Server ↔ Database Server.
Multi-Tier Architecture – Multiple layers of servers for complex systems.
Frontend and Backend in web
In web development, frontend and backend are the two main sides of how a website or web app
works—kind of like a theater play:
Frontend = what the audience sees (stage, actors, costumes)
Backend = what happens behind the curtain (scripts, props, lighting controls)
1. Frontend (Client-Side)
Definition: The part of a website or application the user directly interacts with.
Purpose: Focuses on design, layout, and user experience.
Main technologies:
HTML – structure of the page
CSS – styling and layout
JavaScript – interactivity and dynamic content
Frameworks & libraries: React, Angular, Vue.js
Examples of frontend work:
Buttons, menus, forms
Animations, sliders, image galleries
Responsive design (mobile-friendly layout)
2. Backend (Server-Side)
Definition: The behind-the-scenes part that handles data storage, business logic, and server
operations.
Purpose: Processes requests, manages databases, and sends responses back to the frontend.
Main technologies:
Languages: Python, Java, PHP, Ruby, C#, Node.js
Databases: MySQL, PostgreSQL, MongoDB
Frameworks: Django, Laravel, Spring, Express.js
Examples of backend work:
User authentication (login systems)
Fetching and storing data in a database
Running calculations or processing files
APIs for communication between systems
API: Application Programming Interface, an API is like a messenger that allows two different software
programs to talk to each other. API = Rules + Tools that let software interact.
Example: Zomato
The app uses an API to connect with the restaurant’s system (to get menu, prices,
availability).
Another API connects with the payment gateway (Paytm, UPI, card services).
How They Work Together
1. You (frontend) click “Submit” on a form.
2. The browser sends the data to the backend server.
3. The backend processes it (e.g., saves it in a database).
4. The backend sends a response (success message, updated page) to the frontend.
5. The frontend updates what you see.
Summary Table
Aspect Frontend Backend
Runs on Browser Server
Focus User interface & experience Data, logic, and security
Languages HTML, CSS, JS Python, Java, PHP, Node.js
Data storage None directly Database connected
Example A “Buy Now” button you click Code that processes the purchase
What Happens When You Visit a website?
When you visit a website (say you type www.example.com into your browser), a lot of things
happen very quickly behind the scenes. Here’s the step-by-step breakdown:
1. You enter the URL
You type the website address (URL) into your browser’s address bar and press enter.
2. DNS Lookup (Finding the server)
Your browser needs to figure out the IP address of the website (like a phone number for
a server).
It checks:
1. Browser cache → Has it visited recently?
2. Operating system cache → Is it stored locally?
3. Router cache → Does your router know it?
4. ISP’s DNS server → If not found, it asks the Domain Name System (DNS)
servers.
Eventually, the domain (example.com) is translated into an IP address like
93.184.216.34.
3. Browser initiates a connection
Your browser connects to the server’s IP using TCP/IP (Transmission Control Protocol /
Internet Protocol).
If it’s https://, a TLS/SSL handshake happens to establish a secure encrypted
connection.
4. HTTP request is sent
The browser sends an HTTP request (Hypertext Transfer Protocol) to the server.
Example:
GET / HTTP/1.1
Host: www.example.com
This request asks for the website’s content.
5. The server processes the request
The website’s server receives the request.
If it’s a static site, it just retrieves HTML, CSS, JavaScript, or image files.
If it’s a dynamic site, the server may run code (PHP, Node.js, Python, etc.), query a
database, and then generate a response.
6. The server sends a response
The server responds with an HTTP response.
Example:
HTTP/1.1 200 OK
Content-Type: text/html
Along with this response, it sends the requested files (HTML, CSS, JavaScript, images,
etc.).
7. The browser renders the page
The browser takes the HTML and:
o Builds the DOM (Document Object Model) from HTML.
o Downloads linked resources (CSS for styling, JavaScript for interactivity, images,
etc.).
o Builds the CSSOM (CSS Object Model).
o Runs JavaScript to add dynamic behavior.
o Combines everything into a visual layout.
The result is the web page you see.
8. Additional requests
Many pages load extra files (ads, analytics scripts, videos, fonts, etc.).
The browser may make dozens or even hundreds of requests behind the scenes.
9. Page is displayed
Finally, the page is shown to you, and JavaScript may keep running to update things
dynamically (like live chat, stock prices, social media feeds).
In short: DNS lookup → Connection → Request → Response → Render → Display.
