How websites work

Outcome

You will compare your local HTML journal with a page requested from a web server. You will be able to explain what happens between entering an online URL and seeing the rendered page, and you will inspect one real request in your browser.

Why this matters

Your HTML journal already works as a local file. Browsers, servers, URLs, DNS, and HTTP explain what changes when a visitor opens the same type of page through the web.

What you will practice

Distinguish the internet, the web, a web page, a website, a browser, and a search engine.
Compare a local file URL with an HTTPS URL.
Describe the roles of a client, DNS, a router, and a web server.
Put the main steps of a web page request in order.
Find the URL, method, and status of one request in browser developer tools.

What is new and what is reused

New: Clients, servers, DNS, IP addresses, routers, packets, URLs, HTTP requests, and HTTP responses.
Reused: Your completed semantic HTML journal, opening a local file in a browser, entering a web address, following a link, and using a keyboard shortcut.

Starting point

Before you start

The completed html-elements folder and its index.html file.
A current version of Edge, Chrome, or Firefox.
A working internet connection.

Current state: Your HTML journal opens directly from your computer. You have not yet compared that local file load with a page requested from a web server.
First action: Open html-elements/index.html in the browser and inspect the start of the address-bar value.
First checkpoint: The HTML journal appears, and its address starts with file: rather than http: or https:.
Help trigger: Ask for help if the HTML journal does not open, the online page does not load, developer tools are blocked, or the labels in your browser differ from the labels in this lesson.

Required result

You have completed the lesson when you can:

explain the difference between the internet and the web;
compare how the browser obtains a local HTML journal and an online page;
identify the browser as a client and describe the server’s role;
describe the DNS lookup, HTTP request, HTTP response, and browser rendering in order;
find one GET request and its status code in the browser’s Network panel; and
explain why one visible web page can create several network requests.

Compare a local page with an online page

Open html-elements/index.html in the browser. The address normally starts with file: and contains the path to the file on your computer. In this case, the browser reads index.html directly from local storage. It does not need DNS, an HTTP request, or a web server to obtain that file.

Next, open a new tab, enter https://example.com in the address bar, and press Enter. This address starts with https:. The browser must contact systems outside your computer to request the page.

Both pages contain HTML that the browser parses and renders. The source location and retrieval method differ:

Page	Address starts with	How the browser obtains the HTML
Your HTML journal	`file:`	Reads `index.html` from local storage
Example Domain	`https:`	Sends an HTTP request through a protected network connection

Check

Keep both tabs open. Point to the address in each tab and explain which page needs a web server.

If it does not work

If the HTML journal is missing, open html-elements/index.html from Windows File Explorer.
If Example Domain does not load, check the internet connection and confirm that the address is https://example.com.

Separate the internet from the web

The internet is a global network of connected networks. It provides the infrastructure that lets devices send data to other devices.

The web is one service that uses the internet. Web browsers and web servers exchange resources through HTTP. Email, online games, and file transfer can also use the internet, but they are not automatically part of the web.

Term	Meaning	Example
Internet	The network infrastructure that carries data between connected networks	Your school network connected through an internet service provider
Web	Linked pages and resources exchanged mainly through HTTP or HTTPS	The pages you open in a web browser
Website	A related collection of web pages and resources	`developer.mozilla.org`
Web page	One HTML document at a specific URL	An article, home page, or contact page

Name the parts

Client and browser

A client requests a service or resource. During a normal page load, your web browser acts as the client. The term describes its role in that exchange. It does not describe a specific type of computer.

A web browser is the application that requests, reads, and displays web resources. Edge, Chrome, Firefox, and Safari are browsers.

Server

A server provides a service or resource to clients. A web server receives HTTP requests and sends HTTP responses. The server can be one program on one computer, one of many programs on a shared computer, or part of a larger group of systems.

Your own computer can act as a client in one process and a server in another. The current role matters more than the size or type of the computer.

Search engine

A search engine is a web service that helps you find web pages. Google, Bing, and DuckDuckGo are search engines. You use a browser to visit them.

Modern browser address bars can accept both a URL and a search query. This combined control can make a browser and a search engine look like the same tool, but they have different roles.

DNS and IP addresses

A domain name is a human-readable name such as example.com. An IP address identifies a network interface so data can reach it.

The Domain Name System, or DNS, connects domain names with IP addresses. Your device can reuse a recent DNS result from a cache. If it does not have a cached result, a DNS resolver looks up the domain name. One domain name can lead to different IP addresses at different times or locations.

Routers and packets

Data crosses the internet in smaller units called packets. A router forwards packets from one network toward another network. Several routers can handle the packets between your browser and a distant server.

Packets from one exchange do not have to use one fixed route. They can take different routes and still be reassembled into the correct data at the destination.

Follow one page load

A URL, or Uniform Resource Locator, identifies a resource and tells the browser how to request it.

In https://example.com/about:

https is the protocol scheme;
example.com is the domain name; and
/about is the path to a resource.

HTTPS uses HTTP for the request and response semantics and protects the connection with encryption.

Browser–server sequence

What happens after you press Enter

Browser
Read the URLhttps://example.com/
The browser identifies the protocol, domain name, and path.
DNS
Find an IP addressexample.com → a current IP address
DNS supplies an address for a server that can handle the request. A cached answer can make this step faster.
Browser → server
Send an HTTP requestGET /
The browser connects to the server and asks for the resource at the path. HTTPS protects the exchange with encryption.
Server → browser
Return an HTTP response200 OK · text/html
The response contains a status, descriptive headers, and usually a response body.
Browser
Build and display the page
The browser reads the HTML, requests referenced files such as CSS and images, and renders the result.

A page load uses DNS to locate a server, HTTP to request resources, and the browser to turn the responses into a visible page.

The diagram shows the main path, not every system involved. A real page load can also use caches, content delivery networks, proxy servers, several DNS servers, and different versions of HTTP. Those details do not change the core client–server model.

Checkpoint: The request sequence is clear

What now works: You can trace the sequence from a URL through DNS, an HTTP request, an HTTP response, and browser rendering.
What remains: Inspect one request in the browser and connect the visible Network panel values to the model.
Next action: Return to the Example Domain tab and open the browser developer tools.
If it does not work: If the sequence is unclear, read only the five numbered steps in the diagram and say which actor performs each step.

Observe a real request

The Network panel in browser developer tools records requests while the panel is open. Use the Example Domain page so the first inspection has few rows.

Open https://example.com in Edge, Chrome, or Firefox.
Open developer tools with F12. If your keyboard uses function-key controls, try Fn + F12. You can also use Ctrl + Shift + I on Windows.
Select the Network panel.
Reload the page with Ctrl + R. The Network panel should now contain at least one row.
Select the row whose name contains example.com or /. Its type is usually document or html.
Open the request details and find Request URL, Request Method, and Status Code. Browsers can group these values under a section named General or Headers.
Confirm that the method is GET and that a successful response has a status in the 200 range. For this page, you will normally see 200.

If it does not work

If the Network panel is empty, keep the panel open and reload the page again.
If developer tools open in a separate window, continue there. The Network panel works the same way.
If your school browser blocks developer tools, ask your teacher to demonstrate the same request. You can complete the remaining explanation without changing the browser settings.
If the request name or status differs, check that the address bar contains https://example.com and reload once. A browser extension, cache, or network service can add or change rows.

Read the request and response

The Network panel presents a structured version of the HTTP exchange. The examples below are shortened to show the main parts. They are not commands to run.

GET / HTTP/1.1
Host: example.com

GET is the method. It asks the server to return a resource.
/ is the path. It identifies the site’s root resource.
Host identifies the domain name for the request.

HTTP/1.1 200 OK
Content-Type: text/html

<!doctype html>

200 OK is the status. It reports that the request succeeded.
Content-Type: text/html tells the browser that the response body contains HTML.
The response body begins after the empty line. In this example, the body is an HTML document.

Your browser might use HTTP/2 or HTTP/3 instead of HTTP/1.1. Developer tools can also display headers in a different order. The same request, response, status, headers, and body concepts still apply.

One page usually needs several requests

The first HTML response can refer to other resources. The browser can then make more requests for:

CSS stylesheets;
JavaScript files;
images and icons;
fonts; and
data from web services.

The browser reads the responses and combines them into the page you see. A website is therefore not one large file that the server sends in a single exchange.

Self-check

Complete these checks against the required result.

Explain the difference between the internet and the web without using the terms as synonyms.
Compare the file: address of the local HTML journal with the https: address of Example Domain, then identify which page needs an HTTP response.
Name one browser and one search engine, then state the role of each.
Identify the client and server during a normal page load.
Put these actions in order: the server responds, DNS supplies an address, the browser renders the page, and the browser sends a request.
In the Network panel, point to one request URL, its method, and its status code.
Explain why a page with HTML, CSS, JavaScript, and images normally creates several requests.

Assistance 2 — Compare your answers with the reference answers

The internet connects networks and carries data. The web is a service that uses that infrastructure to exchange linked pages and resources.
Edge, Chrome, Firefox, and Safari are browsers. Google, Bing, and DuckDuckGo are search engines. A browser accesses web resources; a search engine helps find them.
The browser is the client. The web server receives the request and sends the response.
DNS supplies an address → the browser sends a request → the server responds → the browser renders the page.
A normal Example Domain document request uses GET and usually returns 200. The exact URL appears in the request details.
The HTML can refer to separate CSS, JavaScript, image, font, and data resources. The browser requests each needed resource.

Common points of confusion

The internet and the web are related, but they are not the same system. The web uses the internet.
A browser is not a search engine. A browser can send text from its address bar to a search engine.
A server does not have to be one large, powerful machine. Server describes a role in an exchange.
DNS does not search page content. DNS helps the client find a network address for a domain name.
A successful HTML response is not the complete rendered page. The browser can need more responses before the page is complete.

Optional deeper investigations

The required lesson is complete before these investigations. Choose any route that matches what you want to examine.

Inspect a DNS answer

Open PowerShell.
Run nslookup example.com.
Find one returned address.
Run the command again later or on another network and compare the result. Different valid addresses can appear.

Compare a small and a large page

Keep the Network panel open on example.com and record the number of requests.
Open a larger website in a new tab and reload it with the Network panel open.
Filter the rows by document, CSS, JavaScript, image, or font type.
Explain why the larger page makes more requests. A higher number is not automatically better or worse.

Investigate status codes

Find examples of 200, 301 or 302, and 404 in the Network panel. For each status, record the request URL and explain what the status reports. Do not try to bypass a 401 or 403 response; those statuses can indicate that access requires authentication or permission.

Optional reference and video

The required explanation is complete on this page. Use these sources if another presentation would help:

How Does the Web Work? from The Odin Project provides a reference list and knowledge check.
How the web works from MDN adds HTTP, packets, status codes, and URL detail.
Browsing the web from MDN compares web pages, websites, servers, browsers, and search engines.
How the Internet Works in 5 Minutes is a short visual overview. The video uses a simplified model, so use the technical terms from this lesson when the explanations differ.

Next step or safe stopping point

The required lesson is complete when you can explain the five-step page-load sequence and identify one real request in the Network panel.

Continue to Practice: Build an HTML profile page to apply the HTML and Git workflows in one independent project.

If you stop here, leave yourself this resume note: Next action: open the profile-page assignment and create the html-profile project folder.