How a website works, like what happens when we visit a website in a browser?
Let’s find out what exactly happens when someone hit a web address in the browser. Let’s say we open a browser and headover to the New York Times website: http://www.nytimes.com the web address is called URL, which is Uniform Resource Locator.
Basically it is a way to locate a resource on the internet. Resources can be webpages, aslo called html documents, they can be images, video files and so on.
So what happes when we hit the URL in the browser address bar? Well, there are 2 things involved here:
- Browser, also called client
- the computer or computers that host our teget website called web server
And this is what we called client server model. The client requests service and the server provides the service. So our browser send a message to the server and says, hey give the the homepage of this website. This kine of how you are sending a text message to your friend, think of your phone is clinet sending the message and your friend’s phone as the server receiving the message. Now back to our example.
The message is formatted based on a protocol called, HTTP or Hypertext Transfer Protocol. HTTP is a language the clients and servers use to talk to each other. It is not a programing language, it is just plain textual language for communicating over the internet. We also have HTTPS which is HTTP with encryption, so the messages exchanged between the server and the client are encrypted.
Here is a simplified example of HTTP message:
GET /index.html HTTP/1.1
HOST: www.nytimes.com
Accept-Language: en-us
With this message the browser tells the server what it is looking for. So in the first line it says it wants to get a page or a file called index.html using HTTP version 1.1 the index.html often represents a homepage of websites.
In the second line, we can see the host, that is nytimes.com
And in the line, we can see the language that the client can accept, in this case it is English.
This is the message based on the HTTP protocol that client and server understand.
So the server receive the message, it figures out what the client is asking and then it will send a message back to the client.
The first message is called HTTP request and the second message is called HTTP response. Every data exchange using the HTTP protocol involves two messages, a request and a response.
Now what is in the response? Here is a simplified example of HTTP response:
HTTP/1.1 200 OK
Date: 1 Jan 2024 09:30
Content-Type: text/html
<!DOCTYPE html>
<html>
....
</html>
In the first line we see, the version of the HTTP protocol is used, folowed by a number which is a status code. 200 means successfull or ok. In second line we see date and time of the response. Next we can see type of the content the server is sending back to the client(browser) this ths case text/html. After that we can see the html codes or the html document that represents the homepage of the New York times website. The browser reads the html document, it constructs what we called DOM or Document Object Model. Tghis is a modle that represents the objects or elements of in html document. What are these elements? All the building blocks of the webpage like, paragraph of text, images, links and so on.
Now as the browser is reading this html document that is returned form the server, it discovers references to other resources in this document like, images, fonts and other stuff. Each of these resources has an address or URL. So for each resource browser sends a separate http request to the server to fetch the resource. Many of the http requests are sent in parallel so that we can see the page as quickly as possible. When the browser has all the necessery resources, it renders the html document. Rendering the html document displaying it.
So in the nutshell, the browser sends an http request and receives an http response. This http response contains a http document. Then browser reads the http document and constructs to a Document Object Model and render the page.