Introduction
This article is the first of a series of technical posts where I discuss websites, and is aimed at people who don't know much about them but want to learn more.
It will hopefully provide you with foundational knowledge into what websites are, how they work, and what happens when we visit them.
In future articles, I will talk about how you can start your own website with low or no code, what to consider about website security, and even which technologies power my website, andreacerasoni.com! But for the time being, if you're looking to start a website, you can check out this awesome video by Ali Abdaal, in which he shows you how to create a website quickly and effectively.
How Do Websites Work?
First, let's see what happens behind the scenes.
When you navigate to any website, your device (computer, phone, tablet, or other) is connecting to a server — which is just another computer. This connection happens over a network, which is usually the Internet (which is why you need an Internet connection to browse websites).
As you type the website's address and hit enter, your device asks the server, in computer language, to kindly return the website to us. The server returns one big page of code, known as HTML, which describes how the website should look and what it's supposed to do. It also returns media, such as images and videos, to be displayed on the page.
Your browser of choice (the program on your device that helps it connect to servers — Chrome, Safari, Firefox, and so forth) takes the HTML and turns it into the colorful page of text and images that meets your eyes:
In the example above, on the right you can see the HTML, while on the left you can see the actual website.
Website Hosting and Its Problems
We established that servers are just computers that, when asked, return the contents of a website.
A website, in summary, is made up of a bundle of contents such as text, media, and code, which are turned into a visual (and often interactive) experience by your browser.
A server houses all of these contents. Thus, it 'hosts' the website.
If the server — which, as mentioned, is just another computer — is switched off, when we navigate to the website that it hosts, we'll get an error. Thus, servers need to be turned on 24/7.
But there's more. Servers, like any other computer, have a limited amount of power. Think of your own device. You probably scratched your head figuring out which model of phone to buy.
Faster processor? More memory? That sounds more powerful, but it will surely cost more. Do I really need it?
Well, people who own websites face the same conundrum. They're always trying to balance the cost of their servers versus how much power they need, which is usually determined by:
- The number of users that visit their website, known as traffic
- The number of interactive features on their website — for example, buttons and search bars
- The amount and size of media shown to users — pictures, videos, and audio files
Last, but not least, is the problem of traffic spikes, which are temporary and abnormally large increases in the number of users of a website. An example of when this can happen is for popular online stores during Black Friday.
Have you ever experienced your computer slowing down when you open too many Chrome tabs? The server can run into a similar problem during traffic spikes. If too many people connect to the same website at the same time, the server can struggle to fulfill all of the requests. Think of fans spinning fast and the metal case of the server heating up.
There are many ways in which website developers approach hosting. Some choose to buy their own servers, and some opt for fully managed hosting, where a company takes care of the servers entirely, including their physical security, electricity consumption, and so forth.
Regardless of the chosen hosting solution, ultimately, the life and blood of a website (its media, code, and text) always need a physical computer to host it.
Making The Internet Human-Readable
One piece of the puzzle is missing. Have you noticed it yet? Let's discuss it.
In a network like the Internet, devices are identified through an IP address, including servers that host websites. However, it's extremely inconvenient for us human users to remember the addresses for all our favorite websites, for example:
- 142.251.36.14 (Google)
- 157.240.247.35 (Facebook)
- 185.15.59.226 (Wikipedia)
To solve this problem, the architects of the Internet have created human-readable names for website servers. These are known as domain names, which make it easy for us to remember and navigate to websites:
- google.com (Google)
- facebook.com (Facebook)
- wikipedia.com (Wikipedia)
However, when we enter the domain name of a website into our browser, such as google.com, how does it know which server to connect to?
That's where Domain Name Service (DNS) comes into the picture. DNS servers have the most tedious and demanding job on the Internet. They continuously translate website domain names, such as andreacerasoni.com, into the IP addresses of the servers that host it.
How does the DNS server know which IP address to return for each domain name? Well, the website developer will have configured that when they bought the website's domain name and set up their hosting servers.
For example, the people who own the following domains will have, at some point, configured the DNS settings as such:
- google.com -> 142.251.36.14
- facebook.com -> 157.240.247.35
- wikipedia.com -> 185.15.59.226
(The above is an oversimplification, as Google, Facebook, and Wikipedia are all supported by many dozens of servers, and which one you connect to often depends on your geographic location.)
All browsers are automatically configured to first reach out to a DNS server when a domain name is entered in the search bar, which returns an IP address. The browser will then know which physical server to reach out to for requesting the website.
Conclusion
In this article, we explored the concept of a website: what it is, how it works, and what happens when we connect to one.
Make sure to check out future blog posts where we'll discuss other website-related topics in more depth.