Have you ever wondered how the web works? In this section, I am going to tell you exactly what happens the moment you type the address of a website into your browser and hit ENTER.
As part of this, we are going to talk about a few important concepts and terms that you need to know as a web developer.
So, lets say we launch our browser and go to a website like https://www.microsoft.com.
Now this address that we have in the address bar is called a URL, which is short for Uniform Resource Locator. Basically, it is a way to locate a resource on the internet.
Resources can be:
- Web Pages (HTML Documents)
- Images
- Video Files
- Fonts
and so on.
So, we type the URL and press ENTER. What happens now?
Well, there are two pieces involved here:
- The Browser (also called the Client)
- The Server (the computer or computers that host our target website). We refer to these as Web Servers or Servers for short.
This is what we call the client-server model. The client requests a service, the server provides the service.
So, our browser sends a message to the server, and says, "Hey! Give me the homepage of this website."
This is kind of similar to how you send your friend a text message. You can think of your phone as the client sending the message, and your friend's phone as the server receiving the message.
Now to our example. This message is formatted based on a protocol called HTTP (HyperText Transfer Protocol).
You have probably noticed it before, but never knew what it was.
In simple terms, HTTP is a protocol that clients and servers use to talk to each other. It is not a programming language. It is just a plain textual language for communicating over the internet.
We also have HTTPS, which is HTTP + Encryption. So the messages exchanged between the client and the server are encrypted in this case.
Here is a simplified example of an HTTP message:
GET /index.html HTTP/1.1
Host: www.microsoft.com
Accept-Language:en-us
With this message, the browser tells the server what it is looking for.
So, on the first line it says that it wants to GET a page or a file called index.html using HTTP version 1.1. Index.html often represents the homepage of websites.
On the second line we can see the host, that is www.microsoft.com.
On the third line, we can see the language en-us that the client can accept. In this case, it is English.
Now, don't worry about memorizing any of this. All I want you to understand here is that this message is structured based on the HTTP protocol that clients and servers understand.
So, the server receives this message and figures out what the client is asking. Then it will send a message back to the client.
The first message is called an HTTP request.
The second message is called an 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:
HTTP/1.1 200 OK
Date: 6th April 2023
Content-Type: text/html
<!DOCTYPE html>
<html>
...
</html>
On the first line, we see the version of the HTTP protocol used, followed by a number (200), which is the status code. 200 means successful or OK.
Right below that, we can see the date and time of the response.
Next, we can see the type of content the server is sending back to the client. In this text/html.
After that, we can see the HTML code, or the HTML Document, that represents the homepage of www.microsoft.com. Of course, the actual HTML code is way longer.
Now, as the browser reads this HTML document, it constructs what we call a DOM (Document Object Model). Don't let this fancy name scare you. This is the model that represents the objects or elements in our HTML document.
What are these elements? All the building blocks of our page like paragraphs of text, images, links, and other stuff. You will see these in action in the next section.
Now, as the browser is reading this HTML document that is returned from the server, it discovers references to other resources in this document like images, fonts, and other things.
Each of these resources has an address or a URL. So, for each resource, the browser sends a separate HTTP request to the server to fetch that resource.
Many of these HTTP requests are sent in parallel, so we can see the page as quickly as possible.
Once the browser has all the necessary resources, it will render the HTML document.
Rendering an HTML documents means displaying it. It is a fancy technical term we use often.
So, in a nutshell, our browser sends an HTTP request to the server and receives an HTTP response. This HTTP response contains an HTML document.
The browser reads that HTML document to construct a DOM (Document Object Model) and render the page.
In the next article, I am going to show you all of these steps in action.
I have a complete HTML/CSS/JavaScript eBook (Zero to Hero) that you can read in your free time.
You can get the eBook here.
Happy Coding!
Top comments (0)