How do we browse on internet?
Tags: webdev, programming
Published: 2021-07-20 07:20:11

When you type [youtube.com](http://youtube.com/) into your browser (Chrome, Internet Explorer, Firefox, etc.), the browser makes an HTTP request. HTTP stands for HyperText Transfer Protocol, it is responsible for communication between web servers and clients.

<br>

HTTP is a protocol( a set of rules or procedures for transmitting data between electronic devices) for browsers and servers to talk to each other. Humans, too, have protocols for talking to each other. Consider that when you meet someone, you often greet him or her with a handshake. Browsers and servers also greet and acknowledge each other according to HTTP.

<br><br>

![https://media.giphy.com/media/2HtWpp60NQ9CU/giphy.gif](https://media.giphy.com/media/2HtWpp60NQ9CU/giphy.gif "Shake Hands")

<br><br>

Whenever you submit a form or click a button on the website you are using HTTP and going through the request and response cycle. Clients and servers communicate by exchanging individual messages (as opposed to a stream of data). The messages sent by the client, usually a Web browser, are called requests, and the messages sent by the server as an answer are called responses.

<br><br>

![how we search on internet](https://drive.google.com/uc?id=1Vy4KDMqoGd_Dn8X2087JFOxNDqhJJQaq "browser search")

<br><br>

HTTP is stateless, which means that every request is completely independent eg. when you reload the page on the website or navigate to different pages on the website it doesn't remember anything about previous requests/response cycle, you can visualize this as transactions.

<br>

We can use local storage, cookies, sessions to enhances user experiences but HTTP at its core is stateless.

<br><br>

![https://media.giphy.com/media/3o6Mb9TkJc357aDUo8/giphy.gif](https://media.giphy.com/media/3o6Mb9TkJc357aDUo8/giphy.gif "I don't remember")

<br><br>

## HTTPS

<br>

HTTPS stands for Hyper Text Transfer Protocol Secure. Data sent back and forth through HTTPS is encrypted with SSL/TLS (SSL stands for Secure Sockets Layer, TLS stands for Transport Security Layer). Anytime the user is sending sensitive information it should be always through HTTPS eg. contact information/contact form, credit card detail, social security number. You can add HTTPS

<br>

by installing an SSL certificate on your web host.

<br><br>

![https](https://drive.google.com/uc?id=1MrSjryRACaoDjCC6svmKE84CwqyQecy- "https")

<br><br>

## HTTP Request Methods

<br>

So when you type <https://www.youtube.com/> on the browser, you are sending a message from the client (your browser) to the server, the server receives the message and responds by sending the webpage to us.

<br>

The request sent by the browser looks like something as shown below

<br><br>

```powershell
GET / HTTP/1.1
Host: www.youtube.com
...
```

<br><br>

When a request is made to a server, it has some method attached to it, like GET in the above example. We are going to see 4 such methods but you can find more on the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods)

<br><br>

## GET

<br>

A get request is used when you need to fetch data from the server. eg. loading a HTML page, loading assets like CSS, JS, XML page etc.

<br>

When you visit a webpage you make a GET request to a server by HTTP.

<br><br>

## POST

<br>

A POST request is used when you are adding data to the server. eg. When you submit a contact form on the website or when you post a blog, You are sending data to the server and it will store data in your database.

<br><br>

## PUT

<br>

A PUT request is used when you want to update data that is already on the server. eg. change the text, image of the blog post.

<br><br>

## DELETE

<br>

A DELETE request delete data from the server.

<br><br>

## HTTP Status Code

<br>

The response sent by the server when you request for youtube.com is shown below.

<br><br>

```powershell
HTTP/1.1 200 OK
Content-Type: application/binary
...
```

<br><br>

These unusual numbers send by the server are called as status code which tells the status of the request as it is 200 OK you will get [the youtube.com](http://youtube.com/) homepage. Other common status codes are as follows.

<br><br>

![status code](https://drive.google.com/uc?id=1dZVkp3BwKeSiB8z4m5l3wxSL3-utrodQ "status code")

<br><br>

## Common Status Codes

<br>

200 - OK

201 - OK created

301 - Moved to new URL

304 - Not modified(Cached version)

400 - Bad Request

401 - Unauthorized

404 - Not found

418 - I'm a teapot (April fools joke in 1998)

500 - Internal Server Error

<br><br>

## HTTP Header Files

<br>

The response given by the server is in two parts i.e. header and a body.

<br>

The header gives a status of the request, server name on which it is running, with detail about the content that has been requested as shown below.

<br>

The body is a response that is gonna be an HTML page that you are trying to load, data that is sent from the server to the website, etc.

<br>

There are three types of header, general, response, request.

<br>

You can read more about HTTP header files on [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).

<br><br>

## IP

<br>

So we learned, how the server and client respond to each other through HTTP but how the message sent by the client will be sent to the browser and vice versa. It is done through IP (internet protocol), every phone, laptop, and desktop in the world has a unique address and that unique address is called an IP address. In the real world, you can think of it as an address of a famous place or shop in your city, it will be always unique.

<br><br>

![IP](https://drive.google.com/uc?id=1La1YhOQEtEf-kTR3pPAhGUTbZda4u82u "IP")

<br><br>

An IP address is a set of numbers and has 4 parts, and each part can take a value from 0 to 255(8bit).

<br><br>

```powershell
0.0.0.0
255.255.255.255
```

<br><br>

## DHCP

<br><br>

Back in the day, to get internet on your computer, your internet service provider had to provide you IP address manually. This was not scalable as it requires extra work. So we have a protocol called DHCP (Dynamic Host Configuration Protocol) so when you boot your laptop or mobile phone, if it has support for that protocol it will automatically assign IP addresses and other communication parameters to devices connected to the network using a client-server architecture.

<br>

You can read more about DHCP on [Wikipedia](https://en.wikipedia.org/wiki/Dynamic_Host_Configuration_Protocol)

<br><br>

![dhcp](https://drive.google.com/uc?id=1GR1OSuiJNELcciAzBI5UzjnJt8OBxNPn "dhcp")

<br><br>

## DNS

<br>

DNS (Domain Name System) will convert the domain name of the website to an IP address, it is necessary because we know the website by their name but the internet knows from their IP addresses.

<br><br>

![dns](https://drive.google.com/uc?id=1LQNF0wSbd_H-aN7dT9hThqpo0FK09ZB6 "dns")

<br><br>

If you want to look up the IP addresses of a website you can do that by opening the command prompt and typing as shown below

<br><br>

```powershell
nslookup google.com
```

you can copy that address and on your browser type http://\[ip address] you will be redirected to [google.com](http://google.com/)

<br>

You can read more about it on [Wikipedia](https://en.wikipedia.org/wiki/Domain_Name_System)

<br><br>

## Router

<br>

Let's say you type [google.com](http://google.com) on the browser you are sending an envelope i.e. a request with ip address of the server in this case it will be google.com and your own ip address so that server can send the response to you. But how this request will get to google datacenter which might be far away from your home. The answer is it is done through millions of router around the globe.

<br>

If you are using the internet in your house you might have one too, its sole purpose is to take data from your house to the internet and to send the response from the server back to your laptop, mobile or desktop, etc.

<br>

You can check the route of the website from your command prompt by typing as shown below.

<br><br>

```powershell
traceroute google.com
```

<br><br>

if that doesn't work type 'tracert' instead of traceroute.

<br><br>

## TCP

<br>

Now we have figured out how we can get the IP address of the server and the client and how we send them using routers all across the world. But how does the server know which data to send back to you? The data you have requested might be a webpage, voicemail, image, video, etc. For this, We need another protocol on our request envelope which we send to the server, it is called TCP (Transmission Control Protocol). TCP is a number that corresponds to a number which is a service that you want to send or access on your computer.

for example,

<br>

### 22 SSH

<br>

### 53 DNS

<br>

### 80 HTTP

<br>

### 443 HTTPS

<br>

### 587 SMTP

<br>

when we access the webpage we use 80 or 443 TCP protocol.
<br>

You can test this by typing [http://google.com:80/](http://google.com/) or [https://google.com:443/](https://google.com/) it will redirect you to [google.com](http://google.com/) page.
<br>

You can also test it on the command line as shown below
<br><br>

```powershell
curl -I https://www.google.com:443/
```

<br><br>
It should return with 200 OK Status code and with content type as text/html and with other stuff.

<br>

You can read more about TCP on [Wikipedia](https://en.wikipedia.org/wiki/Transmission_Control_Protocol)

<br><br>

## TCP/IP

<br>

When you request a video or a high-quality image from the internet, it will not send you a whole image or video at once but with pieces of information using TCP/IP protocol. IP ensures every computer on the internet that speaks this protocol has an address, TCP ensures delivery of the data to the users.

<br>

You can read more about TCP/IP in [Wikipedia](https://en.wikipedia.org/wiki/Internet_protocol_suite)

<br><br>

```powershell
GET / HTTP/1.1
Host: www.youtube.com
...
```

```powershell
0.0.0.0
255.255.255.255
```

<a href="https://www.buymeacoffee.com/narottam"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=narottam&button_colour=FFDD00&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff"></a>

For more such insights, checkout my blog website blog.webdrip.in

<br><br>