1/20

How the Web Works

CSCI 4513 - Web Programming

Class 2 - Thursday

🌐 → 💻 → 🚀

Today's Journey: From Networks to Websites

2/20

Today's Learning Objectives

Understand what the Internet actually is
Learn how data travels (packets & protocols)
Distinguish web pages, servers, browsers & search engines
Understand client-server architecture
Demystify IP addresses and DNS
Trace what happens when you search Google

3/20

Let's Start Simple: What's a Network?

💻 ↔ 💻 ↔ 💻

Network: Two or more computers connected together to share resources

Your home WiFi = a network
OCU campus network = a bigger network
Networks can connect to other networks...

4/20

The Internet: A Network of Networks

🏠 Local Network → 🏢 ISP Network → 🌍 Global Internet

The Internet is NOT:

❌ A single computer or location
❌ Owned by any one company
❌ The same as the World Wide Web

The Internet IS:

✅ A global system of interconnected networks
✅ The infrastructure that carries data
✅ Like the highway system for information

5/20

Key Players in Internet Infrastructure

🏢 ISP (Internet Service Provider)

Cox, AT&T, etc.
Connects you to the internet
Assigns you an IP address

📡 Router

Directs traffic between networks
Your home router + ISP routers
Finds best path for data

6/20

Packets: How Data Actually Travels

Think of it like shipping a book page by page:

📖 Large File → 📄📄📄📄 Packets → 📖 Reassembled

Breaking Down: Data splits into small chunks (packets)
Each packet contains:
- Source address (where from)
- Destination address (where to)
- Piece of the data
- Sequence number (for reassembly)
Why packets? Efficiency, reliability, multiple routes

7/20

IP Addresses: The Internet's Phone Numbers

IPv4: 192.168.1.1 IPv6: 2001:0db8:85a3:0000:0000:8a2e:0370:7334

Every device on the internet needs a unique IP address
IPv4: 4 numbers (0-255), running out of addresses!
IPv6: Much longer, enough for trillions of devices
Your IP right now: Check whatismyipaddress.com

But wait... who remembers IP addresses? 🤔

8/20

DNS: The Internet's Phone Book

"google.com" → DNS Server → "142.250.80.46"

Domain Name System (DNS) translates human-friendly names to IP addresses

You type: www.okcu.edu
Your computer asks DNS: "What's the IP for okcu.edu?"
DNS responds: "It's 104.16.20.146"
Your computer connects to that IP

9/20

Client-Server Model

💻

Client

Requests information
Your web browser
Mobile apps
"Customer" at restaurant

🖥️

Server

Provides information
Hosts websites
Stores data
"Waiter/Kitchen" at restaurant

Client: "Give me the homepage" → Server: "Here's the HTML, CSS, and images"

10/20

Don't Confuse These!

🌐 Web Browser

Software to access websites (Chrome, Firefox, Safari)

🔍 Search Engine

Website that finds other websites (Google, Bing, DuckDuckGo)

📄 Web Page

A single document (this slide deck; it appears to be many pages but its just one with a fancy presentaton)

🏢 Web Server

Computer that hosts and serves web pages

11/20

What Happens When You Google Something?

Let's trace the journey step by step...

🤔 → 💻 → 🌐 → 🔍 → 📊

12/20

The Google Search Journey: Steps 1-2

1️⃣ You type "google.com" in your browser

Browser checks its cache: "Have I been here recently?"
If not, needs to find Google's IP address

2️⃣ DNS Lookup

Browser asks OS: "What's the IP for google.com?"
OS checks with DNS server (usually your ISP's)
DNS returns: "142.250.80.46"

13/20

The Google Search Journey: Steps 3-4

3️⃣ Establishing Connection

Your browser sends request to Google's IP
Request travels through multiple routers
May take different paths (packet routing)

4️⃣ Google's Server Responds

Receives your request
Sends back HTML, CSS, JavaScript
Your browser renders the search page

14/20

The Google Search Journey: Steps 5-6

5️⃣ You type your search and hit Enter

Browser sends your query to Google
Encrypted for security (HTTPS)
Includes cookies, location data, etc.

6️⃣ Google Processes & Returns Results

Searches billions of indexed pages
Ranks by relevance
Sends back results page
All in ~0.5 seconds! 🚀

15/20

Quick Note: HTTPS (The Padlock 🔒)

HTTP

Unencrypted
Like sending postcards
Anyone can read

HTTPS

Encrypted (secure)
Like sealed envelopes
Only recipient can read

Always look for the padlock when entering passwords or payment info!

16/20

Activity: Know Your Tools

What browser are you using right now?

Visit: whatismybrowser.com

Why does this matter for web development?

Different browsers render pages slightly differently
Some features work in one browser but not another
You'll need to test your sites in multiple browsers
Chrome DevTools vs Firefox Developer Edition

17/20

Internet vs. World Wide Web

🌍 Internet

The infrastructure
Physical networks
Existed since 1960s
Email, FTP, gaming, etc.

🕸️ World Wide Web

One service on the internet
Web pages with links
Created 1989 (Tim Berners-Lee)
HTTP/HTTPS protocol

The Web runs ON the Internet, like cars on a highway

18/20

Quick Review: Can You Answer These?

What's the difference between a client and server?
What are packets?
Why do we need DNS?
What's an IP address?
Browser vs. Search Engine - what's the difference?
What happens when you search on Google?

Understanding these concepts = Speaking the language of the web!

19/20

Environment Setup

Linux/WSL
Git/GitHub
CLI Expectations for this class

Homework Reminder:

Complete Odin Project Foundations - Introduction
Set up Discord and GitHub accounts
Be ready to discuss what you learned!

20/20

Environment Setup

Linux/WSL
Git/GitHub
CLI Expectations for this class

Required Resources (from Odin Project):

BBC's "How does the internet work?"
Mozilla's internet articles
"How the Internet Works in 5 Minutes" video

Questions? Let's discuss! 🤔