Unit I — Web Foundations

Foundations of the Web
& HTML5

Week 01 • 231CSC601T — Web Technologies

What You'll Learn

Internet vs World Wide Web
Client-Server architecture
How a URL becomes a page
HTML5 fundamentals

"Most people learn web development backwards — tools first, understanding later."

"Frameworks change. Browsers don't."

Why This Week Matters

The Problem with Skipping Foundations

CSS depends on HTML structure
JavaScript depends on the DOM
Backend depends on request-response

What Happens When You Skip Foundations

Week	Problem	You'll Say
Week 3	CSS doesn't work	"Why won't this center?"
Week 5	JavaScript confusing	"Why is my element null?"
Week 8	Node.js makes no sense	"What is a request object?"
Interview	"How does a website load?"	Silence.

Real-World Examples

Flipkart Big Billion Day Crash (2014)

Site crashed during biggest sale. Developers didn't understand HTTP connections at scale.

WhatsApp's 55-Engineer Team

Served 900 million users with 55 engineers. Every engineer deeply understood network fundamentals.

The House Foundation Analogy

"Imagine building a house. You're excited about the kitchen, the paint colors, the furniture."

"But if the foundation cracks, nothing else matters."

"HTML is your foundation. Get it wrong, and everything built on top wobbles."

Internet vs World Wide Web

Internet: Network of connected computers (infrastructure)

World Wide Web: Websites running on the internet (a service)

"The internet is like roads. The web is like cars. Roads existed before cars."

Historical Context

1969: ARPANET (US military project — internet's beginning)
1971: Email invented
1991: World Wide Web created by Tim Berners-Lee at CERN

Email is 20 years older than the Web!

What Uses Internet vs What is "The Web"?

Service	Uses Internet?	Is it "The Web"?
Gmail in browser	Yes	Yes
Gmail app	Yes	No (uses APIs)
WhatsApp	Yes	No
Netflix in browser	Yes	Yes
Netflix app	Yes	No (mostly)
PUBG/Online games	Yes	No
UPI Payments (GPay)	Yes	No

Key distinction: The web specifically means browser + server + HTTP.

Video: The Internet Explained

Computerphile — Watch 0:00 to 3:20

Learn More

Internet Fundamentals (FREE) — Jen Kramer

Client-Server Model

How Every Website Works

Browser sends a request
Server sends a response
Browser renders the page

This applies to ALL websites — simple or complex.

The Restaurant Analogy

Restaurant	Web Equivalent
Customer	Browser (Client)
Menu card	Frontend/UI
Waiter	HTTP Protocol
Order slip	HTTP Request
Kitchen	Server
Chef	Backend code
Recipe book	Database
Prepared dish	HTTP Response

Key Concept: Stateless

"The server has no memory of previous requests."

Each request is independent. This is why:

You have to log in again after closing a tab
Banking apps log you out after inactivity
OTPs expire after a few minutes

Cookies and sessions are mechanisms to simulate memory!

One Page Load = Many Requests

Try This: Open browser dev tools (F12 → Network tab), refresh any page. Each row is a separate request-response conversation.

Real Examples

Swiggy Order Tracking

Your app sends a request every few seconds: "Where is my order?" Server responds. Repeat.

BookMyShow Ticket Race

1000 people, 1000 separate requests. First come, first served. Server doesn't know you've been waiting!

Learn More

Full Stack v3 — How the Internet Works

What Happens When You Type a URL

"In interviews, I ask 'What happens when you type a URL?' — 90% of candidates can't answer properly."

The Complete Journey

Step 1: You type "google.com" and press Enter

The browser doesn't know what google.com means. Computers only understand IP addresses (like 142.250.192.46).

Step 2: Browser checks local cache

"Have I been here before?" If yes and cache is fresh, skip ahead. This is why sites load faster on second visit.

Step 3: DNS Resolution

DNS = Internet's phonebook. Browser asks: "What is the IP for google.com?"

Goes through: Router → ISP → Root DNS → TLD DNS → Authoritative DNS

Important: DNS only gives addresses. It NEVER gives web pages.

Step 4: TCP Connection (Handshake)

Like calling someone and waiting for them to pick up. For HTTPS: additional encryption handshake.

Steps 5-7: Request → Process → Response

Browser sends: "GET / HTTP/1.1" → Server processes → Sends back: status + headers + HTML

Status codes: 200 = success, 404 = not found, 500 = server error

Step 8: Browser Parsing & Rendering

Browser reads HTML top to bottom, requests CSS/JS/images, then paints pixels on screen.

The Flow Diagram

[You] → [Browser] → [DNS] → [Server] → [Browser] → [Screen]
         cache?      IP?     request    parse
                             response   render

Common Misconceptions

DNS does NOT give you the website. It only gives you the address.
The server does NOT push content to you. You ask, it responds.
HTTPS encryption happens AFTER DNS. DNS queries are often unencrypted.

Video: How the Web Works

Fireship — Watch 0:00 to 4:15

Real Examples

Jio DNS Blocking

Some sites blocked on Jio work on Airtel. ISPs block at DNS level. Using 8.8.8.8 or 1.1.1.1 bypasses this.

Netflix CDN Magic

DNS routes you to Mumbai/Chennai servers, not US. That's why streaming starts fast!

Full Stack v3 — DNS & URLs Lesson

Understanding URLs

URLs are instructions, not just addresses.

Dissecting a Real URL

https://www.amazon.in/s?k=laptop&ref=nav_bb
└───┘ └─────────┘ └┘ └─────────────┘
  |         |        |           |
Protocol  Domain   Path    Query String
 (how)   (where)  (what)  (extra details)

Part	Example	Meaning
Protocol	`https://`	Encrypted conversation (HTTP = postcard, HTTPS = sealed envelope)
Domain	`www.amazon.in`	Subdomain (www) + main domain (amazon) + TLD (in for India)
Path	`/s`	What page or resource (/s = search)
Query	`?k=laptop`	Extra info (search keyword = laptop)

Why This Matters

When debugging, you'll read URLs constantly. Seeing ?error=auth_failed in a URL tells you exactly what went wrong.

Real-Life Examples

Flipkart Search

URL: flipkart.com/search?q=laptop

Change to ?q=phone and see phone results!

YouTube Timestamp

URL ending with ?t=120 starts video at 120 seconds.

You can manually edit this!

UTM Tracking in Marketing

?utm_source=email&utm_campaign=sale

How companies know you clicked from their email, not Instagram.

Video: URL Explained

Danielle Thé — Watch 0:00 to 3:00

Static vs Dynamic Websites

Static

Same content for everyone

Personal portfolios
Company landing pages
Documentation sites

HTML file exists on disk. Server just reads and sends it.

Dynamic

Content changes based on data/user

Amazon product pages
Instagram feed
Search results

HTML is created on-the-fly when you request it.

Restaurant Menu Analogy

Type	Restaurant Equivalent
Static	Laminated printed menu — same for everyone
Dynamic	Chef's specials based on your preferences and what's available

The Key Insight

Try This: Open amazon.in → Right-click → View Page Source

What you see is plain HTML. The browser has no idea it was generated by Python, Java, or Node.js.

Core Insight: Dynamic websites still send static HTML. The generation happens on the server, but what arrives at your browser is always HTML.

Real Examples

Wikipedia vs Amazon

Wikipedia: mostly static, articles don't change per user.

Amazon: your homepage shows YOUR recommendations, YOUR cart.

Swiggy "Prices may vary"

Prices generated dynamically based on location, time, surge pricing. Someone else might see different prices!

What HTML Is (and Is Not)

HyperText Markup Language

HyperText: Text with links — documents that connect to other documents
Markup: You're "marking up" content to give it meaning
Language: NOT a programming language — a markup language

What HTML Cannot Do

HTML cannot think
HTML cannot loop
HTML cannot make decisions
HTML only describes structure and meaning

Programming languages have: variables, loops, conditions, functions. HTML has none. This is a strength, not a weakness.

The Three Technologies

Technology	Role	Human Body	House
HTML	Structure	Skeleton	Walls, rooms, doors
CSS	Appearance	Skin, clothes	Paint, decor
JavaScript	Behavior	Muscles, brain	Electricity, plumbing

"You can have a skeleton without skin (HTML without CSS). It works. It's ugly, but it works."

"You cannot have skin without a skeleton. CSS without HTML is meaningless."

Why This Matters

Screen Readers & Accessibility

India has 12 million blind people. If your HTML says 'button' vs 'div styled as button', the difference is whether they can use your site.

SEO & Google Ranking

Google reads your HTML. Proper <h1> vs <div class='big-text'> = better ranking = more users.

Learn More

Complete Intro to Web Dev v3 (FREE Notes) Frontend Masters Videos (FREE)

Basic HTML Page Structure

The Minimal HTML Document

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is my first web page.</p>
</body>
</html>

What Each Line Means

Line	Purpose
`<!DOCTYPE html>`	Tells browser: "I'm writing modern HTML5" (without it, browsers enter "quirks mode")
`<html lang="en">`	Root element. `lang` helps screen readers pronounce correctly
`<head>`	Metadata — info ABOUT the page, not ON the page
`<meta charset="UTF-8">`	Supports all languages — Hindi, Chinese, emojis. Without it = garbage characters
`<meta viewport...>`	Makes page work on mobile. Without it = zoomed out on phones
`<title>`	Text in browser tab + Google search results
`<body>`	Everything visible on the page

Real Disasters from Missing These

The Encoding Bug

A startup lost customer data — Hindi/Tamil names became garbage characters. One line of charset could have prevented it.

Mobile Viewport Disaster

Student's portfolio looked great on laptop. Recruiter opened on phone — tiny, unreadable. Lost the opportunity.

Live Examples

Open Basic HTML Example

Learn More

MDN HTML Basics Intro to HTML (FREE) — Jen Kramer

Common HTML Tags

Essential Tags

Text Content

`<h1>-<h6>`	Headings (hierarchy!)
`<p>`	Paragraph
`<strong>`	Important (bold)
`<em>`	Emphasized (italic)
`<div>`	Block container
`<span>`	Inline container

Links, Media, Lists

`<a href="">`	Link
`<img src="" alt="">`	Image
`<ul> <li>`	Bullet list
`<ol> <li>`	Numbered list
`<table>`	Data table

The Heading Hierarchy Rule

Wrong: Using <h1> because you want big text

Headings define document outline, like a book's table of contents. Screen readers navigate by headings.

<!-- WRONG -->
<h1>Welcome</h1>
<h4>About Us</h4>  <!-- Why skip h2, h3? -->

<!-- RIGHT -->
<h1>Welcome</h1>
<h2>About Us</h2>
<h3>Our Team</h3>

Rule: Only one <h1> per page. Don't skip levels.

Tables Are for Data, Not Layout

In the early web, people used <table> for page layouts. Bad practice. Tables are for tabular data only. CSS handles layout now.

Avoid "Div Soup"

New developers put everything in <div> tags. Use semantic tags instead:

<header>, <nav>, <main>, <article>, <section>, <footer>

Why Wikipedia ranks #1: Perfect heading structure. One h1, h2s for sections, h3s for subsections. Google loves clear structure.

Video: HTML Tags

Net Ninja — Watch 0:00 to 4:30

Examples

Tables Example Semantic HTML Example Links & Images Example

Forms & Accessibility

Forms: How Users Talk to Servers

Login, Signup, Payments — all forms. Forms collect data and send it to servers.

form.html

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <button type="submit">Submit</button>
</form>

The for attribute in <label> links to the id of the input for accessibility.

The Restaurant Order Slip Analogy

Form Element	Order Slip Equivalent
Form	The order slip itself
Input fields	Lines to fill (Starter: ___, Main: ___)
Required fields	Items marked with asterisk
Submit button	Handing slip to waiter
Validation	"Sorry, we're out of paneer"

Why Accessibility Matters

Domino's Pizza Lawsuit (2019)

A blind man sued Domino's because he couldn't order pizza using a screen reader. Domino's lost.

12 Million Potential Users

India has 12+ million blind people, 60+ million with disabilities. Good HTML respects all users.

The OTP Problem

Ever tried clicking a small OTP box on mobile? If the label is clickable, "Enter OTP" becomes a tap target. Small HTML improvement, big usability gain.

Examples

Registration Form Example HTML Forms Course (FREE)

Exercises

Exercise 1: Personal Profile Page

Create an HTML page about yourself with:

Your name as heading
A paragraph about yourself (bio)
A list of your hobbies
An image (optional)
Contact links (email, LinkedIn)

Solution: examples/02-profile.html

Exercise 2: Student Registration Form

Create a student registration form with:

Name, Email, Phone fields
Roll Number field
Department dropdown
Year of study dropdown
Submit button

Solution: examples/03-registration-form.html

HTML only. No CSS or JavaScript for now.

Common Mistakes to Avoid

See intentional errors for learning: examples/07-common-mistakes.html

All Examples

Open All Examples

Homework

Rebuild both pages from scratch — copy-paste creates confusion, rebuilding creates memory
Add one new field to the form
Be ready to explain your tag choices

Key Takeaways

What You Learned Today

Internet vs Web: Internet is infrastructure, Web is a service (browser + server + HTTP)
Client-Server: Browser asks, server responds. Stateless = no memory.
URL Journey: DNS → TCP → Request → Response → Render
HTML: Structure and meaning, not appearance or behavior

Core Principles

Web follows a client-server model
HTML defines structure, not appearance
Fundamentals compound over time
Looking things up is normal — even professionals do it

What's Next

Next week: HTML Structure, Lists & Tables

Still no CSS. We're building the foundation properly.

Remember

"The highest-paid engineers aren't framework experts. They understand how things work underneath."

"If you can rebuild something from scratch, you've actually learned it."

Quick Reference

Emergency Tag Reference

What you want	Tag
Big heading	`<h1>`
Smaller headings	`<h2>-<h6>`
Paragraph	`<p>`
Bold	`<strong>`
Italic	`<em>`
Link	`<a href="">`

What you want	Tag
Image	`<img src="" alt="">`
Bullet list	`<ul><li>`
Numbered list	`<ol><li>`
Table	`<table><tr><td>`
Line break	`<br>`
Container	`<div>`

VS Code Shortcuts

Action	Windows/Linux	Mac
Save file	Ctrl + S	Cmd + S
Undo	Ctrl + Z	Cmd + Z
Comment line	Ctrl + /	Cmd + /
Format document	Shift + Alt + F	Shift + Opt + F
HTML boilerplate	Type `!` then Tab

HTTP Status Codes

Code	Meaning	Restaurant Analogy
200	Success	Order served!
404	Not Found	"That dish is not on our menu"
500	Server Error	"Kitchen is on fire!"
403	Forbidden	"VIP area, membership required"

When Stuck

Say: "Let me look that up on MDN — this is exactly what professionals do."

Go to: developer.mozilla.org

Free Resources for Self-Study

Video References (Short Clips)

Topic	Video	Watch Time
How the Internet Works	Computerphile	0:00-3:20
How the Web Works	Fireship	0:00-4:15
URL Explained	Web Dev Simplified	0:00-3:00
HTML Tags	Net Ninja	0:00-4:30

Free Courses (Frontend Masters Bootcamp)

Course	Instructor	Duration
Internet Fundamentals	Jen Kramer	~1 hour
Introduction to HTML	Jen Kramer	1h 47m
Introduction to CSS	Jen Kramer	4h 11m
Introduction to JavaScript	Brian Holt	5h 23m
Complete Intro to Web Dev v3	Brian Holt	~12 hours

Foundations of the Web& HTML5

What You'll Learn

Why This Week Matters

The Problem with Skipping Foundations

What Happens When You Skip Foundations

Real-World Examples

Flipkart Big Billion Day Crash (2014)

WhatsApp's 55-Engineer Team

The House Foundation Analogy

Internet vs World Wide Web

Historical Context

What Uses Internet vs What is "The Web"?

Video: The Internet Explained

Learn More

Client-Server Model

How Every Website Works

The Restaurant Analogy

Key Concept: Stateless

One Page Load = Many Requests

Real Examples

Swiggy Order Tracking

BookMyShow Ticket Race

Learn More

What Happens When You Type a URL

The Complete Journey

Step 1: You type "google.com" and press Enter

Step 2: Browser checks local cache

Step 3: DNS Resolution

Step 4: TCP Connection (Handshake)

Steps 5-7: Request → Process → Response

Step 8: Browser Parsing & Rendering

The Flow Diagram

Common Misconceptions

Video: How the Web Works

Real Examples

Jio DNS Blocking

Netflix CDN Magic

Understanding URLs

Dissecting a Real URL

Why This Matters

Real-Life Examples

Flipkart Search

YouTube Timestamp

UTM Tracking in Marketing

Video: URL Explained

Static vs Dynamic Websites

Static

Dynamic

Restaurant Menu Analogy

The Key Insight

Real Examples

Wikipedia vs Amazon

Swiggy "Prices may vary"

What HTML Is (and Is Not)

HyperText Markup Language

What HTML Cannot Do

The Three Technologies

Why This Matters

Screen Readers & Accessibility

SEO & Google Ranking

Learn More

Basic HTML Page Structure

The Minimal HTML Document

What Each Line Means

Real Disasters from Missing These

The Encoding Bug

Mobile Viewport Disaster

Live Examples

Learn More

Common HTML Tags

Essential Tags

Text Content

Links, Media, Lists

The Heading Hierarchy Rule

Tables Are for Data, Not Layout

Avoid "Div Soup"

Video: HTML Tags

Examples

Forms & Accessibility

Forms: How Users Talk to Servers

Foundations of the Web
& HTML5