Complete HTML, CSS & JavaScript

Handbook
Part I — Web Fundamentals

Chapter 1 — Introduction to the Web

Section 1.1 — What Is the Internet?

Difficulty: Beginner

Estimated Reading Time: 25–35 Minutes

Prerequisites: None

Learning Objectives
After completing this section, you will be able to:

●​ Define the Internet accurately.

●​ Explain how the Internet differs from the World Wide Web.
●​ Identify the major components of the Internet.
●​ Understand how devices communicate over the Internet.
●​ Explain the role of Internet Service Providers (ISPs).
●​ Understand the importance of Internet protocols.

1.1.1 Introduction
Every day, billions of people use the Internet to browse websites, send emails, watch videos,
communicate with friends, work remotely, shop online, and learn new skills. Despite using it
constantly, many people cannot clearly explain what the Internet actually is.

The Internet is not a website, a browser, or a single company. It is a vast infrastructure that
allows computers and other devices around the world to exchange information.

To become a web developer, understanding the Internet is essential. HTML, CSS, JavaScript,
and web servers all operate on top of this global network.

1.1.2 Definition of the Internet

The Internet is a worldwide system of interconnected computer networks that communicate
using a standardized set of communication protocols, primarily the TCP/IP protocol suite.

Breaking this definition into simpler terms:

●​ Worldwide: It spans almost every country.

●​ System: It is made up of many smaller networks working together.
●​ Interconnected: Networks are linked to exchange data.
●​ Protocols: Agreed rules ensure devices understand each other.

A useful analogy is a global highway system:

●​ Roads connect cities.

●​ Highways connect countries.
●​ The Internet connects computer networks.

Just as vehicles travel along roads, data travels through networks.

1.1.3 A Simple Analogy

Imagine you want to send a letter to a friend.

You need:

●​ Your address
●​ Your friend's address
●​ A postal service
 ●​ Rules for delivering mail

The Internet works similarly.

Postal Internet
System

Letter Data packet

Address IP address

Postal office Router

Postal service ISP

Delivery rules TCP/IP protocols

Instead of transporting paper letters, the Internet transports digital data.

1.1.4 Why Was the Internet Created?

The origins of the Internet date back to the late 1960s.

Researchers wanted a communication network that could:

●​ Continue operating even if one part failed.

●​ Allow universities and research institutions to share information.
●​ Connect computers over long distances.

This work led to ARPANET, a research network funded by the U.S. Department of Defense.
Over time, the technologies developed for ARPANET evolved into the modern Internet.

The World Wide Web, created later by Tim Berners-Lee, made the Internet much easier for the
public to use by introducing web pages, hyperlinks, and web browsers.

1.1.5 The Internet Is a Network of

Networks
A network is simply a group of devices connected so they can communicate.

Examples include:

●​ A home Wi-Fi network connecting laptops and phones.

●​ A school's computer lab.
●​ A company's office network.

The Internet connects millions of these individual networks together, which is why it is often
called a network of networks.

Home Network
│
▼
Internet Service Provider
│
▼
Regional Network
│
▼
Global Internet Backbone
│
▼
Another ISP
│
▼
Office Network

Each network remains independent, but they cooperate using common communication
standards.

1.1.6 Devices Connected to the Internet

The Internet is not limited to desktop computers.

Many different devices can connect, including:

●​ Desktop computers
●​ Laptops
●​ Smartphones
●​ Tablets
●​ Smart TVs
 ●​ Gaming consoles
●​ Smart watches
●​ Security cameras
●​ Smart home devices
●​ Industrial sensors
●​ Cloud servers

This growing ecosystem is often referred to as the Internet of Things (IoT).

1.1.7 What Makes the Internet Work?

Several key components work together.

Client Devices

These are devices used by people to access online resources.

Examples:

●​ Phone
●​ Laptop
●​ Tablet

Servers

Servers are powerful computers that provide services or store websites, applications,
databases, and files.

When you visit a website, your browser sends a request to a server, which responds with the
requested content.

Routers

Routers direct data between networks, choosing efficient paths for data packets to travel.

Internet Service Providers (ISPs)

ISPs connect homes and businesses to the Internet.

Examples include local broadband providers, mobile network operators, and fiber Internet
companies.
Internet Backbone

The Internet backbone consists of extremely high-speed fiber-optic networks operated by major
telecommunications companies. These networks carry enormous volumes of Internet traffic
across countries and continents.

1.1.8 How Data Travels

Suppose you visit:

[Link]

A simplified sequence is:

1.​ You type the website address into your browser.

2.​ Your browser asks the DNS system for the website's IP address.
3.​ Your ISP forwards the request.
4.​ Routers pass the request through multiple networks.
5.​ The web server receives the request.
6.​ The server sends the webpage back.
7.​ Your browser displays the page.

This entire process typically takes only a fraction of a second.

1.1.9 Data Is Broken into Packets

The Internet does not send large files as one continuous stream.

Instead, information is divided into packets.

Each packet contains:

●​ Source address
●​ Destination address
●​ Sequence information
●​ A portion of the data

Routers forward these packets independently. At the destination, the packets are reassembled
into the original file.
This packet-based approach makes the Internet more reliable and efficient.

1.1.10 Real-World Example

Imagine watching a video on YouTube.

The process includes:

1.​ Opening your browser.

2.​ Connecting through your ISP.
3.​ Resolving the website address using DNS.
4.​ Contacting Google's servers.
5.​ Downloading the video in many small packets.
6.​ Buffering and playing the video while additional packets continue arriving.

Although it appears seamless, thousands of network operations occur behind the scenes.

Key Terms
●​ Internet: A global network of interconnected computer networks.
●​ Network: A group of connected devices.
●​ Protocol: A set of rules for communication.
●​ Packet: A small unit of transmitted data.
●​ Router: A device that forwards packets between networks.
●​ Server: A computer that provides resources or services.
●​ Client: A device or application requesting resources.
●​ ISP: A company that provides Internet access.
●​ Backbone: High-capacity infrastructure connecting major networks.

Common Misconceptions
"The Internet and the Web are the same."​
They are not. The Internet is the underlying network infrastructure; the World Wide Web is one
service that runs on it.
"Google is the Internet."​
Google is a company offering online services. It relies on the Internet but is not the Internet
itself.

"Wi-Fi is the Internet."​

Wi-Fi is a wireless networking technology that allows devices to connect to a local network. An
Internet connection may be provided over Wi-Fi, but the two are different concepts.

Chapter Check
1.​ Define the Internet in your own words.
2.​ Why is the Internet called a "network of networks"?
3.​ What is the role of an ISP?
4.​ What is a data packet?
5.​ Name five devices that can connect to the Internet.
6.​ Why are routers important?

Practical Exercise
Draw a simple diagram showing how your laptop or smartphone connects to a website. Include:

●​ Your device
●​ Wi-Fi router
●​ ISP
●​ Internet
●​ Web server

Then describe, in 5–10 sentences, what happens after you type a website address into your
browser.

Complete HTML, CSS & JavaScript

Handbook
Part I — Web Fundamentals
Chapter 1 — Introduction to the Web
Section 1.2 — History of the Internet
Difficulty: Beginner

Estimated Reading Time: 30–40 Minutes

Prerequisites: Section 1.1 – What Is the Internet?

Learning Objectives
After completing this section, you will be able to:

●​ Explain why the Internet was created.

●​ Describe the major milestones in the history of the Internet.
●​ Understand the origins of ARPANET.
●​ Explain the development of TCP/IP.
●​ Understand the birth of the World Wide Web.
●​ Differentiate between Web 1.0, Web 2.0, and Web 3.0.
●​ Appreciate how the Internet evolved into today's global infrastructure.

1.2.1 Before the Internet

In the 1950s and 1960s, computers were very different from those we use today.

●​ They were extremely large, often occupying entire rooms.

●​ They were expensive and primarily owned by governments, universities, and large
corporations.
●​ Most computers operated independently and could not communicate with one another.

If researchers at different universities wanted to share information, they typically exchanged

printed documents or magnetic tapes by mail. This process was slow and inefficient.

Scientists needed a way for computers to exchange information electronically over long
distances.
1.2.2 The Cold War and the Birth of
ARPANET
The origins of the Internet are closely linked to the Cold War.

The United States government wanted a communication system that could continue functioning
even if parts of the network were damaged. Instead of relying on one central communication
hub, researchers proposed connecting many computers together so that information could take
different routes if one path became unavailable.

To explore this idea, the Advanced Research Projects Agency (ARPA) funded a research
project called ARPANET.

ARPANET is widely regarded as the first large-scale packet-switched computer network and the
direct ancestor of today's Internet.

1.2.3 The First Network Connection (1969)

In 1969, ARPANET connected four universities in the United States:

●​ University of California, Los Angeles (UCLA)

●​ Stanford Research Institute (SRI)
●​ University of California, Santa Barbara (UCSB)
●​ University of Utah

The first attempt to send a message over ARPANET was intended to transmit the word:

LOGIN

However, the system crashed after transmitting only the first two letters:

LO

Although the attempt failed, it demonstrated that remote computer communication was possible
and marked an important milestone in networking history.
1.2.4 Packet Switching
Traditional telephone systems establish a dedicated connection between two callers for the
duration of the call.

Computer networks required a different approach.

Instead of sending an entire file at once, data is divided into many small pieces called packets.

Each packet contains:

●​ A portion of the original data

●​ The sender's address
●​ The destination address
●​ Information needed to reassemble the data

Packets can travel along different routes through the network and are reassembled when they
reach their destination.

Advantages of Packet Switching

●​ Efficient use of network resources

●​ Higher reliability
●​ Better scalability
●​ Fault tolerance if one path becomes unavailable

Packet switching remains one of the core principles of modern Internet communication.

1.2.5 The Development of TCP/IP

As more networks were created, they often used different communication methods, making it
difficult for them to exchange data.

Researchers Vinton Cerf and Robert Kahn developed a standardized communication system
known as the Transmission Control Protocol/Internet Protocol (TCP/IP).

TCP/IP became the common language that allowed different networks to communicate.

TCP (Transmission Control Protocol)

TCP is responsible for:

 ●​ Dividing data into packets
●​ Ensuring packets arrive correctly
●​ Detecting missing packets
●​ Reassembling data in the correct order

IP (Internet Protocol)

IP is responsible for:

●​ Assigning addresses to devices

●​ Routing packets through networks
●​ Delivering packets to the correct destination

Together, TCP and IP form the foundation of modern Internet communication.

1.2.6 January 1, 1983 – The Internet's

Official Birthday
On January 1, 1983, ARPANET officially adopted the TCP/IP protocol suite.

This date is often referred to as the official birth of the modern Internet, because it enabled
different networks to communicate using a common standard.

From this point forward, independent networks could join together to form a much larger
interconnected system.

1.2.7 Domain Name System (DNS)

As the Internet expanded, users had to remember numerical IP addresses such as:

[Link]

Remembering many numbers was inconvenient.

To solve this problem, the Domain Name System (DNS) was introduced.

DNS translates human-readable names into IP addresses.

Example:

[Link]
↓
[Link]

This innovation made the Internet much easier for people to use.

1.2.8 The Birth of the World Wide Web

Although the Internet already existed, it was still difficult for ordinary people to access
information.

In 1989, Tim Berners-Lee, a computer scientist at CERN, proposed a system for sharing
documents using hyperlinks.

His proposal introduced three fundamental technologies:

HTML

The language used to structure web pages.

HTTP

The protocol used to transfer web pages between servers and browsers.

URL

A standardized way to identify resources on the Web.

These innovations became the foundation of the World Wide Web (WWW).

1.2.9 The First Website

The first website was published in 1991.

Its purpose was simple:

●​ Explain what the World Wide Web was.

 ●​ Describe how to create web pages.
●​ Teach others how to set up web servers.

Compared with today's websites, it was very basic and contained mostly text.

1.2.10 The First Web Browser

Tim Berners-Lee also created one of the first web browsers, originally called WorldWideWeb
(later renamed Nexus).

Early browsers focused primarily on displaying text and hyperlinks.

As browser technology evolved, support for images, multimedia, scripting, and styling was
added.

1.2.11 The Arrival of HTML, CSS, and

JavaScript
The early Web was simple.

Over time, three core technologies emerged:

HTML (1991)

Defines the structure of web pages.

CSS (1996)

Introduced to separate presentation from structure, allowing developers to control colors, fonts,
spacing, and layouts.

JavaScript (1995)

Added interactivity, enabling features such as form validation, animations, and dynamic content
updates.

Together, these technologies remain the foundation of modern front-end web development.
1.2.12 Web 1.0
Web 1.0 refers to the early stage of the Web.

Characteristics:

●​ Mostly static pages

●​ Limited interactivity
●​ Information published by website owners
●​ Visitors mainly read content

Examples included simple company websites, personal pages, and online documentation.

1.2.13 Web 2.0

Web 2.0 introduced user participation.

Characteristics:

●​ Social media
●​ Blogs
●​ Online collaboration
●​ User-generated content
●​ Interactive applications

Examples:

●​ Social networking platforms

●​ Video-sharing websites
●​ Online forums
●​ Collaborative editing tools

Modern websites are largely based on Web 2.0 concepts.

1.2.14 Web 3.0

The term Web 3.0 has multiple interpretations, but it commonly refers to a more decentralized
and intelligent Web.

Common themes include:

●​ Decentralized technologies
●​ Greater user control over data
●​ Blockchain-based applications
●​ Artificial intelligence integration
●​ Semantic understanding of information

While some Web 3.0 technologies are already in use, others are still evolving.

1.2.15 Timeline of Major Events

Year Event

1969 ARPANET established

1971 Email developed

1983 TCP/IP adopted

1984 Domain Name System introduced

1989 World Wide Web proposed

1991 First website published

1993 Mosaic browser released

1995 JavaScript introduced

1996 CSS Level 1 released

2014 HTML5 became an official recommendation

Why This History Matters

Understanding the history of the Internet helps explain why many technologies exist today.
For example:

●​ TCP/IP enables communication between devices.

●​ DNS allows people to use domain names instead of numeric IP addresses.
●​ HTML structures web pages.
●​ HTTP transfers web content.
●​ Browsers interpret HTML, CSS, and JavaScript.

Modern web development builds upon decades of innovation.

Key Terms
●​ ARPANET: The first large-scale packet-switched network.
●​ Packet Switching: Dividing data into small packets for transmission.
●​ TCP/IP: The standard protocol suite used on the Internet.
●​ DNS: System that translates domain names into IP addresses.
●​ World Wide Web: A service that allows users to access linked web documents.
●​ HTML: HyperText Markup Language.
●​ HTTP: HyperText Transfer Protocol.
●​ URL: Uniform Resource Locator.

Review Questions
1.​ Why was ARPANET created?
2.​ What is packet switching, and why is it important?
3.​ What roles do TCP and IP perform?
4.​ Why is January 1, 1983 considered a significant date in Internet history?
5.​ What problem does DNS solve?
6.​ What three technologies did Tim Berners-Lee introduce?
7.​ Compare Web 1.0, Web 2.0, and Web 3.0.
8.​ Why are HTML, CSS, and JavaScript considered the core technologies of the Web?

Practical Exercise
Create a timeline of Internet history from 1969 to the present. For each milestone:

1.​ Write the year.

2.​ Describe the event in one or two sentences.
3.​ Explain why it was important to the evolution of the Internet.

Complete HTML, CSS & JavaScript

Handbook
Part I — Web Fundamentals

Chapter 1 — Introduction to the Web

Section 1.3 — Internet vs. World Wide Web (WWW)
Difficulty: Beginner

Estimated Reading Time: 30–40 Minutes

Prerequisites: Sections 1.1 and 1.2

Learning Objectives
After completing this section, you will be able to:

●​ Distinguish between the Internet and the World Wide Web.

●​ Explain why they are not the same.
●​ Understand the technologies that power the Web.
●​ Identify services that use the Internet but are not part of the Web.
●​ Describe how browsers and web servers communicate.
●​ Understand the role of URLs, HTTP, HTML, and web browsers.
1.3.1 Introduction
Many people use the terms Internet and World Wide Web (WWW) interchangeably. Although
they are closely related, they refer to different concepts.

A simple way to understand the relationship is:

The Internet is the infrastructure. The World Wide Web is one service that
runs on that infrastructure.

Think of the Internet as a vast road network and the Web as one type of vehicle traveling on
those roads.

1.3.2 What Is the Internet?

The Internet is a global network of interconnected computer networks that allows devices to
communicate using standardized protocols such as TCP/IP.

The Internet provides the infrastructure for many different services.

Examples include:

●​ Websites
●​ Email
●​ Video calls
●​ Online gaming
●​ Cloud storage
●​ File transfers
●​ Streaming services
●​ Messaging applications

The Internet itself does not display web pages. It simply provides the communication network
over which data is transmitted.

1.3.3 What Is the World Wide Web?

The World Wide Web (WWW) is a collection of interconnected web pages and resources that
are accessed using web browsers.
The Web was invented by Tim Berners-Lee in 1989 to simplify the sharing of information over
the Internet.

The Web relies on several key technologies:

●​ HTML for structuring content.

●​ CSS for presentation and styling.
●​ JavaScript for interactivity.
●​ HTTP/HTTPS for communication between browsers and web servers.
●​ URLs for locating resources.

Without the Internet, the Web cannot function. Likewise, the Internet can still exist without the
Web because it supports many other services.

1.3.4 Internet vs. World Wide Web

Internet World Wide Web

Global network infrastructure Information system built on the Internet

Connects devices worldwide Connects web pages through hyperlinks

Uses TCP/IP Uses HTTP/HTTPS

Supports many services Focused on websites and web applications

Includes routers, cables, servers, Includes browsers, web servers, HTML, CSS,
ISPs JavaScript

1.3.5 Real-World Analogy

Imagine a city.

●​ The roads, bridges, and highways represent the Internet.

●​ The cars, buses, and delivery trucks represent services that travel on those roads.

In this analogy:

●​ The World Wide Web is one type of vehicle.

●​ Email is another.
 ●​ Video streaming is another.
●​ Online gaming is another.

The roads make transportation possible, but they are not the vehicles themselves.

1.3.6 Services That Use the Internet

The Web is only one of many services available over the Internet.

Email

Allows users to send and receive electronic messages.

Common protocols:

●​ SMTP
●​ IMAP
●​ POP3

Examples:

●​ Gmail
●​ Outlook
●​ Yahoo Mail

File Transfer

Used for transferring files between computers.

Common protocols:

●​ FTP
●​ SFTP

Examples:

●​ Uploading website files to a hosting server.

●​ Downloading software from a remote server.
Video Conferencing

Allows real-time communication.

Examples:

●​ Zoom
●​ Microsoft Teams
●​ Google Meet

These services use the Internet but are not part of the World Wide Web itself.

Online Gaming

Multiplayer games exchange data continuously between players and game servers.

Examples:

●​ Minecraft
●​ Fortnite
●​ Valorant

Cloud Storage

Allows users to store files on remote servers.

Examples:

●​ Google Drive
●​ Dropbox
●​ OneDrive

Streaming Services

Deliver audio and video over the Internet.

Examples:

●​ YouTube
●​ Netflix
 ●​ Spotify

1.3.7 How the Web Works

When you visit a website, the following sequence occurs:

User
│
▼
Web Browser
│
▼
DNS Lookup
│
▼
Web Server
│
▼
HTML, CSS, JavaScript
│
▼
Rendered Web Page

Step 1

You type a URL into your browser.

Example:

[Link]

Step 2

The browser requests the server's IP address using DNS.

Step 3

The browser establishes a connection with the web server.

Step 4

The browser sends an HTTP or HTTPS request.

Step 5

The server processes the request and sends back:

●​ HTML
●​ CSS
●​ JavaScript
●​ Images
●​ Fonts
●​ Videos (if requested)

Step 6

The browser renders the page and displays it on your screen.

1.3.8 Role of the Browser

A browser is software that retrieves, interprets, and displays web content.

Popular browsers include:

●​ Google Chrome
●​ Mozilla Firefox
●​ Microsoft Edge
●​ Safari
●​ Brave

Responsibilities of a browser:

●​ Send HTTP/HTTPS requests.

●​ Interpret HTML.
●​ Apply CSS styles.
 ●​ Execute JavaScript.
●​ Display the final web page.

1.3.9 Role of the Web Server

A web server stores website files and responds to browser requests.

Common web server software:

●​ Apache HTTP Server

●​ Nginx
●​ Microsoft IIS
●​ LiteSpeed

A web server may also run application code (such as [Link], PHP, Python, or Java) to
generate dynamic content before sending it to the browser.

1.3.10 URLs
A Uniform Resource Locator (URL) identifies the location of a resource on the Web.

Example:

[Link]

Components:

Part Example Purpose

Protocol https Communication method

Domain [Link].c Website address

om

Path /products/lap Specific resource

top

Query ?id=25 Additional parameters

1.3.11 HTTP and HTTPS
The Web primarily uses two protocols:

HTTP

●​ HyperText Transfer Protocol

●​ Transfers web pages
●​ Data is not encrypted

HTTPS

●​ HyperText Transfer Protocol Secure

●​ Uses TLS encryption
●​ Protects data from interception
●​ Recommended for all modern websites

1.3.12 Common Misconceptions

"Google is the Internet."

Incorrect.

Google is a company that provides services over the Internet.

"Wi-Fi is the Internet."

Incorrect.

Wi-Fi is a wireless technology that connects devices to a local network. It usually provides
access to the Internet but is not the Internet itself.
"The Web is the Internet."

Incorrect.

The Web is only one service that operates over the Internet.

1.3.13 Why This Matters for Web

Developers
As a web developer, you primarily build applications for the World Wide Web.

Understanding the distinction between the Internet and the Web helps you understand:

●​ How browsers communicate with servers.

●​ How websites are delivered.
●​ Why DNS and HTTP are necessary.
●​ How web applications function.

This knowledge becomes essential when working with web hosting, APIs, performance
optimization, and debugging.

Key Terms
●​ Internet: Global network infrastructure.
●​ World Wide Web (WWW): Collection of interconnected web pages.
●​ Browser: Software used to access web pages.
●​ Web Server: Computer or software that serves web content.
●​ URL: Address of a web resource.
●​ HTTP: Protocol for transferring web resources.
●​ HTTPS: Secure version of HTTP.
●​ DNS: System that converts domain names into IP addresses.

Review Questions
 1.​ What is the difference between the Internet and the World Wide Web?
2.​ Name five Internet services besides the Web.
3.​ What is the purpose of a web browser?
4.​ What does a web server do?
5.​ What are the main parts of a URL?
6.​ Why is HTTPS preferred over HTTP?
7.​ Why can the Internet exist without the Web?

Practical Exercise
1.​ Open your browser and visit three different websites.
2.​ Write down the full URL for each.
3.​ Identify the protocol (http or https), the domain, and the path.
4.​ Explain, in your own words, how your browser retrieves each web page.

Complete HTML, CSS & JavaScript

Handbook

Part I — Web Fundamentals

Chapter 1 — Introduction to the Web

Section 1.4 — How Websites Work

Difficulty: Beginner

Estimated Reading Time: 40–50 Minutes

Prerequisites:

●​ Section 1.1 — What Is the Internet?

●​ Section 1.2 — History of the Internet
●​ Section 1.3 — Internet vs. World Wide Web
Learning Objectives
After completing this section, you will be able to:

●​ Understand what happens when a website is opened.

●​ Explain the complete request–response lifecycle.
●​ Understand the roles of the browser, DNS, web server, and web hosting.
●​ Explain how HTML, CSS, and JavaScript are delivered to the browser.
●​ Understand the browser rendering process.
●​ Understand the Document Object Model (DOM).

1.4.1 Introduction
Opening a website seems simple.

You type a web address into your browser, press Enter, and within seconds the webpage
appears.

For example:

[Link]

Behind the scenes, however, dozens of operations occur in less than a second.

Your browser must:

●​ Find the website.

●​ Connect to the correct server.
●​ Request the webpage.
●​ Download HTML, CSS, JavaScript, images, and fonts.
●​ Build the webpage.
●​ Display it on your screen.

Understanding this process is essential for every web developer.

1.4.2 The Complete Journey of a Website
Request
When you visit a website, the process follows these general steps:

User
│
▼
Browser
│
▼
DNS Lookup
│
▼
Internet
│
▼
Web Server
│
▼
HTTP Response
│
▼
Browser Rendering
│
▼
Web Page Displayed

Let's examine each step in detail.

Step 1 — User Enters a URL

Suppose you type:

[Link]

A URL (Uniform Resource Locator) tells the browser which resource to request.

A URL typically contains:

[Link]
Part Description

https Protocol

www Subdomain

[Link] Domain

/products/laptop Path

id=10 Query
Parameter

Step 2 — Browser Checks the Cache

Before requesting anything from the Internet, the browser checks whether it already has a
recent copy of the requested resource.

The browser may already have:

●​ HTML
●​ CSS
●​ JavaScript
●​ Images
●​ Fonts

If the cached version is still valid, it can be used immediately.

Benefits:

●​ Faster loading
●​ Less Internet traffic
●​ Reduced server workload

Step 3 — DNS Lookup

The browser cannot communicate using domain names.

It needs an IP address.
Example:

[Link]

[Link]

The browser asks the Domain Name System (DNS):

"What is the IP address of [Link]?"

DNS responds with the server's IP address.

Without DNS, users would need to remember numerical addresses for every website.

Step 4 — Browser Connects to the Server

Now that the browser knows the server's IP address, it establishes a network connection.

For HTTPS websites:

●​ TCP connection
●​ TLS encryption
●​ Secure communication

This process happens automatically.

Step 5 — Browser Sends an HTTP

Request
The browser requests the webpage.

Example:

GET / HTTP/1.1
Host: [Link]
The browser is asking:

"Please send me your homepage."

The request also contains information such as:

●​ Browser name
●​ Supported languages
●​ Cookies
●​ Accepted file formats

Step 6 — Web Server Processes the

Request
The web server receives the request.

Depending on the website, the server may:

●​ Read an HTML file.

●​ Query a database.
●​ Run application code.
●​ Check user authentication.
●​ Generate personalized content.

Example:

Browser

Server

Database

Generated HTML

Dynamic websites often build pages at request time.

Step 7 — Server Sends an HTTP Response
After processing the request, the server responds.

Example:

HTTP/1.1 200 OK

The response usually contains:

●​ HTML
●​ CSS references
●​ JavaScript references
●​ Images
●​ Metadata

A response also includes a status code, such as:

Code Meaning

200 Success

301 Permanent Redirect

404 Page Not Found

500 Internal Server Error

Step 8 — Browser Reads the HTML

The browser starts parsing the HTML document.

Example:

<!DOCTYPE html>

<html>

<head>
<title>My Website</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

The browser understands the document structure and prepares to display it.

Step 9 — Browser Builds the DOM

The browser converts HTML into the Document Object Model (DOM).

Example HTML:

<body>

<h1>Hello</h1>

<p>Welcome</p>

</body>

DOM Tree:

Document
│
└── html
│
├── head
│
└── body
│
├── h1
│
└── p
JavaScript interacts with this DOM tree to update content, respond to user actions, and modify
the page dynamically.

Step 10 — Browser Downloads CSS

If the HTML contains:

<link rel="stylesheet" href="[Link]">

the browser sends another request to retrieve the CSS file.

CSS controls:

●​ Colors
●​ Fonts
●​ Margins
●​ Layout
●​ Animations

Without CSS, webpages would appear as plain, unstyled documents.

Step 11 — Browser Downloads JavaScript

Example:

<script src="[Link]"></script>

JavaScript provides interactivity, such as:

●​ Form validation
●​ Navigation menus
●​ Image sliders
●​ Search functionality
●​ Interactive maps

The browser downloads and executes JavaScript after receiving it.

Step 12 — Browser Downloads Additional
Resources
The HTML may reference other resources:

<img src="[Link]">

Additional requests may include:

●​ Images
●​ Videos
●​ Fonts
●​ Icons
●​ PDFs

Each resource is typically fetched through a separate HTTP request.

Step 13 — Browser Renders the Page

After receiving the required resources, the browser combines:

●​ HTML
●​ CSS
●​ JavaScript

to render the final webpage.

Rendering consists of several stages:

1.​ Parse HTML

2.​ Build the DOM
3.​ Parse CSS
4.​ Build the CSSOM
5.​ Create the Render Tree
6.​ Calculate Layout
7.​ Paint Pixels
8.​ Composite Layers

This process happens very quickly, often in milliseconds.

Static vs. Dynamic Websites
Static Website
Characteristics:

●​ Fixed HTML files

●​ Same content for every visitor
●​ No database required

Examples:

●​ Personal portfolio
●​ Company brochure site
●​ Documentation

Advantages:

●​ Fast
●​ Simple
●​ Secure

Dynamic Website
Characteristics:

●​ Content generated by the server

●​ Uses databases
●​ Personalized experiences

Examples:

●​ Facebook
●​ Amazon
●​ Gmail
●​ Online banking

Advantages:

●​ Interactive
●​ User accounts
●​ Real-time updates
Real-World Example
Imagine you open YouTube.

Behind the scenes:

1.​ Browser opens YouTube.

2.​ DNS finds Google's server.
3.​ Browser sends an HTTPS request.
4.​ Google verifies your account.
5.​ Recommended videos are generated.
6.​ HTML is returned.
7.​ CSS and JavaScript are downloaded.
8.​ Video thumbnails load.
9.​ The homepage appears.

Even a single page may involve hundreds of network requests for images, fonts, scripts, and
other assets.

Common Mistakes
Misconception 1

"The browser already knows every website."

Incorrect.

The browser uses DNS to find the server's IP address.

Misconception 2

"HTML contains everything."

Incorrect.

HTML provides structure. CSS and JavaScript are usually separate files that the browser
requests after loading the HTML.
Misconception 3

"A webpage loads all at once."

Incorrect.

Resources are loaded in stages. Some content may appear before images or scripts have
finished downloading.

Best Practices for Developers

●​ Minimize the number of HTTP requests.
●​ Optimize image sizes.
●​ Compress CSS and JavaScript files.
●​ Enable browser caching.
●​ Use HTTPS.
●​ Load only the resources required for the current page.
●​ Monitor performance with browser developer tools.

Key Terms
●​ Browser: Software used to access websites.
●​ URL: Address of a web resource.
●​ DNS: Converts domain names into IP addresses.
●​ HTTP Request: Message sent by the browser to request a resource.
●​ HTTP Response: Server's reply containing the requested resource.
●​ DOM: Tree representation of an HTML document.
●​ CSSOM: Tree representation of CSS rules.
●​ Render Tree: Combined structure used for layout and painting.
●​ Static Website: Delivers pre-built pages.
●​ Dynamic Website: Generates pages dynamically, often using databases.
Review Questions
1.​ What is the first thing a browser does after you enter a URL?
2.​ Why is DNS necessary?
3.​ What is the purpose of an HTTP request?
4.​ What information does an HTTP response contain?
5.​ What is the DOM?
6.​ Why does the browser make additional requests for CSS and JavaScript?
7.​ Compare static and dynamic websites.

Practical Exercise
1.​ Open a website in Google Chrome.
2.​ Press F12 to open Developer Tools.
3.​ Go to the Network tab.
4.​ Reload the page.
5.​ Observe:
○​ Number of requests
○​ HTML document request
○​ CSS files
○​ JavaScript files
○​ Images
○​ Fonts
○​ Response status codes (200, 304, etc.)

Write a short report explaining the order in which resources were loaded and identify which files
contributed to the page's appearance and functionality.

Complete HTML, CSS & JavaScript

Handbook

Part I – Web Fundamentals

Chapter 1 – Introduction to the Web

Section 1.5 – Client–Server Architecture
Difficulty: Beginner → Intermediate

Estimated Reading Time: 40–50 Minutes

Prerequisites:

●​ Section 1.1 – What Is the Internet?

●​ Section 1.2 – History of the Internet
●​ Section 1.3 – Internet vs. World Wide Web
●​ Section 1.4 – How Websites Work

Learning Objectives
After completing this section, you will be able to:

●​ Define client–server architecture.

●​ Distinguish between clients and servers.
●​ Understand request–response communication.
●​ Explain stateless communication.
●​ Understand APIs and databases in a client–server system.
●​ Recognize different types of server architectures.

1.5.1 Introduction
Almost every website and web application you use follows the client–server model.

When you browse an online store, send a message, or watch a video, your device requests
information from another computer that stores and processes the data.

This interaction forms the foundation of modern web development.

1.5.2 What Is a Client?

A client is any device or application that requests services or resources from another computer.

Examples of clients include:

●​ Web browsers (Chrome, Firefox, Edge, Safari)

●​ Mobile applications
●​ Desktop applications
●​ Smart TVs
●​ Smart watches

The client is responsible for:

●​ Sending requests
●​ Displaying responses
●​ Collecting user input
●​ Executing some application logic (especially in modern web apps)

Example:

User
│
▼
Chrome Browser

1.5.3 What Is a Server?

A server is a computer or software that provides services or resources to clients.

Servers can:

●​ Store websites
●​ Process user requests
●​ Run application logic
●​ Access databases
●​ Authenticate users
●​ Deliver files
●​ Send emails

Unlike personal computers, servers are designed to operate continuously and handle many
client requests simultaneously.

Example:

Client
 │
Request
▼
Web Server

1.5.4 Client–Server Communication

The client and server communicate using a request–response model.

Client
│
HTTP Request
▼
Server
│
HTTP Response
▼
Client

The process is:

1.​ The client sends a request.

2.​ The server receives the request.
3.​ The server processes it.
4.​ The server sends a response.
5.​ The client displays the result.

Example:

You search for "HTML tutorial".

The browser sends:

GET /search?q=html+tutorial

The server searches its database and returns matching results.

1.5.5 Real-World Example: Online
Shopping
Suppose you open an online shopping website.

Step 1

Your browser requests:

/products

Step 2

The server queries the product database.

Step 3

The database returns product information.

Step 4

The server creates an HTML or JSON response.

Step 5

Your browser displays the products.

Flow:

Browser

Web Server

↓
Database

Web Server

Browser

1.5.6 Stateless Communication

HTTP is a stateless protocol.

This means each request is independent.

Example:

Request 1

Open Homepage

Request 2

Open Profile

The server does not automatically remember the previous request.

To maintain user state (such as login sessions), websites use:

●​ Cookies
●​ Sessions
●​ Tokens

These topics are covered in later chapters.

1.5.7 Types of Servers

Web Server
Delivers web pages.

Examples:

●​ Apache
●​ Nginx
●​ IIS

Application Server

Runs application code.

Examples:

●​ [Link]
●​ Django
●​ Laravel
●​ [Link]
●​ Spring Boot

Database Server

Stores and manages data.

Examples:

●​ MySQL
●​ PostgreSQL
●​ MongoDB
●​ SQL Server

File Server

Stores downloadable files.

Mail Server

Sends and receives email.

1.5.8 What Is a Database?
A database is an organized collection of data.

Examples of stored information:

●​ User accounts
●​ Products
●​ Orders
●​ Messages
●​ Comments
●​ Blog posts

Without databases, websites would struggle to manage dynamic content.

Example:

Users Table

ID

Name

Email

Password

1.5.9 Front-End vs Back-End

Front-End

Runs in the user's browser.

Technologies:

●​ HTML
●​ CSS
●​ JavaScript
Responsibilities:

●​ Display pages
●​ User interaction
●​ Form validation
●​ Animations

Back-End

Runs on the server.

Languages include:

●​ JavaScript ([Link])
●​ Python
●​ PHP
●​ Java
●​ C#
●​ Go

Responsibilities:

●​ Business logic
●​ Authentication
●​ Database operations
●​ API development
●​ Security

1.5.10 What Is an API?

An Application Programming Interface (API) allows software systems to communicate.

Instead of returning an HTML page, an API often returns structured data, commonly in JSON
format.

Example:

{
"name": "Laptop",
"price": 1200
}

Modern web and mobile applications rely heavily on APIs.

1.5.11 Three-Tier Architecture

Many web applications follow a three-tier architecture:

Presentation Layer
(Browser)

Application Layer
(Server)

Data Layer
(Database)

Presentation Layer

Handles the user interface.

Application Layer

Processes business logic.

Data Layer

Stores persistent information.

Separating responsibilities improves scalability and maintainability.

1.5.12 Client–Server Advantages

●​ Centralized data management
 ●​ Easier updates
●​ Better security
●​ Supports many users simultaneously
●​ Simplifies backups
●​ Enables scalable applications

1.5.13 Client–Server Limitations

●​ Requires network connectivity
●​ Server failures can affect users
●​ High traffic may slow performance
●​ Infrastructure can be costly
●​ Security must be carefully managed

1.5.14 Real-Life Case Study

Gmail

Client:

●​ Browser or mobile app

Server:

●​ Google Mail servers

Database:

●​ Stores emails, contacts, settings

Workflow:

User writes email

Browser
↓

Google Server

Database

Recipient

The user interacts only with the client, while the server handles processing, storage, and
delivery.

1.5.15 Common Misconceptions

"The browser stores the entire website."

Incorrect.

The browser temporarily stores downloaded resources and requests additional data from the
server as needed.

"Servers are always physical computers."

Not necessarily.

Many modern servers run as virtual machines or containers in cloud environments.

"A website always uses one server."

Large applications often use multiple specialized servers:

●​ Load balancers
●​ Web servers
●​ Application servers
●​ Database servers
 ●​ Cache servers
●​ File storage services

Best Practices
●​ Separate front-end and back-end responsibilities.
●​ Validate user input on both client and server.
●​ Keep APIs well documented.
●​ Protect sensitive data with HTTPS.
●​ Use authentication and authorization mechanisms.
●​ Optimize database queries for performance.

Key Terms
●​ Client: Device or application requesting services.
●​ Server: Computer or software providing services.
●​ HTTP: Protocol used for client–server communication.
●​ Request: Message sent by the client.
●​ Response: Message returned by the server.
●​ Database: Organized collection of data.
●​ API: Interface for communication between software systems.
●​ Three-Tier Architecture: Separation into presentation, application, and data layers.

Review Questions
1.​ What is the difference between a client and a server?
2.​ Describe the request–response model.
3.​ Why is HTTP considered stateless?
4.​ What is the role of a database in a web application?
5.​ Compare front-end and back-end development.
6.​ What is an API, and why is it useful?
7.​ What are the three layers of a three-tier architecture?
Practical Exercise
Imagine you are designing an online library system.

Identify:

●​ The client(s)
●​ The web server
●​ The application server
●​ The database
●​ Three types of requests users might make (e.g., search for a book, borrow a book, view
account details)

Draw a simple architecture diagram showing how these components communicate.