0% found this document useful (0 votes)
23 views124 pages

Unit 1 - CA 1 (Autosaved)

Unit 1 provides an overview of the World Wide Web, its history, and the evolution of web technologies from Web 1.0 to Web 4.0. It discusses the differences between the Internet and the Web, the client-server model, web standards, and the development of HTML. Additionally, it highlights the importance of organizations like W3C in maintaining web standards and ensuring accessibility.

Uploaded by

rashmimaruthi2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
23 views124 pages

Unit 1 - CA 1 (Autosaved)

Unit 1 provides an overview of the World Wide Web, its history, and the evolution of web technologies from Web 1.0 to Web 4.0. It discusses the differences between the Internet and the Web, the client-server model, web standards, and the development of HTML. Additionally, it highlights the importance of organizations like W3C in maintaining web standards and ensuring accessibility.

Uploaded by

rashmimaruthi2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

Unit 1- CA 1

Unit 1
Introduction to the World Wide Web, History of the
Internet and Web, Difference Between Internet and
World Wide Web, Evolution of Web Technologies
(Web 1.0, Web 2.0, Web 3.0), How the Web Works
(Client-Server Model, Basics of URLs and
Hyperlinks, Introduction to Web Browsers,
Evolution of Search Engines, Basics of
HTTP/HTTPS, TCP/IP, Development of HTML
Standards, Importance of Web Standards (W3C),
Introduction to Semantic Web, The Rise of Dynamic
Websites, Future of the Web (AI and Web 4.0).
World wide web and
its evolution
• The World Wide Web is the universe of network-
accessible information, an embodiment of human
knowledge.

• In simple terms, The World Wide Web is a way of


exchanging information between computers on the
Internet, tying them together into a vast collection
of interactive multimedia resources.
History of WWW and
Internet
• 🔹 1950s – 1960s: Early Concepts
• ✔ The idea of a global computer network was first
imagined by scientists.
✔ In 1958, the U.S. created ARPA (Advanced
Research Projects Agency) to develop technology.
✔ In 1961, Leonard Kleinrock introduced the
concept of packet switching, a method for
efficiently sending data over networks.
1969: The First Internet – ARPANET
✔ ARPANET (Advanced Research Projects Agency Network) was the first real internet.
✔ Developed by the U.S. Department of Defense, it connected four universities:
UCLA
Stanford Research Institute
University of California, Santa Barbara
University of Utah
✔ October 29, 1969 – The first message was sent over ARPANET: "LO" (it was supposed to
be "LOGIN", but the system crashed).
🔹 1970s: Expansion of Networking
✔ 1971 – Email was invented by Ray Tomlinson.
✔ 1973 – The first international connection was made between the U.S. and the
U.K./Norway.
✔ 1974 – The term “Internet” was first used.
✔ 1978 – TCP/IP protocol was developed by Vinton Cerf and Robert Kahn, laying the
foundation of the modern internet.
. The Birth of the World Wide Web (WWW)The Web was not invented at the same time as
the Internet. It came much later.
🔹 1980s: Pre-Web Era
✔ 1983 – The internet officially adopted TCP/IP.
✔ 1984 – DNS (Domain Name System) was introduced (e.g., .com, .org).
✔ 1989 – British scientist Tim Berners-Lee at CERN proposed a system to share documents
across networks using hypertext.
1990: The Invention of the Web

✔ Tim Berners-Lee created the first-ever website at CERN.


✔ He also developed:
HTML (HyperText Markup Language) – To create web pages.
HTTP (HyperText Transfer Protocol) – To transfer web pages.
URL (Uniform Resource Locator) – To locate web resources.
1991: The Web Goes Public

• ✔ The World Wide Web (WWW) was launched for public use.
The Internet Boom (1990s – Present)

Year Major Event


1993 The first web browser, Mosaic, was launched.
1994 Amazon and Yahoo! were founded.
1995 Microsoft launched Internet Explorer.
1998 Google was founded.
2004 Facebook was launched, leading to the social media boom.
2005 YouTube was created.
2007 The iPhone was introduced, bringing mobile internet to the masses.
2010s Cloud computing, AI, and IoT changed how we use the web.
2020s The rise of 5G, blockchain, and metaverse technologies.
World Wide Web was created by Timothy Berners Lee in 1989 at CERN in Geneva.
World Wide Web came into existence as a proposal by him, to allow researchers to work
together effectively and efficiently at CERN. Eventually it became World Wide Web.
Internet
The internet is a globally connected network system facilitating worldwide communication
and access to data resources through a huge collection of personal, public, business,
academic and government networks.
It’s governed by agencies just like Internet Assigned Numbers Authority (or IANA) that
establish universal protocols.
S.No. INTERNET WWW

1 Internet is a global network of WWW stands for World wide Web.


networks.

Internet is a means of connecting a World Wide Web which is a collection


2 computer to any other computer of information which is accessed via
anywhere in the world. the Internet.
At some advanced level, to At some advanced level, to
5 understand we can think of the understand we can think of the
Internet as hardware. WWW as software.

Internet is primarily hardware- WWW is more software-oriented


6
based. as compared to the Internet.
English scientist Tim
It is originated sometimes in
7 Berners-Lee invented the
late 1960s.
World Wide Web in 1989.

WWW is a subset of the


8 Internet is superset of WWW.
Internet.

The first version of the


In the beginning WWW was
9 Internet was known as
known as NSFNET.
ARPANET.

10 Internet uses IP address. WWW uses HTTP.


• Brochureware was a term used to describe "simply listing products
and services on a Web site.
• OpenID was created for federated authentication, that is, letting a
third-party authenticate your users for you, by using accounts they
already have.
• The term federated is critical here because the whole point of OpenID
is that any provider can be used (with the exception of white-lists).
You don't need to pre-choose or negotiate a deal with the providers
to allow users to use any other account they have.
Features of WWW

• WWW is open source.


• It is a distributed system spread across various websites.
• It is a Hypertext Information System.
• It is Cross-Platform.
• Uses Web Browsers to provide a single interface for many services.
• Dynamic, Interactive and Evolving.
Web Page

• Web page is a document available on world wide web. Web Pages are
stored on Web server and can be viewed using a web browser.
• A Web page can cotain huge information including text, graphics,
audio, video and hyper links. These hyper links are the link to other
web pages.
Static Web page

• Static web pages are also known as flat or stationary web page.
• They are loaded on the client’s browser as exactly they are stored on the
web server.
• Such web pages contain only static information. User can only read the
information but can’t do any modification or interact with the information.
• Static web pages are created using only HTML.
• Static web pages are only used when the information is no more required
to be modified.
Dynamic Web page

• Dynamic web page shows different information at different point of


time.
• It is possible to change a portion of a web page without loading the
entire web page.
• Examples of Dynamic Web Pages
• Social media platforms (Facebook, Twitter)
• E-commerce sites (Amazon, Flipkart)
• Online forms and dashboards (Google Forms, Admin Panels)
• Streaming services (Netflix, YouTube)
History of HTML
HTML (HyperText Markup Language) has evolved significantly since
its invention in 1991 by Tim Berners-Lee. Below is a timeline of HTML
versions and key features that shaped the web.
1. Early HTML (1991 – 1995)
🔹 1991: HTML 1.0 (The Beginning)
✔ Invented by Tim Berners-Lee at CERN (European Organization for
Nuclear Research - from the French 'Conseil européen pour la Recherche
Nucléaire’).
✔ First version with basic tags for text and links (<p>, <h1>, <a>, <img>).
✔ No tables, forms, or CSS support.
🔹 1995: HTML 2.0 (First Standard)
✔ First official standard by IETF (Internet Engineering Task Force).
✔ Introduced forms (<form>), allowing user input.
✔ Supported tables for better content organization.
✔ Still no CSS or JavaScript support.
2. Growth of HTML (1997 – 1999)

🔹 1997: HTML 3.2 (W3C Standardization)


✔ Standardized by W3C (World Wide Web Consortium).
✔ Added tables, image alignment, and JavaScript support.
✔ Introduced <font> tag for styling text (deprecated later in CSS).
1999: HTML 4.01 (The Web Becomes Interactive)
✔ Major update with support for CSS
(Cascading Style Sheets).
✔ Added <iframe>, <div>, and <span>
for layout control.
✔ Allowed JavaScript to interact with
the page (<script> tag).
✔ Introduced "Strict", "Transitional",
and "Frameset" document types.
💡 Downside: Many sites relied on
tables for layouts, making them hard
to maintain.
3. The XML Era (2000 – 2008)

• 🔹 2000: XHTML 1.0 (Stricter Rules)


• ✔ A combination of HTML & XML
(Extensible Markup Language).
✔ More structured and well-formed
(tags had to be closed properly).
✔ Browsers had trouble supporting it,
slowing adoption.
2004: Start of HTML5
Development
✔ XHTML was too strict, so web developers wanted a simpler HTML
standard.
✔ The WHATWG (Web Hypertext Application Technology Working
Group) was formed.
✔ Focused on interactive elements, multimedia, and backward
compatibility.
4. The Modern Web (2008 – Present)
🔹 2008: HTML5 Draft Published
✔ A revolutionary update focusing on multimedia, semantics, and
performance.
🔹 2014: HTML5 Official Release
✔ Audio & Video Support: <audio>, <video> (No need for Flash!).
✔ Semantic Elements: <header>, <footer>, <article>, <section>.
✔ Canvas & SVG: Graphics and animations without plugins.
✔ Local Storage & WebSockets: Store data on the client side and
enable real-time communication.
✔ Mobile-Friendly Design: Optimized for responsive web design.

🔹 2021: HTML5.2 & HTML5.3 (Current Updates)


✔ Security improvements (sandboxed iframes).
✔ New form controls (<dialog>, <details>, <summary>).
✔ Better accessibility (<main>, <mark>, <time>).
World Wide Web Consortium
(W3C)
• The World Wide Web Consortium (W3C) is an international
organization founded by Tim Berners-Lee in 1994. It develops and
maintains web standards to ensure that the web is open, accessible,
and interoperable for everyone.
• 🔹 Founded: 1994
🔹 Founder: Tim Berners-Lee (Inventor of the Web)
🔹 Website: www.w3.org
🔹 Why is W3C Important?

11️⃣Standardization of Web Technologies


✔ Defines global web standards (HTML, CSS, JavaScript, etc.).
✔ Ensures websites work across all browsers & devices.
✔ Prevents fragmentation (different rules for different browsers).
Ensures Web Accessibility (WAI)
✔ Develops Web Accessibility Guidelines (WCAG).
✔ Helps people with disabilities access the web (e.g., screen readers,
keyboard navigation).

• Promotes an Open Web


• ✔ Prevents any company from controlling the web.
✔ Encourages open-source development and global collaboration.
4️⃣Improves Web Security
✔ Works on secure web protocols (e.g., HTTPS, Web Authentication).
✔ Reduces cyber threats like phishing and data breaches.
5️⃣Advances Web Technologies
✔ Develops new standards like HTML5, CSS3, and Web APIs.
✔ Enables features like WebRTC (real-time communication),
WebAssembly (fast web apps), and Progressive Web Apps (PWAs).
Technology W3C Contribution

HTML (HyperText Markup Language) Defines the structure of web pages.

CSS (Cascading Style Sheets) Standardized styling for web design.

WCAG (Web Content Accessibility Guidelines) Ensures web accessibility for disabled users.

SVG (Scalable Vector Graphics) Web-based graphics without loss of quality.

WebRTC (Web Real-Time Communication) Enables voice/video calls without plugins.

PWA (Progressive Web Apps) Improves mobile web performance.


The World Wide Web Consortium (W3C) defines official HTML & CSS
standards to ensure that web pages are consistent, accessible, and
work across all browsers and devices.
Why W3C Standards Matter

✔ Cross-browser compatibility – Ensures websites work in Chrome,


Firefox, Safari, etc.
✔ Better performance – Optimized code improves loading speed.
✔ Web accessibility – Helps disabled users navigate websites.
✔ Future-proof – Websites built with W3C standards remain valid as
technology evolves.
1 Client
1️⃣
The client is a device (computer, smartphone, browser) that requests services from the
server.
It sends requests via the internet or a local network.
Example: A web browser (Chrome, Firefox) requesting a webpage.
2️⃣Server
The server is a system (computer or cloud service) that processes requests and sends
responses.
It manages databases, files, and business logic.
Example: A web server hosting a website or an API server providing data.
How the Client-Server Model
Works
1.Client sends a request (e.g., user enters a website URL).
2.Server processes the request (fetches data, runs logic).
3.Server sends a response (e.g., HTML page or JSON data).
4.Client renders the response and displays the content.
Types of Client-Server Communication

Web-Based Client-Server Model


Client: Web browser (Chrome, Firefox)
Server: Web server (Apache, Nginx) + Application Server (Node.js, Django)
Communication: HTTP/HTTPS requests
Example: Visiting YouTube → Client requests a video → Server responds with the video.
Mobile-Based Client-Server Model

Client: Mobile App (Android,


iOS)

Server: Backend API


(Firebase, AWS, Django)

Communication: RESTful API


(JSON, XML)

Example: Instagram app


fetching posts from a server.
Application-Based Client-Server Model

CLIENT: DESKTOP APPS (SLACK, SERVER: CLOUD-BASED SERVICES EXAMPLE: ZOOM CLIENT
ZOOM) REQUESTS A VIDEO MEETING
FROM ZOOM’S SERVER.
Client-Server Architecture Types

Two-Tier Architecture (Direct Client-Server)


• Example: A web browser directly fetching data from a database.

Three-Tier Architecture (Client → Server → Database)


• Example: A React frontend communicating with a Node.js backend, which connects to
a MongoDB database.

Multi-Tier Architecture (N-Tier)


• Example: Large-scale applications with multiple layers (e.g., caching servers,
authentication servers).
Advantages of the Client-Server Model

✅ Centralized Management – Data is stored in a central server, making updates easy.


✅ Scalability – New clients can be added without affecting existing ones.
✅ Security – Data access is controlled via authentication and encryption.
✅ Efficiency – Optimized resource allocation and load balancing.
• HTTP (Hypertext Transfer Protocol) and HTTPS (Hypertext Transfer
Protocol Secure) are protocols used for communication between web
clients (browsers, apps) and servers.
What is HTTP?

• HTTP is a protocol that enables the transfer of hypertext (web pages,


images, videos) between a client (browser) and a server. It follows a
request-response model.
• 🔹 Full Form: Hypertext Transfer Protocol
🔹 Port Used: Default port 80
🔹 Encryption: ❌ No encryption (data is sent in plain text)
🔹 Security: ❌ Vulnerable to attacks like MITM (Man-in-the-Middle),
eavesdropping, and data interception
🔹 Use Case: Basic websites that don’t handle sensitive user data.
How HTTP Works?

11️⃣ Client sends a request → A web browser requests a


webpage by sending an HTTP request (e.g., clicking a link).
2️⃣ Server processes the request → The web
server retrieves the requested webpage.
3️⃣ Server sends a response → The webpage
(HTML, CSS, JS) is sent back to the client.
4️⃣ Client renders the content → The user sees the
webpage on their browser.
What is HTTPS?

• HTTPS is a secure version of HTTP that encrypts data to protect it


from hackers. It uses SSL (Secure Sockets Layer) or TLS (Transport
Layer Security) to establish a secure connection.
• 🔹 Full Form: Hypertext Transfer Protocol Secure
🔹 Port Used: Default port 443
🔹 Security: ✅ Protects data from MITM attacks and eavesdropping
🔹 Use Case: Used in banking, e-commerce, login pages, and any site
handling sensitive data.
How HTTPS Works?
• 1️⃣Client sends a request → A user enters a secure website URL (e.g.,
https://www.bank.com).
• 2️⃣Server responds with a certificate → The web server provides an
SSL certificate to verify its identity.
• 3️⃣Secure connection established → The browser and server establish
an encrypted connection.
• 4️⃣Data transfer occurs securely → The webpage is loaded safely.
Key Differences Between HTTP and HTTPS

Feature HTTP HTTPS


Security ❌ Not secure ✅ Secure (uses SSL/TLS)
Data Encryption ❌ No encryption (plain text) ✅ Encrypted (secure from hackers)
Authentication ❌ No certificate required ✅ Requires SSL/TLS certificate
Port Used 80 443
SEO Ranking ❌ Not preferred by Google ✅ Google ranks HTTPS sites higher
Website URL http://example.com https://example.com
Importance of HTTPS

✅ Protects User Data → Prevents hackers from stealing passwords,


credit card details, etc.
✅ Improves SEO → Google gives preference to HTTPS websites in
search rankings.
✅ Builds Trust → Users trust websites with a padlock icon (🔒) in the
address bar.
✅ Prevents MITM Attacks → Secures data from being intercepted.
✅ Required for Online Payments → Payment gateways enforce HTTPS
for secure transactions.
What is a Port? (Networking
Concept) - FYI
• A port is a logical communication endpoint used by devices to send
and receive data over a network. Ports allow multiple services to run
on a single device by directing data to the correct application.
• 💡 Think of a port like a door in a building:
• The IP address is like the building’s address.
• The port number is like a specific door number where a particular
service operates.
Key Features of a Port- FYI

• ✔ Allows multiple applications to use the internet on the same


device.
✔ Identifies a specific process or service running on a server.
✔ Uses numbers ranging from 0 to 65535.
✔ Works with TCP and UDP protocols.
How Ports Work in Networking-
FYI
When a client requests a service from a server:
1.The client sends a request to the server’s IP address and port
number.
2.The server listens on that port for incoming requests.
3.The server processes the request and responds.
FYI
• Example: Web BrowsingWhen you visit https://www.google.com,
• your browser connects to Google’s server
• The server receives the request on port 443, processes it, and sends
back the webpage.
Commonly Used Port Numbers- FYI
Port Number Protocol Service
80 HTTP Web browsing (insecure)
443 HTTPS Secure web browsing
21 FTP File Transfer Protocol
22 SSH Secure Shell (remote login)
25 SMTP Sending emails
110 POP3 Receiving emails
143 IMAP Managing emails
Domain Name System (resolves
53 DNS
website names to IPs)
3306 MySQL MySQL database server
Remote Desktop Protocol
3389 RDP
(Windows remote connection)

Ports 0-1023 are well-known ports reserved for standard services.


FYI
• Types of Ports
1.Well-Known Ports (0-1023)
1. Reserved for system processes (e.g., HTTP, HTTPS, FTP).
2.Registered Ports (1024-49151)
1. Used by software applications (e.g., databases, game servers).
3.Dynamic/Private Ports (49152-65535)
1. Temporary ports assigned for client-side connections.
TCP vs. UDP Ports

🔹 TCP (Transmission Control Protocol)


• ✔ Reliable (ensures data delivery)
✔ Used for web browsing, email, file transfers
✔ Example: Port 80 (HTTP), 443 (HTTPS), 22 (SSH)
🔹 UDP (User Datagram Protocol)
• ✔ Faster but not reliable (no error checking)
✔ Used for live streaming, VoIP, online gaming
✔ Example: Port 53 (DNS), 161 (SNMP)
Checking Open Ports on Your
System
🖥 Windows (Command Prompt)
netstat –an
Shows active ports and connections.
🖥 Linux/Mac (Terminal)
netstat -tulnpLists
open ports and services.
Conclusion

• Ports help computers communicate over a network.


• Each service runs on a specific port (e.g., HTTPS → 443).
• Firewalls and security tools use ports to allow or block network
traffic.
Basics of URLs and
Hyperlinks
URL Hyperlink
A unique address for a web A clickable link that takes
resource, like a webpage, you to another webpage or
image, or video. resource.
Evolution of Search
Engines
1 Early Search Engines
Simple keyword matching, limited results.

2 Advanced Search Engines


Algorithmic ranking, personalized results.

3 Modern Search Engines


Voice search, AI-powered results.
Internet Protocol (IP)

• Think of IP as the address on the envelope. It tells the internet where


to send your data, like a home address tells the post office where to
deliver a letter.
• Each computer has its own unique address on the internet, called an
IP address (like 192.168.1.1). This address is used to know where to
send data.
Transmission Control Protocol
(TCP)
• TCP is like the postman who ensures the letter is delivered correctly.
It makes sure the data:
• Reaches the right place.
• Arrives in the correct order.
• Is complete (not missing pieces).

TCP breaks data into small pieces (called packets) and sends them.
When the packets reach the destination, TCP makes sure they are
reassembled in the correct order.
Sending a Message:

• When you send data (like a message or a file), TCP splits it into small
pieces (packets) and sends them over the internet.
• Each packet has the address (IP) of the destination and some
sequence numbers to know what order they should go in.
Reaching the Destination:

• The packets travel through the internet, like how a letter moves
through the post office. The IP tells where to send each packet.
• TCP ensures the packets arrive in the correct order. If some are lost, it
asks the sender to resend them.
Receiving the Message:

Once all packets are received, TCP reassembles them into the original message
or file and delivers it to the recipient.
1. Breaking the File into Packets
When you send data over TCP/IP, it’s split into smaller packets.
Each packet can carry 100 bytes of data (for this example).
Your file size is 1,000 bytes, so it will be split into 10 packets (1,000 ÷ 100 = 10).
So, the file is now divided into 10 packets:

Packet # Data (Bytes)


Packet 1 100 bytes
Packet 2 100 bytes
Packet 3 100 bytes
Packet 4 100 bytes
Packet 5 100 bytes
Packet 6 100 bytes
Packet 7 100 bytes
Packet 8 100 bytes
Packet 9 100 bytes
Packet 10 100 bytes
2. Assigning IP Addresses

• Each packet is sent using IP addresses, which are like home addresses for
the data. The packets will be sent to your friend's IP address (destination),
and your IP address (source) will be included in the packet header so that
the server knows where to send any responses back.
• Let’s say:
• Your IP address (Client): 192.168.1.1
• Your friend’s IP address (Server): 192.168.1.2
• So each packet will contain this address information:
• Source IP: 192.168.1.1
• Destination IP: 192.168.1.2
3. Sending the Packets (TCP)
Now that the data is split into 10 packets and each has an address, TCP takes care of ensuring the packets
arrive safely and in the correct order.
•TCP Sequence Numbers: Each packet gets a sequence number. This helps the server know what order the
packets should be in when they arrive.

Packet # Sequence Number


Packet 1 1
Packet 2 2
Packet 3 3
Packet 4 4
Packet 5 5
Packet 6 6
Packet 7 7
Packet 8 8
Packet 9 9
Packet 10 10
4. The Journey (Transmission)

• The 10 packets travel from your computer (Client) to your friend's


computer (Server) over the internet.
• Each packet can take a different route through the internet, like how
letters can go through different post offices.
5. Reassembling the Packets
(TCP)
When the packets reach your friend’s computer (Server), TCP will:
1.Check that all 10 packets have arrived.
2.Reassemble them in the correct order using the sequence numbers.
• For example, the packets may arrive in a scrambled order, but TCP will
use the sequence numbers to make sure they are put back together
correctly.
• If any packet is lost, TCP will ask the sender (you) to retransmit it. This
ensures that all packets are successfully delivered.
6. Complete File

• Once all the packets are received and reassembled, your friend will
have the original 1,000-byte file.
Step-by-Step Process of Sending Data Over
TCP/IP
• 11️⃣ Application Layer: User requests a webpage (e.g., using a browser →
HTTP request).
2️⃣ Transport Layer: TCP breaks the request into smaller packets and
numbers them.
3️⃣ Internet Layer: IP assigns the sender & receiver's IP addresses and
routes the packets.
4️⃣ Network Access Layer: Packets travel over the physical network
(Wi-Fi, Ethernet, etc.).
5️⃣ At the Receiver’s Side:
• The Network Layer receives packets.
• The Transport Layer reassembles them correctly.
• The Application Layer displays the webpage.
• 💡 Example:
• When you send an email, TCP/IP ensures it reaches the correct recipient, even if it has to
pass through multiple servers.
1. Application Layer (Layer 1)

• Function:
• This layer deals with the actual data generation and the application-specific
protocols that allow the user to interact with the network. This is the layer where
software applications (like web browsers, email clients, FTP programs) operate.
• In Our Example:
• You (the Client) want to send a file to your friend (the Server). The file may be
generated or selected by you using an application (e.g., a file manager, or file
transfer program like FTP).
• The Application Layer will take care of the overall process of preparing the data for
transmission. It might break the file into chunks for easier transmission.
• The application can use a protocol like FTP, HTTP, or SMTP to send the file over
TCP/IP.
2. Transport Layer (Layer 2) –
TCP
Function:
The Transport Layer is responsible for ensuring the reliable transmission of data between the
two computers. TCP operates here to manage error checking, data flow control, and ensuring
all packets arrive in the correct order.
In Our Example:
TCP at the Transport Layer takes care of the file transmission:
Splits the file into packets (in our case, 10 packets of 100 bytes each).
Assigns sequence numbers to each packet, so the receiver knows the correct order to reassemble them.
Handles errors: If a packet is lost or corrupted, TCP will request that the packet be retransmitted.
Acknowledgments: After receiving a packet, the receiver sends an ACK (acknowledgment) back to the
sender to confirm that the packet was received correctly. If no acknowledgment is received, the packet
will be retransmitted.
Flow control: TCP makes sure the sender doesn't overwhelm the receiver by sending too many packets at
once.
3. Internet Layer (Layer 3) – IP

• Function:
• The Internet Layer is responsible for addressing and routing the data across different networks.
The IP (Internet Protocol) operates here and is responsible for ensuring the data reaches the
correct destination by routing it through various intermediate devices, like routers.
• In Our Example:
• IP is responsible for addressing the data:
• Source IP address (your computer’s IP): 192.168.1.1
• Destination IP address (your friend's IP): 192.168.1.2
• IP also breaks the file into smaller packets and attaches the correct address information to
each packet, so routers along the way know where to send it.
• It’s worth noting that each packet may take a different route to reach the destination, but IP
ensures the packets find their way to the correct destination based on the destination IP
address.
4. Network Interface Layer
(Layer 4) – Ethernet, Wi-Fi, etc.
Function:
The Network Interface Layer deals with how the data is physically transmitted over
the network (whether it's over Ethernet cables, Wi-Fi, etc.). It handles the hardware and
physical aspects of communication.
In Our Example:
•This layer is responsible for preparing the packets for actual transmission over the
network medium.
• If you're using Wi-Fi, it translates the data into radio signals.
• If you're using Ethernet, it sends the data over copper cables.
•The Network Interface Layer adds frame headers to the packets, which contain
MAC addresses (unique hardware addresses) to identify devices on the local network.
•This layer ensures that the data moves from your device (Client) to the local router
and then onto the wider internet.
MAC Address:

• Media Access Control address


• Definition: A MAC address is a unique identifier assigned to the network
interface card (NIC) of a device (like your computer, phone, or router). It is used
to identify devices on a local network.
• Format: A MAC address is typically written as 6 groups of 2 hexadecimal digits,
separated by colons or dashes. Example: 00:1A:2B:3C:4D:5E
• Scope: It works locally within your network. It doesn’t change unless you
manually change it (which is uncommon).Assigned By: The manufacturer of the
hardware (NIC) assigns the MAC address.Layer: The MAC address operates at
the Data Link Layer (Layer 2) of the OSI model.
• If you're connecting to a local network (like your home Wi-Fi), your device will
use the MAC address to communicate with other devices on the same network.
What is UDP?

• UDP (User Datagram Protocol) is a fast, connectionless protocol used


for sending data over networks. Unlike TCP, UDP does not guarantee
delivery, order, or error correction—making it faster but less reliable.
• 💡 Analogy:
• UDP is like sending a postcard 📬 – It may get lost or arrive out of
order, but it’s fast.
• TCP is like a phone call 📞 – It ensures every word is received correctly.
•UI (User Interface):
•Focuses on the visual and interactive elements of a product (e.g., a website, app, or software).
•Includes layout, buttons, icons, typography, colors, animations, and overall aesthetics.
•Example: The design of a mobile app's home screen, including how buttons look and where
they are placed.

•UX (User Experience):


•Focuses on the overall experience a user has while interacting with a product.
•Involves usability, accessibility, efficiency, and satisfaction.
•Example: How easily a user can navigate an e-commerce website and complete a purchase
without frustration.
Server-side dynamic web page

• It is created by using server-side scripting.


• There are server-side scripting parameters that determine how to
assemble a new web page which also include setting up of more client-
side processing.
Client-side dynamic web page

• It is processed using client side scripting such as JavaScript.


• And then passed in to Document Object Model (DOM).
What is email (electronic mail)?

• Email (electronic mail) is the exchange of computer-stored messages


from one user to one or more recipients via the internet.
• Emails are a fast, inexpensive and accessible way to communicate for
business or personal use.
• Users can send emails from anywhere as long as they have an internet
connection, which is typically provided by an internet service provider
.
• Email is exchanged across computer networks, primarily the
internet, but it can also be exchanged between both public and
private networks, such as a local area network.
• Email can be distributed to lists of people as well as to
individuals. A shared distribution list can be managed using an
email reflector.
• Some mailing lists enable users to subscribe by sending a
request to the mailing list administrator. A mailing list that's
administered automatically is called a list server.
TelNet
• TELNET stands for Teletype Network.
• It is a type of protocol that enables one computer to
connect to the local computer.
• It is used as a standard TCP/IP protocol for virtual
terminal service which is provided by ISO.
• The computer which starts the connection is known as
the local computer.
• The computer which is being connected to i.e. which
accepts the connection known as the remote
computer.
• During telnet operation, whatever is being performed on
the remote computer will be displayed by the local
computer.
• Telnet operates on a client/server principle. The local
computer uses a telnet client program and the remote
computers use a telnet server program.
What is File Transfer Protocol?

• FTP is a standard communication protocol.


• There are various other protocols like HTTP which are
used to transfer files between computers, but they lack
clarity and focus as compared to FTP.
• Moreover, the systems involved in connection are
heterogeneous, i.e. they differ in operating systems,
directories, structures, character sets, etc the FTP
shields the user from these differences and transfers
data efficiently and reliably.
• FTP stands for File transfer protocol.
• FTP is a standard internet protocol provided by TCP/IP
used for transmitting the files from one host to another.
• It is mainly used for transferring the web page files from
their creator to the computer that acts as a server for
other computers on the internet.
• It is also used for downloading the files to computer
from other servers.
`
What is the Difference between
TCP and IP?

• TCP and IP are different protocols of Computer


Networks. The basic difference between TCP
(Transmission Control Protocol) and IP (Internet Protocol)
is in the transmission of data.
• In simple words, IP finds the destination of the mail and
TCP has the work to send and receive the mail.
• UDP is another protocol, which does not require IP to
communicate with another computer. IP is required by
only TCP. This is the basic difference between TCP and
IP.
Definition of E-Commerce

• E-commerce (electronic commerce) is the exchange of


goods and services and the transmission of funds and
data over the internet.
• E-commerce relies on technology and digital platforms,
including websites, mobile apps and social media to
make buying and selling possible.
Browser Vendor

Internet Explorer Microsoft

Google Chrome Google

Mozilla Firefox Mozilla

Netscape Communications
Netscape Navigator
Corp.

Opera Opera Software

Safari Apple

Sea Monkey Mozilla Foundation

K-meleon K-meleon
Evolution of Search Engines
1. Early Search Engines (1990s) – The
Basic Indexing Era

• Archie (1990): The first search engine, used to index FTP files but
lacked keyword-based search capabilities.
• Gopher (1991): Allowed hierarchical browsing of internet content but
was eventually overtaken by web-based search engines.
• Wandex, Aliweb, and WebCrawler (1993-1994): Early web search
engines that introduced rudimentary indexing of web pages.
• AltaVista (1995): Introduced advanced search features and became one
of the most popular early search engines.
• 1. Archie (1990) – The First Search Engine

• 🔹 Developed by: Alan Emtage at McGill University


🔹 Purpose: Archie was the first search engine designed to index FTP files (not web pages). It helped users locate
downloadable files stored on FTP servers.

• How Archie Worked (Step by Step)

1. Crawling FTP Servers

o Archie used scripts to scan public FTP servers worldwide.

o It indexed the filenames and paths of files available for download.

o Only file names and directories were indexed, not the contents of files.
1. Storing the Index

o The indexed data (file names, server addresses) was stored in a central database.

o Since storage was expensive in the 1990s, Archie only maintained a text-based index (no full-file indexing).

2. User Query Processing

o Users connected to Archie via Telnet or command-line interfaces.

o They entered text-based queries (e.g., linux.tar.gz) to search for filenames matching the query.

3. User Query Processing

o Users connected to Archie via Telnet or command-line interfaces.

o They entered text-based queries (e.g., linux.tar.gz) to search for filenames matching the query.

4. Displaying Search Results

o Archie returned a list of FTP server locations where the requested file could be found.

o Users then had to manually connect to the FTP server and download the file.
Limitations of Archie

 No web indexing: It only worked for FTP file search, not websites.

 No content search: It only indexed file names, not file contents.

 Manual FTP access: Users had to manually connect to FTP servers to download files.
Gopher (1991) – The First Hierarchical Web Directory

🔹 Developed by: Mark McCahill, University of Minnesota


🔹 Purpose: Gopher was a text-based system that allowed users to navigate menus
of organized information across multiple servers.
How Gopher Worked (Step by
Step)
1.Hierarchical Structure
1. Gopher used a menu-based navigation system, where information was
organized into folders and subfolders.
2. Instead of a search engine, it functioned more like an early version of a
website directory.
1. Client-Server Model
o Users accessed Gopher via Gopher Clients (text-based interfaces like Lynx).
o Gopher clients sent requests to Gopher servers, which then returned structured lists of
text, documents, or links to other servers.
2. Accessing Content
o Clicking a menu item in Gopher either displayed text content or connected to another
server.
o Users could also download files (similar to FTP) or read documents stored on Gopher
servers.
1. Gopher+ Protocol (1993)
o Introduced metadata support, allowing more detailed document descriptions.

o Allowed users to search Gopher directories using keyword-based systems.

• Limitations of Gopher

 No hyperlinks: Unlike the modern web, Gopher lacked hyperlinks, making navigation less flexible.

 Text-only: No images, videos, or advanced content—just text and simple menus.

 Decline after 1993: When the University of Minnesota decided to charge licensing fees, Gopher lost
popularity to the World Wide Web (WWW), which was free.

• Example Use Case

• A student in 1992 looking for research papers on physics could browse Gopher directories to find documents
stored on university servers.
2. Rise of Algorithmic Search (Late 1990s – Early 2000s)

• Google (1998): Introduced the PageRank algorithm, revolutionizing


search by ranking web pages based on links and relevance rather than
just keywords.
• Yahoo! (1994-2000): Transitioned from a manually curated web
directory to a full-fledged search engine.
• MSN Search (1998): Launched by Microsoft, later evolving into
Bing.
3. Expansion and Commercialization (2000-2010)

• Google AdWords (2000): Monetized search through pay-per-click


(PPC) advertising.
• Universal Search (2007): Google integrated images, videos, news,
and books into search results.
• Personalized Search (2005-2010): Search results started being
influenced by user behavior, location, and preferences.
4. AI and Semantic Search (2010-2020)

• Google Knowledge Graph (2012): Provided direct answers to search


queries instead of just links.
• RankBrain (2015): Google's AI-powered ranking algorithm improved
contextual understanding of queries.
• BERT (2019): Enhanced natural language understanding, making
search results more relevant.
5. AI-Powered and Conversational Search
(2020-Present)

• Google MUM (2021): Multimodal AI-powered search that


understands text, images, and videos.
• Generative AI in Search (2023-Present): Google and Bing integrated
AI chatbots (e.g., Bard, ChatGPT-powered Bing) into search,
providing conversational and contextual responses.
• Voice and Visual Search Growth: Increased adoption of Google
Lens, Siri, Alexa, and voice-based assistants for hands-free search.
Future of Search Engines

• AI-First Search: More personalized and interactive search with AI-


generated responses.
• Decentralized Search: Privacy-focused alternatives like Brave
Search and Neeva are gaining traction.
• Multimodal Search: Users will increasingly search using a
combination of text, voice, and images.
• Real-Time Information Retrieval: Search engines will integrate
deeper with real-time data sources for instant updates.
Brave Search

• Brave Search is a privacy-focused search engine developed by


Brave, the company behind the Brave web browser.
• Key Features:
• No tracking or profiling of users.
• Independent search index (not relying on Google or Bing).
• Offers an ad-free paid version for a cleaner search experience.
• AI-powered Summarizer to provide concise search results.
Neeva (Now Shut Down)

• Neeva was a subscription-based, ad-free search engine launched by


ex-Google executives in 2021.
• Key Features:
• No ads and no tracking.
• Personalized results based on user preferences.
• AI-powered search summaries.
• Shutdown: Neeva shut down its consumer search service in June
2023 due to low user adoption. However, its AI-driven search
technology was later acquired by Snowflake for enterprise
applications.
Rise of the Web & Early
Engines
The World Wide Web emerged. Early search engines like Excite and
AltaVista competed. They aimed to organize the exploding amount
of online content.

1 Excite 2 AltaVista
One of the first web Known for its advanced
portals. Integrated search indexing capabilities.
with news, weather, and Quickly became a popular
other content. search destination.

3 Lycos
Lycos was a portal site which offered email and other services.
•Google processes over 8.5 billion searches per day.

•The first search engine ad appeared in 1996 (on a platform called Open Text). Google revolutionized online

advertising with AdWords in 2000 (now Google Ads).

•95% of mobile searches are done on Google.

•Bing powers search results for Yahoo since 2009.

•Google's first-ever tweet (in 2009) was in binary code and translated to: “I’m feeling lucky.”

•Google’s algorithm undergoes thousands of changes every year, with major updates like Panda (2011),

Penguin (2012), and BERT (2019).

•DuckDuckGo doesn’t track users, unlike Google, making it a popular choice for privacy-conscious users.

You might also like