Unit 3.3

Understanding the World Wide Web

IT 204: E-Commerce

Learning Objectives 🎯

By the end of this chapter, you will be able to:

✅ Differentiate between the Internet and the World Wide Web.
✅ Describe the function of a web server and a web browser.
✅ Define a URL and identify its components.
✅ Identify HTTP as the protocol of the web.

The Internet vs. The World Wide Web

The Internet 🌐

The global network of computers.
The infrastructure (hardware, cables, routers).
Analogy: The physical road system.

The World Wide Web 🕸️

A service that runs on the internet.
The information (web pages, documents).
Analogy: The cars, shops, and houses on the roads.

Key Takeaway: The Web is a service on the Internet. They are not the same thing!

🕸️ Real Case: How the Web Was Born

March 1989: Tim Berners-Lee, at CERN in Switzerland, proposes a system to link documents across computers. His boss writes on it: "Vague but exciting…"
1990–1991: he builds the first web browser, the first web server and the first website, info.cern.ch.
His three inventions are still the Web today: HTML, URL and HTTP.
April 1993: CERN puts the Web in the public domain, free for anyone. Without that, there might be no Daraz or Amazon.

🎬 Watch: How the Web Was Born

Quick Check: Internet or Web? 🎯

Click each item to assign it to the correct category. Click again to change assignment.

The Internet

The World Wide Web

Click items above to classify them — cycling: Unassigned → Internet → Web → Unassigned

Tim Berners-Lee's Computer

How the Web Works: A Simple Model

1. Client (You)

Using a Web Browser (e.g., Chrome), you type a URL and press Enter.

2. The Request ➡️

Your browser sends an HTTP Request over the Internet, asking for the web page.

3. The Server 🗄️

The Web Server receives the request, finds the page, and sends an HTTP Response back.

This request-response cycle happens every time you click a link or load a new page!

Put It In Order: The Web Request Cycle 🔢

Click the steps in the correct sequence (1 → 5) to rebuild the request-response cycle.

→

Click steps in the correct order from first (1) to last (5)

🎬 Watch: Enter → Page, Step by Step

⏱️ Behind One Click: Browser Request Steps

Parse the URL you typed.
DNS lookup: turn onlinekhabar.com into an IP address.
TCP connection to that IP, port 443.
TLS handshake: agree on encryption keys and check the site's certificate.
HTTP request: GET / HTTP/1.1
Response: 200 OK + HTML. The browser then requests every image, CSS and script file the HTML mentions, often 50–100+ more requests.
Render the page.

The "simple" request-response cycle is repeated dozens of times for one page.

Key Component: The Web Browser 💻

Definition: The client software that users run on their computers to request and view web pages.

⚡ Acts as your "window" to the Web.
⚡ Sends requests to web servers.
⚡ Renders HTML, CSS, and JavaScript to display a webpage.
⚡ Examples: Google Chrome, Mozilla Firefox, Microsoft Edge.

🔗 Hypertext & HTML: What the Server Sends

Hypertext = text with links to other text. Click, and you jump to another page anywhere in the world.

HTML (HyperText Markup Language) uses tags to tell the browser what each part is.

<h1>Pashmina Shawl</h1>
<img src="shawl.jpg">
<p>Price: Rs 3,500</p>
<a href="/cart">Add to cart</a>

HTML = structure. CSS = looks. JavaScript = behaviour. The browser combines all three into the page you see.

Key Component: The Web Server 🗄️

Definition: A computer that stores web pages and serves them to users upon request.

⚡ Always on and connected to the Internet.
⚡ "Listens" for incoming HTTP requests from browsers.
⚡ Responds by sending the requested files (HTML, images, etc.).
⚡ Examples: Apache, Nginx, Microsoft IIS.

Browser or Server? Sort the Roles 🖥️

Click each role to assign it. Cycling: Unassigned → Browser → Server → Unassigned

Web Browser

Web Server

Click items to assign them to Browser or Server

🔍 Anatomy of a URL

`https://www.example.com.np/products/gadgets`

https:// — The Protocol. The rules for communication.

www.example.com.np — The Domain Name. The address of the web server.

/products/gadgets — The Path. The specific resource on the server.

A URL (Uniform Resource Locator) is the unique address for every single resource on the Web.

Label the URL Parts 🔖

Click a highlighted segment, then click its label to identify it. Match all 3 parts.

https://www.example.com.np/products/gadgets

Protocol Domain Name Path

Click a yellow URL segment first, then click its matching label

🧮 Worked Example: Reading a Real Shopping URL

https://shop.example.com.np:443/products/shawls?colour=red&page=2#reviews

Part	Value	Meaning
Scheme	`https`	Use HTTP over an encrypted connection
Subdomain · domain · TLD	`shop` · `example` · `.com.np`	Which server; `.np` = Nepal
Port	`443`	The "door" on the server (443 is HTTPS's default, so usually hidden)
Path	`/products/shawls`	Which resource
Query	`?colour=red&page=2`	Filters sent to the server
Fragment	`#reviews`	Jump to a section; never sent to the server

The Language of the Web: HTTP 🗣️

HTTP (Hypertext Transfer Protocol): The set of rules that web browsers and web servers use to communicate with each other.

It's a request-response protocol.
Browser Request: "GET me the homepage!"
Server Response: "OK, here is the HTML for the homepage."
Think of it as the grammar and vocabulary for a conversation between browser and server.

HTTP: Match the Concept 🔗

Click a term on the left, then click its matching description on the right.

Click a term on the left, then its matching description on the right

🔒 HTTP vs HTTPS

HTTP

Sent as plain text. Anyone on the same café Wi-Fi or along the route could read your password or card number.

HTTPS

HTTP inside an encrypted TLS tunnel. The certificate also proves you're talking to the real site. Shown by the 🔒 padlock.

Since 2018, Chrome labels plain-HTTP pages "Not secure".
Card rules (PCI DSS) require encryption whenever card data crosses a public network, so no checkout page can be plain HTTP.

🎬 Watch: What the Padlock Means

🙋 Quick Poll: Which Status Code?

Hands up for 200, 301, 404 or 500:

The product page loads normally. → 200 OK
The shop moved from http:// to https:// and sends you on. → 301 Moved Permanently
You clicked an old link to a deleted product. → 404 Not Found
The shop's database crashed during a sale. → 500 Internal Server Error

2xx = success, 3xx = go elsewhere, 4xx = your mistake, 5xx = the server's mistake.

Practical Application: The Web in Nepal 🇳🇵

The Web is a vital tool for communication, business, and information in Nepal.

Popular Platforms

Google (Search)
Facebook (Social)
YouTube (Video)

Local Giants

Onlinekhabar: Top news portal.
Hamro Patro: Calendar, news, and services.

E-Commerce Impact

Businesses use websites and social media to reach customers.
Built on these principles: Daraz, HamroBazar, etc.

📄 Static vs ⚙️ Dynamic Web Pages

📄 Static

The same file is sent to every visitor.
Fast and cheap; changes need someone to edit the file.
e.g. a college "About Us" page, these lecture slides.

⚙️ Dynamic

The server builds the page per request from a database.
Shows your cart, today's price, live stock.
e.g. a Daraz product page, your bank statement.

E-commerce needs dynamic pages: prices, stock and carts change every second and differ for each customer.

Key Takeaways 📊

The Web is a service that runs on the Internet; they are distinct.
It works on a client-server model: Browsers (clients) request data from Servers.
HTTP is the communication protocol, the "language" of the Web.
Every resource has a unique address called a URL.

Discussion Questions

In your own words, explain the difference between the Internet and the World Wide Web.
What happens, step-by-step, when you type a URL like `https://onlinekhabar.com` into your web browser?
What is the relationship between HTTP and the TCP/IP protocols we discussed earlier?

Exam Practice 📝

Short answer

Distinguish between the Internet and the World Wide Web.
What is HTTP? How is HTTPS different?
Explain the parts of a URL with an example.

Exam Practice 📝 (continued)

Long answer

Describe the request-response cycle when a customer opens a product page on an e-commerce site.
Compare static and dynamic web pages and explain why e-commerce sites need dynamic pages.

Revise the answers in the full note.

Image & Video Credits

Images

Berners-Lee's NeXT at CERN: Robert Scoble, CC BY 2.0 (Wikimedia Commons)
1989 Web proposal at CERN: SimonWaldherr, CC BY-SA 4.0 (Wikimedia Commons)
Netscape Navigator 3 screenshot: Indolering, CC0 (Wikimedia Commons)
Fujitsu server rack: Trique303, CC BY-SA 4.0 (Wikimedia Commons)
Lakeside, Pokhara: Saddam19, CC BY-SA 4.0 (Wikimedia Commons)

Videos (YouTube)

How the Web Was Born (13–98 s)
Enter → Page, Step by Step (25–112 s)
What the Padlock Means (109–169 s)

Thank You!

Next Up: Unit 3.4 - Key Features of Internet and Web Technology

Course Home | Unit 3 Overview

📖 Read the full note

Unit 3.3: Understanding the World Wide Web