COMP347 (Revision 10) | TrustOpen University
Upon completion of this expanded tutorial, students will be able to:
The World Wide Web is the most visible and widely used application of the Internet. It transformed the Internet from a tool for researchers into a global information system accessible to billions of people. This tutorial provides a comprehensive exploration of the Web's architecture, technologies, and protocols. We examine how web browsers and servers communicate using HTTP, how resources are identified using URLs, and how cookies and sessions maintain state. We also discuss performance enhancements like caching and CDNs, the evolution of the Web, and modern trends such as REST APIs, GraphQL, and WebSockets. Understanding the Web is essential for anyone working with network applications.
The Internet and the World Wide Web are often used interchangeably, but they are distinct:
Analogy: The Internet is the road system; the Web is the vehicles that travel on those roads.
The Web follows a client‑server model: clients send requests to servers, which process them and return responses containing resources.
URI (Uniform Resource Identifier): A string that identifies a resource.
URL (Uniform Resource Locator): A URI that specifies how to access a resource.
scheme://host:port/path?query#fragment
Example: https://www.example.com:443/path/to/page?q=search#section
| Method | Purpose | Idempotent? |
|---|---|---|
| GET | Retrieve a resource | Yes |
| HEAD | Retrieve headers only (no body) | Yes |
| POST | Submit data to be processed (e.g., form submission) | No |
| PUT | Upload a resource (replace) | Yes |
| DELETE | Delete a resource | Yes |
| PATCH | Partial update | No |
| OPTIONS | Request supported methods | Yes |
Request headers: Host, User‑Agent, Accept, Cookie, Authorization, Cache‑Control, etc.
Response headers: Content‑Type, Content‑Length, Set‑Cookie, Cache‑Control, Location, etc.
Request:
Response:
| Version | Year | Key Features |
|---|---|---|
| HTTP/0.9 | 1991 | Simple GET requests, no headers, no status codes |
| HTTP/1.0 | 1996 | Headers, status codes, multiple methods |
| HTTP/1.1 | 1997 | Persistent connections, chunked transfer, caching, pipelining |
| HTTP/2 | 2015 | Multiplexing, server push, binary framing, header compression (HPACK) |
| HTTP/3 | 2022 | Uses QUIC (UDP‑based), reduces head‑of‑line blocking, improved performance |
Client software that requests, renders, and executes web resources. Components: user interface, browser engine, rendering engine (Blink, Gecko, WebKit), networking, JavaScript engine (V8, SpiderMonkey), data storage.
Software that listens for HTTP requests and serves resources. Can serve static files or execute server‑side code (dynamic content). Popular: Apache, Nginx, IIS, Node.js.
HTTP is stateless, but cookies add state by storing small pieces of data on the client.
Web caching stores copies of resources to serve them faster. Types: browser cache, proxy cache (ISP, corporate), CDN cache.
Cache control via headers: Cache‑Control (max‑age, no‑cache, no‑store), Expires, ETag, Last‑Modified.
CDNs are distributed networks of edge servers that replicate content from origin servers. Users are directed to the nearest edge server (via DNS‑based routing). Benefits: lower latency, higher throughput, reduced origin load, DDoS protection.
Architectural style for APIs, using HTTP methods and statelessness. Resources identified by URLs; operations map to HTTP methods (GET, POST, PUT, DELETE). Responses are typically JSON or XML.
Query language for APIs. Single endpoint; client specifies exactly what data it needs; reduces over‑fetching and under‑fetching. Strongly typed schema.
| Feature | REST | GraphQL |
|---|---|---|
| Endpoints | Multiple (one per resource) | Single endpoint |
| Data fetching | Fixed structure (server‑defined) | Client‑specified (flexible) |
| Over‑fetching | Possible | Avoided |
| Caching | Easy (HTTP caching) | Harder (requires client‑side caching) |
| Complexity | Lower | Higher |
HTTPS is HTTP over TLS (Transport Layer Security), providing:
TLS handshake: ClientHello → ServerHello (with certificate) → Key exchange → symmetric encryption starts. Modern TLS versions (1.3) reduce handshake latency.
Q1: What is the difference between the Internet and the World Wide Web?
The Internet is the underlying network infrastructure (hardware and protocols). The World Wide Web is an application that runs on the Internet, using HTTP to transfer web resources.
Q2: What does URL stand for and what are its components?
URL stands for Uniform Resource Locator. Components: scheme (protocol), host (server), port, path (resource location), query (parameters), and fragment (anchor).
Q3: What is the primary purpose of the HTTP protocol?
HTTP is used to transfer web resources (HTML pages, images, videos, etc.) between web clients (browsers) and web servers.
Q4: What is the difference between HTTP GET and POST methods?
GET requests retrieve a resource from the server. POST requests submit data to be processed by the server (e.g., form submissions). GET should be idempotent; POST may have side effects.
Q5: What does HTTP status code 404 mean?
404 Not Found means the requested resource could not be found on the server.
Q6: What is a cookie in the context of web browsing?
A cookie is a small piece of data stored by the browser on behalf of a website, used for session management, personalization, and tracking.
Q7: What are the key improvements in HTTP/2.0 over HTTP/1.1?
HTTP/2.0 introduces multiplexing (interleaving multiple requests/responses), server push (proactive resource sending), binary framing, and header compression (HPACK).
Q8: What transport protocol does HTTP typically use?
HTTP typically uses TCP (port 80) or TCP with TLS (port 443 for HTTPS). HTTP/3 uses QUIC (which is built on UDP).
Q9: What is the role of a web server?
A web server listens for HTTP requests, serves static and dynamic content, handles authentication and authorization, and logs request activity.
Q10: What distinguishes Web 2.0 from Web 1.0?
Web 1.0 was the static web with read‑only content. Web 2.0 introduced user‑generated content, social media, interactivity, and dynamic web applications.
Q11: Explain the purpose of HTTPS and how it secures web communication.
HTTPS is HTTP over TLS, providing encryption (prevents eavesdropping), authentication (server identity verified via certificates), and integrity (data cannot be tampered with).
Q12: What is the difference between REST and GraphQL?
REST uses multiple endpoints (one per resource) with fixed data structures; GraphQL uses a single endpoint where clients specify exactly what data they need, reducing over‑fetching. REST is simpler; GraphQL is more flexible but complex.
Q13: What is a CDN and how does it improve web performance?
A CDN (Content Delivery Network) is a distributed network of edge servers that cache content closer to users. It improves performance by reducing latency, distributing load, and offloading origin servers.
Q14: What are WebSockets and how do they differ from HTTP?
WebSockets provide full‑duplex, persistent connections for real‑time communication. Unlike HTTP (request‑response), WebSockets allow bidirectional messaging after an initial handshake.
Exercise 1 – URL construction
Construct a URL for a web page with the following characteristics: protocol HTTPS, server www.university.edu, path /courses/comp347, query parameter section with value 01, fragment objectives. Write the complete URL and explain each component.
URL: https://www.university.edu/courses/comp347?section=01#objectives
https: Scheme/protocol (HTTP over TLS)www.university.edu: Host (server name)/courses/comp347: Path (resource location)?section=01: Query parameter (section=01)#objectives: Fragment (anchor within the page)Exercise 2 – HTTP request‑response cycle
Explain the HTTP request‑response cycle. Describe what happens when a user types a URL into a browser and presses Enter. Include DNS resolution, TCP connection establishment, and HTTP communication.
Exercise 3 – HTTP version comparison
Compare HTTP/1.1, HTTP/2.0, and HTTP/3.0. What are the key improvements at each version? When would you choose one over the other?
HTTP/1.1: Persistent connections, pipelining (theoretically), chunked transfer, caching improvements. Limitation: head‑of‑line blocking at connection level.
HTTP/2.0: Multiplexing, server push, binary protocol, header compression (HPACK). Limitation: still uses TCP, head‑of‑line blocking at transport layer.
HTTP/3.0: Uses QUIC (UDP‑based), 0‑RTT handshake, no head‑of‑line blocking, connection migration. Best for mobile and high‑latency environments.
When to choose: HTTP/1.1 for legacy systems; HTTP/2 for modern websites; HTTP/3 for performance‑critical applications, mobile networks.
Exercise 4 – Cookies and state
Explain the role of cookies in maintaining state in HTTP. How do cookies enable features like "remember me" on login pages and shopping carts?
HTTP is stateless, but cookies add state by storing data on the client. Server sets a cookie in the
response: Set‑Cookie: session_id=abc123. Browser stores it and includes it in subsequent
requests.
"Remember me": Server creates a persistent cookie with long expiry; on return visit, cookie is sent, server validates and logs user in.
Shopping cart: Server stores cart contents in a session (server‑side) identified by a session ID stored in a cookie. Each request sends the session ID, allowing retrieval of cart.
Exercise 5 – HTTP message analysis
Analyse a typical HTTP request and response. Using the following example, identify: (1) HTTP version, (2) request method, (3) requested resource, (4) status code and meaning, (5) key headers and their purposes.
Request: HTTP/1.1, GET method, resource /index.html. Headers: Host (server
name), User‑Agent (client), Accept (acceptable content types).
Response: Status 200 OK. Headers: Content‑Type (HTML), Content‑Length (1024 bytes), Cache‑Control (cache for 1 hour), Set‑Cookie (store session cookie).
Exercise 6 – REST vs GraphQL
A mobile app needs to display user profiles with name, email, and recent orders. The orders data is large and rarely needed. Should the API be REST or GraphQL? Justify.
GraphQL would be better. REST would either over‑fetch (returning orders even when not needed) or require multiple requests. GraphQL allows the client to request exactly the fields it needs (name, email) and optionally include orders when needed, reducing bandwidth and improving performance on mobile.
Homework 1 – History of the Web
Research the history of the World Wide Web. Who created it? What were the key technologies that enabled its development? How did the Web evolve from its origins to the modern Web?
Creator: Tim Berners‑Lee at CERN (1989). Key technologies: HTML, HTTP, URLs, first browser and server. Evolution: 1990: first server/browser; 1993: Mosaic browser (graphical); 1995: commercial Web; 2000s: Web 2.0; 2010s: mobile Web, SPAs; 2020s: Web 3.0.
Homework 2 – HTTP vs HTTPS
What is the difference between HTTP and HTTPS? How does HTTPS provide security? What protocols and technologies are involved in HTTPS?
HTTP is plaintext; HTTPS is HTTP over TLS, providing encryption, authentication, and integrity. Technologies: TLS, digital certificates (X.509), Certificate Authorities (CAs), Public Key Infrastructure (PKI).
Homework 3 – CDN performance
Explain the concept of "web caching" and Content Delivery Networks (CDNs). How do they improve web performance? What are the trade‑offs?
Web caching stores resources to serve them faster. CDNs are distributed edge servers. Benefits: lower latency, higher throughput, reduced origin load, availability. Trade‑offs: stale content, cache invalidation complexity, cost, management overhead.
Homework 4 – Web APIs in practice
What are web APIs and how do they enable modern web applications? Explain the difference between REST APIs and GraphQL. Provide examples of when each might be used.
Web APIs allow applications to communicate over HTTP. REST uses multiple endpoints with HTTP methods; GraphQL uses a single endpoint with client‑specified queries. Use REST for public APIs, simple data needs; use GraphQL for complex, rapidly evolving applications with multiple clients.
Homework 5 – Web accessibility
Research and describe the concept of "web accessibility." Why is it important? What are the key principles and standards? How do technologies like ARIA help?
Web accessibility ensures websites are usable by people with disabilities. WCAG principles: Perceivable, Operable, Understandable, Robust. ARIA extends HTML with accessibility attributes (roles, labels, states).
This tutorial has explored the World Wide Web and its technologies:
The World Wide Web is the most prominent application of the Internet, and understanding its operation is essential for any networking professional. In the next tutorial, we will examine Internet standards and governance organisations.