The Web and Client-Server Model

Active learning works for this topic because students need to see how abstract concepts like DNS resolution and HTTP requests play out in real time. When students interact with tools and code, they move from memorizing definitions to understanding the flow of data across networks. This hands-on approach helps them retain how the web actually functions, not just how it is described in textbooks.

• JC 1
• Computing
• 4 activities
• 25 min–45 min

Learning Objectives

1. Analyze the steps involved in DNS resolution from a client's request to an authoritative server's response.
2. Compare and contrast the characteristics of stateless and stateful network protocols in the context of web communication.
3. Explain how cookies and server-side sessions are used to maintain user state across multiple HTTP requests.
4. Evaluate the security implications of DNS decentralization, identifying potential vulnerabilities and resilience factors.
5. Demonstrate the process of a web browser requesting and receiving a resource from a web server using HTTP/HTTPS.

Case Study Analysis

⏱ 30 min·Small Groups

Demo: Network Tab Inspection

Instruct students to open browser developer tools, load a website, and switch to the Network tab. Have them filter for HTTP/HTTPS requests, examine headers, status codes, and response sizes. Groups discuss how DNS precedes the request by pinging the domain first.

Prepare & details

How does the decentralized nature of DNS contribute to both the resilience and vulnerability of the web?

Facilitation Tip: During the Network Tab Inspection demo, have students pause after each request to ask: 'What does this response tell us about the server's role?' This keeps them engaged in analyzing real-time data.

Setup: Groups at tables with case materials

Materials: Case study packet (3-5 pages), Analysis framework worksheet, Presentation template

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management

Case Study Analysis

⏱ 45 min·Pairs

Build: Python HTTP Server

Provide code snippet for a simple Python HTTP server using http.server module. Students run it locally, access via browser, and modify responses to include custom headers or cookies. Compare logs on server and client sides to observe stateless behavior.

Prepare & details

What is the difference between stateful and stateless protocols in web communication?

Facilitation Tip: When building the Python HTTP Server, circulate the room to ask groups: 'How would you modify the server to handle a POST request?' This pushes them to think beyond basic GET responses.

Setup: Groups at tables with case materials

Materials: Case study packet (3-5 pages), Analysis framework worksheet, Presentation template

• Analyze
• Evaluate
• Create
• Decision-Making
• Self-Management

Timeline Challenge

⏱ 25 min·Individual

Timeline Challenge: DNS Resolution Trace

Students use command-line tools like nslookup or dig to query a domain's resolution path. Record each step from root servers to IP. Groups map the hierarchy on paper and discuss decentralization benefits and risks.

Prepare & details

How do cookies and sessions manage user identity in a stateless environment?

Facilitation Tip: For the DNS Resolution Trace challenge, assign each group a different TLD to map their path. This ensures varied data and encourages collaborative troubleshooting.

Setup: Long wall or floor space for timeline construction

Materials: Event cards with dates and descriptions, Timeline base (tape or long paper), Connection arrows/string, Debate prompt cards

• Remember
• Understand
• Analyze
• Self-Management
• Relationship Skills

Simulation Game

⏱ 35 min·Small Groups

Simulation Game: Cookie and Session Flow

Use physical cards for requests/responses; add 'cookies' as sticky notes. Simulate login: first request sets cookie, subsequent ones reference it. Groups role-play server forgetting state without cookies, then add sessions via a shared ledger.

Prepare & details

How does the decentralized nature of DNS contribute to both the resilience and vulnerability of the web?

Facilitation Tip: In the Cookie and Session Flow simulation, ask students to swap roles between client and server. This helps them see how state is managed—or fails—without explicit tracking.

Setup: Flexible space for group stations

Materials: Role cards with goals/resources, Game currency or tokens, Round tracker

• Apply
• Analyze
• Evaluate
• Create
• Social Awareness
• Decision-Making

Teaching This Topic

Teachers approach this topic by blending direct instruction with guided exploration, avoiding the trap of overwhelming students with too much jargon too soon. Start with concrete tools like browser dev tools to make the invisible visible, then layer in code and simulations to reinforce concepts. Research shows that students grasp the client-server model better when they first experience the frustration of a broken connection before learning the protocols that fix it. Avoid rushing through DNS or HTTPS without hands-on verification—students need to see these processes fail to truly value their design.

What to Expect

Successful learning looks like students tracing a URL through DNS servers, inspecting HTTP headers in browser tools, and explaining why HTTPS matters for security. They should connect these technical steps to the bigger picture: how the web delivers content while balancing speed, reliability, and privacy. When students can predict what happens next in a network request or debug a server response, they demonstrate true understanding.

Watch Out for These Misconceptions

Common Misconception

During the Network Tab Inspection demo, watch for students assuming HTTP remembers past requests because their login persists across pages.

What to Teach Instead

After inspecting headers and status codes in the demo, ask students to clear cookies and reload the page. Have them observe how the login disappears, then re-enable cookies to restore it. This shows that HTTP itself is stateless, and persistence relies solely on client-side storage.

Common Misconception

During the DNS Resolution Trace challenge, listen for groups describing DNS as a single server that 'looks up' domain names directly.

What to Teach Instead

After groups complete their TLD maps, display a visualization of DNS hierarchy. Ask each group to trace their path step-by-step, emphasizing that no single server holds all the answers. Highlight how redundancy in the system prevents single points of failure.

Common Misconception

During the Cookie and Session Flow simulation, watch for students believing HTTPS only encrypts traffic but does nothing to verify the server’s identity.

What to Teach Instead

In the simulation, capture a packet exchange for both HTTP and HTTPS. Have students compare the certificate details in HTTPS with the plaintext responses in HTTP. Ask them to explain how a missing or invalid certificate would trigger a browser warning, linking PKI to real-world security.

Assessment Ideas

Quick Check

After the DNS Resolution Trace, present students with a scenario: 'A user types www.example.org into their browser.' Ask them to list the first three distinct network requests that occur and identify the protocol used for each. Collect responses to check their understanding of the initial steps in web browsing.

Discussion Prompt

After the Cookie and Session Flow simulation, pose the question: 'Imagine a website uses cookies to remember your login. If a hacker steals your cookie, what is the immediate security risk, and how does this relate to the stateless nature of HTTP?' Facilitate a discussion on session hijacking and state management, using the simulation’s captured traffic as evidence.

Exit Ticket

During the Network Tab Inspection demo, provide students with two terms: 'DNS' and 'HTTP'. Ask them to write one sentence explaining the primary function of each and one sentence describing how they work together to load a webpage. Collect responses to assess their grasp of core concepts and their interrelation.

Extensions & Scaffolding

• Challenge: Ask advanced students to design a simple chat application that uses WebSockets to maintain state between client and server. They should explain how this differs from HTTP’s stateless nature in a short write-up.
• Scaffolding: For students struggling with DNS, provide a flowchart template where they fill in the missing server types (root, TLD, authoritative) as they trace a domain name. Pair them with a peer who has completed the trace to discuss discrepancies.
• Deeper exploration: Have students research how CDNs (Content Delivery Networks) interact with the client-server model. They should present how caching at the edge changes request paths and impacts performance.

Key Vocabulary

DNS (Domain Name System)	A hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names into machine-readable IP addresses.
HTTP (Hypertext Transfer Protocol)	The foundational protocol of the World Wide Web, used for transmitting hypermedia documents such as HTML. It is a stateless protocol, meaning each request is independent.
HTTPS (Hypertext Transfer Protocol Secure)	An extension of HTTP that encrypts the communication between a client and a server, providing security and privacy for data transmission.
Stateless Protocol	A protocol that treats each request as an independent transaction, without retaining any memory of previous requests from the same client.
Stateful Protocol	A protocol that maintains information about previous interactions with a client, using this context to process subsequent requests.
Cookie	A small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing. It is used to remember stateful information for the user.