Topic 0.1
What a Website Really Is
In one line
A website is a set of files kept on a computer called a server; your browser asks for them over the internet and turns them into the page you see.
Think of it like this
Ordering from a restaurant menu. You (the browser) tell the waiter which dish you want (the address). The waiter carries the order to the kitchen (the server), and the kitchen sends back the food (the files). You never walk into the kitchen; you only see what arrives at your table.
Words you'll meet
New words in this topic, in plain English. Come back here whenever one feels fuzzy.
- Website
- A group of files (pages, styles, scripts, images) that a server sends to browsers.
- Server
- A computer that stays on and sends files to anyone who asks for them over the internet.
- Browser
- The app you use to visit websites. It downloads the files and draws the page.
- URL
- A web address, like
https://hectal.in/html. It says which server and which page. - Domain
- The human-friendly name of a server, like
hectal.in. - DNS
- The internet's phone book: it turns a domain name into the server's number (its IP address).
- HTTP request
- The message a browser sends to a server asking for a file.
- HTTP response
- The server's reply: a status (like 200 OK or 404 Not Found) and the file itself.
Step by step
01You type an address
You type https://hectal.in/html and press Enter. The browser splits it into parts: the protocol https, the domain hectal.in and the path /html.
The s in https means secure: everything sent between you and the server is encrypted, so nobody in between can read or change it.
02The browser finds the server
Computers on the internet find each other by number, not by name. The browser asks DNS: "what is the IP address of hectal.in?" and gets back something like 76.76.21.21.
The answer is remembered (cached) for a while, so the next visit skips this step.
03It asks for the page
The browser connects to that address and sends an HTTP request. A simplified request looks like this:
GET /html HTTP/1.1
Host: hectal.in
Accept: text/html04The server answers
The server finds the page and replies with a status code and the HTML. 200 OK means "here it is". You've probably seen 404 Not Found, which means the path doesn't exist on that server.
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<!DOCTYPE html>
<html lang="en">
...the page...
</html>05The browser builds the page
The browser reads the HTML from top to bottom. When it meets a stylesheet, script or image, it requests that file too. Then it works out the layout and paints the pixels on your screen.
This whole trip usually takes well under a second.
Try it yourself
- 1
Make it yours
In the first example, change
Hello, web!to your own name. The preview updates as you type. - 2
Look at a real page's HTML
Open any website, right-click an empty spot and choose View page source (or press
Ctrl+U,Cmd+Option+Uon a Mac). That text is the HTML the server sent. Find the<title>line: it's the text on the browser tab. - 3
Pull your own URL apart
In the second example, replace
https://hectal.in/htmlwith a URL from your address bar and run it. Which part is the domain and which is the path?
Code & diagrams
Change the words between the tags and watch the preview update.
Preview
Console
Nothing logged yet.A peek ahead: JavaScript can read the page and pull a URL apart. You'll learn how in the JavaScript course.
Preview
Console
Nothing logged yet.Expected console output
Protocol of a real URL: https:
Domain: hectal.in
Path: /htmlBreak it on purpose
Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.
Break #1
Ask for a page that doesn't exist
Visit https://hectal.in/this-page-does-not-exist in your browser.
Myth vs fact
Myth
The website lives inside my browser.
Fact
The files live on a server. Your browser downloads a copy each visit (and may cache some to be faster).
Myth
The internet and the web are the same thing.
Fact
The internet is the global network of connected computers. The web is one service that runs on it, made of pages linked by URLs. Email and online games also use the internet but aren't the web.
Myth
You need a server to make a web page.
Fact
A .html file on your computer opens in the browser directly. You only need a server to share it with others.
Pro corner
Extra depth for experienced readers. New to this? Skip it for now and come back later.
- ▸
Modern pages load over HTTP/2 or HTTP/3, which send many files over one connection at the same time, so many small files are less costly than they were with HTTP/1.1.
- ▸
Browsers render progressively: the HTML parser builds the page while it is still downloading. A plain
<script>in the<head>pauses parsing until it is fetched and run, which is why scripts getdefer(you'll see this in the JavaScript course). - ▸
Open DevTools → Network tab and reload a page: you'll see every request, its status code, size and timing. It's the first place to look when a page is slow or broken.
Remember this
- 1
A website is a collection of files: text files written in HTML, CSS and JavaScript, plus images, fonts and videos. They live on a server, a computer that is always on and connected to the internet, whose only job is to send those files to anyone who asks.
- 2
Your browser (Chrome, Firefox, Safari, Edge) is the program that asks for those files and turns them into a page. It reads the HTML to know what is on the page, the CSS to know how it looks, and runs the JavaScript to make it do things.
- 3
Every page has an address called a URL (Uniform Resource Locator), like
https://hectal.in/html. The parthttps://is the protocol, the rules for talking;hectal.inis the domain, the server's name;/htmlis the path, which file or page you want on that server. - 4
When you open a URL, the browser first looks up the domain in the DNS (Domain Name System), the internet's phone book, to get the server's numeric IP address. Then it sends an HTTP request ("please send me /html") and the server replies with an HTTP response containing the HTML.
- 5
The HTML often mentions other files: a stylesheet, scripts, images. The browser asks for each of those too, then puts everything together. One page can mean dozens of requests, which is why big images and many files make sites slow.
- 6
A web page you open from your own computer (a file ending in
.html) works the same way, just without the server: the browser reads the file from your disk. That's how you'll test everything you build in this course.
Explain it without notes
In your own words, what happens between typing a URL and seeing the page?
What are the three parts of https://hectal.in/html, and what does each tell the browser?
What does the status code 404 mean, and whose fault is it usually?
Practice
Write the URL parts (protocol, domain, path) of https://developer.mozilla.org/en-US/docs/Web/HTML.
In the live example, add a second paragraph under the first one that says what a server is, in one sentence.
Trade-offs
- ↔
Static files (plain HTML/CSS/JS) are fast and cheap to host; pages built by a server on every request can be personalised but cost more to run.
Done when you can
I can explain what a server and a browser each do.
I can split a URL into protocol, domain and path.
I can describe the request and response steps of loading a page.
I know what status codes 200 and 404 mean.
I can open a page's source code in my browser.