Chapter 1: Introduction to Web Technology
21 slides · use ←/→ or Space to navigate, F for fullscreen.
Jump to a lesson deck: The Internet: History & How It Works IP Addressing, DNS & Domain Names The Web, Browsers, Servers, URL & HTTP The Internet vs. The World Wide Web Web Technologies & Developer Roles
Chapter 1: Introduction to Web Technology
The Internet, the World Wide Web, web technologies and the developer roles that build them.
The Internet: History & How It Works
Where the Internet came from and the TCP/IP machinery that moves data around the world.
History of the Internet
The Internet did not appear overnight. It grew in distinct eras, each one adding a capability that made the next possible.
| Era | Milestone |
|---|---|
| 1960s | ARPANET launched by the US Department of Defense — the first network connecting universities and research centres. |
| 1970s | Email is invented; the TCP/IP protocol is developed to standardise communication across different networks. |
| 1980s | The Internet expands beyond academia; Tim Berners-Lee invents the World Wide Web (1989). |
| 1990s | The Mosaic browser launches; rapid public adoption; e-commerce and search engines emerge. |
| 2000s | Social media boom (Myspace, Facebook); smartphones and the mobile Internet revolution. |
| 2020s | AI, IoT, 5G, Web3, edge computing and large language models reshape the Internet. |
How Does the Internet Work?
The Internet is a massive global network of computers and devices interconnected via TCP/IP (Transmission Control Protocol / Internet Protocol), enabling the exchange of data worldwide.
Every device on the Internet has a unique IP address — a numeric label used to route data between machines.
Scale in 2025: 5.4 billion+ users, and roughly 29 billion connected IoT devices.
How data travels
- Request sent — you type a URL and your device sends a data request.
- DNS lookup — DNS translates the domain name into an IP address.
- Routing — routers direct packets across interconnected networks.
- Server reply — the web server sends back the requested content.
- Rendered — your browser assembles and displays the web page.
Modern connections increasingly use HTTP/3 over the QUIC protocol, and IPv6 addressing.
IP Addressing, DNS & Domain Names
IPv4 vs IPv6, the DNS hierarchy, and the rules that govern domain names.
Internet Protocol (IP)
An IP address identifies a device so data can be routed to it. There are two versions in use today.
| IPv4 | IPv6 | |
|---|---|---|
| Size | 32-bit | 128-bit |
| Format | Four 8-bit numbers separated by periods — 191.57.126.0 | Eight groups of four hex digits |
| Range | 0.0.0.0 to 255.255.255.255 | 340 undecillion addresses |
| Capacity | ~4.3 billion unique addresses (running out) | Effectively unlimited |
| Extras | Organisations get assigned IP blocks | Built-in security (IPsec), auto-configuration, supports IoT & 5G |
IPv6 adoption keeps growing: around 47% of Google traffic now travels over IPv6 (2025).
The Domain Name System (DNS)
The DNS is a hierarchical, distributed system that translates human-readable domain names (e.g. example.com) into numeric IP addresses (e.g. 192.0.2.1). It is the “phone book” of the Internet.
DNS hierarchy
- Root — represented by
.; the starting point for all DNS lookups. - Top-Level Domain (TLD) —
.com,.org,.net,.edu,.gov,.io,.ai,.app. - Second-Level Domain (SLD) —
example.com, registered by individuals or organisations. - Subdomain —
mail.example.com,blog.example.com,api.example.com.
DNS resolution in five steps
- User types a domain name.
- Resolver checks its cache.
- Root server is contacted.
- TLD server is contacted.
- IP address is returned.
Domain Naming Rules
| Rule | Detail |
|---|---|
| Max length | 255 characters for the full domain; 63 per label |
| Allowed characters | Letters A–Z, digits 0–9, hyphens (-) |
| No leading/trailing hyphen | Cannot begin or end with a hyphen |
| No spaces | Spaces are not permitted anywhere |
| Case insensitive | EXAMPLE.com = example.com = Example.COM |
| Label count | Typically 2–5 labels separated by periods |
| Trademark | Trademark owners get domain preference rights |
TLD categories
- Generic TLDs —
.com,.org,.net,.info,.biz - Sponsored TLDs —
.edu,.gov,.mil,.int,.aero - Country code (ccTLD) —
.my,.uk,.us,.jp,.de,.au - New generic TLDs —
.io,.ai,.app,.dev,.tech - Infrastructure TLD —
.arpa(internal DNS use only)
The Web, Browsers, Servers, URL & HTTP
The history of the Web, how browsers render it, how servers deliver it, and the URL/HTTP contract between them.
History of the World Wide Web
| Period | Milestone |
|---|---|
| 1989 | Tim Berners-Lee invents the Web at CERN and creates the first web page. |
| 1991 | First public website goes live; hyperlinks connect documents globally. |
| 1990s | HTML and CSS standards emerge; the browser wars begin. |
| 2000s | Web 2.0: user-generated content, blogs, wikis. |
| 2010s | Mobile-first design; SPA frameworks (React, Vue, Angular). |
| 2020s | AI-generated UIs, Web3 / WebAssembly, edge computing, PWAs. |
Web Browsers
A web browser is software that retrieves and renders web content (HTML, CSS, JavaScript) from the Internet, presenting it as interactive pages.
- Rendering engine — interprets HTML/CSS/JS (Blink, WebKit, Gecko).
- Dev Tools — inspect elements, console, network, performance.
- Tab management — isolated browsing contexts, memory per tab.
- Privacy mode — incognito with no history or cookies.
- Extensions — add-ons that extend functionality.
2025 market share: Chrome ~65%, Safari, Edge ~5%, Firefox ~3%, Others ~8%. AI sidebars (Copilot, Gemini) are now standard.
Web Servers
A web server is software (and hardware) that stores, processes and delivers web content to clients over HTTP/HTTPS. When a browser requests a page, the server processes the request and sends back HTML, images, CSS or JSON.
Key functions
- Store and serve static files (HTML, CSS, images)
- Run server-side code for dynamic pages
- Manage HTTPS encryption and TLS certificates
- Handle load balancing across multiple servers
- Cache content for performance optimisation
| Server | Notes |
|---|---|
| Apache | Open-source, cross-platform, module-rich (~25%) |
| NGINX | High performance, reverse proxy, event-driven |
| Cloudflare | CDN + server, DDoS protection, edge network |
| Microsoft IIS | Windows-native, ASP.NET optimised |
| Caddy | Automatic HTTPS, modern config, Go-based |
| Serverless | AWS Lambda, Vercel, Netlify — no server management |
URL & HTTP / HTTPS
A URL (Uniform Resource Locator) points at a resource:
https://www.utem.edu.my/bitm2113/rajah1.png
scheme host path resourceHTTP request structure
- Request line — method + URL + version
- Methods — GET, POST, PUT, DELETE, PATCH
- Headers — user-agent, content-type
- Optional body — form data, JSON payload
| Version | Characteristic |
|---|---|
| HTTP/1.1 | One request per connection; persistent keep-alive |
| HTTP/2 | Multiplexing; header compression; binary protocol |
| HTTP/3 | QUIC (UDP-based); faster; ~30% of web traffic (2025) |
| HTTPS | TLS encryption; mandatory for all modern sites |
The Internet vs. The World Wide Web
Two terms people confuse constantly — here is the clean distinction.
Two different things
| The Internet | The World Wide Web |
|---|---|
| Global physical network infrastructure | A service that runs on top of the Internet |
| Routers, cables, satellites, wireless towers | System of linked pages via HTML, URLs & HTTP |
| Protocols: TCP/IP, UDP, FTP, SMTP, DNS | Technologies: HTML, CSS, JavaScript, REST APIs |
| Enables email, VoIP, gaming, IoT, streaming | Accessed through a web browser |
| Developed in the 1960s–1980s (ARPANET era) | Invented by Tim Berners-Lee in 1989 |
Key point: the Internet is the infrastructure (roads). The Web is a service running on it (cars). Not all Internet traffic is Web — email, VoIP and gaming use the Internet but not necessarily the Web.
Web Technologies & Developer Roles
The 2025 frontend/backend technology map, the three developer roles, and the trends shaping the field.
Frontend Technologies (2025)
| Technology | Role |
|---|---|
| HTML5 | Semantic structure, accessibility, web storage, canvas, geolocation |
| CSS3 / Tailwind | Flexbox, Grid, animations, custom properties, utility-first CSS |
| JavaScript ES2025 | Modern syntax, async/await, optional chaining, Temporal API |
| TypeScript | Static typing for large apps, better IDE support, fewer bugs |
| React / Next.js | Component-based UI; Next.js adds SSR, SSG and App Router |
| Vue / Nuxt | Progressive framework; Nuxt adds full-stack, file-based routing |
| Angular | Google-backed; strong for enterprise; standalone components |
| WebAssembly | Run C/C++/Rust in the browser at near-native speed |
Backend Technologies (2025)
| Technology | Role |
|---|---|
| Node.js / Bun | Event-driven, non-blocking; Bun is ~3x faster with native TS support |
| PHP 8.x / Laravel | Powers ~75% of the web; Laravel adds MVC, Eloquent ORM, Blade |
| Python / Django / FastAPI | Clean syntax; Django for web apps, FastAPI for high-performance APIs |
| Go (Golang) | Fast, concurrent; popular for microservices and cloud-native backends |
| MySQL / PostgreSQL | RDBMS for structured data; PostgreSQL adds JSON, full-text, extensions |
| MongoDB / Redis | MongoDB for documents; Redis for ultra-fast in-memory caching |
| GraphQL / REST | REST for simple CRUD; GraphQL for flexible, client-defined queries |
| Docker / Kubernetes | Docker for containers; Kubernetes for orchestrating at scale |
Developer Roles
Frontend Developers
Build everything a user sees and interacts with. Responsibilities include responsive accessible interfaces, implementing Figma/Adobe XD mockups, performance (Core Web Vitals, Lighthouse), cross-browser compatibility, integrating REST/GraphQL APIs, tests (Jest, Vitest), and Git.
2025 must-have skills: HTML5, CSS3, JavaScript (ES2025), TypeScript, React/Vue/Angular/Svelte, Tailwind, v0/Cursor/Copilot, Vitest/Playwright, Vite/webpack/ESLint/Prettier.
Backend Developers
Build the server-side logic, databases, APIs and infrastructure. Responsibilities include REST/GraphQL APIs, databases, authentication (OAuth 2.0, JWT, sessions), business logic, security/scalability/performance, CI/CD, and third-party integrations.
2025 must-have skills: Node.js/Python/PHP/Go, REST/GraphQL/OpenAPI, SQL + NoSQL, Docker/GitHub Actions, AWS/Azure/GCP/Vercel/Railway, OWASP Top 10/JWT/HTTPS/rate limiting, OpenAI/HuggingFace/LangChain.
Full Stack Developers
Proficient in both frontend and backend — they can build and deploy complete applications end-to-end: languages (JS/TS, Python, PHP, Go, Rust), cloud, security, frontend frameworks, DevOps, API design, AI integration, version control, databases, testing and project tools.
2025 Emerging Trends
- AI-powered development — LLMs generate code, UIs and APIs (Copilot, Cursor, v0, ChatGPT).
- Progressive Web Apps — install like native apps with offline support and push notifications.
- WebAssembly (WASM) — near-native speed in browsers; powers Figma, Adobe, Google Earth.
- Web3 & decentralisation — dApps, NFTs, smart contracts, decentralised identity.
- Edge computing — code runs at CDN edge nodes (Vercel Edge, Cloudflare Workers) to cut latency.
- HTTP/3 & QUIC — UDP-based, faster and more reliable; supported by ~30% of the web.
Chapter 1 Summary
- The Internet — global TCP/IP network; IPv6 now essential; IoT drives exponential growth.
- DNS & domains — hierarchical name system; DNSSEC & DNS-over-HTTPS for security.
- The Web — built on the Internet; HTTP/3, WebAssembly, edge delivery reshape it.
- Browsers & servers — AI-powered browsers; NGINX/serverless dominate; HTTPS mandatory.
- Frontend — React, Next.js, TypeScript and Tailwind lead; WebAssembly grows.
- Backend — Node.js, Python, PHP 8.x and Go; Docker/Kubernetes for cloud-native apps.
- Developer roles — all roles now use AI tools; full stack devs manage entire product lifecycles.