Hello there👋

When you create an excellent website that includes Frontend and Backend apparently, Does this thought strikes your mind that how this website works in the background?

So let's dive into how web works

Here’s the great news for you!! This theory is not essential to writing web codes, but before long you'll start to benefit from understanding what's happening in the background. So you don’t have to be a professional web developer to understand how a website works. No matter your level of experience, or how “tech-savvy” you are, if you’re investing in a business website, you should know how a website works. No excuses. Let's Start

Clap clap clap!!

The website works on basic Client-server architecture. Here the client will be the user or the people who are using the website and for the server, we can say the website is stored on the server as the source code is stored there actually and then return to the browser.

Browser is just an interpreter that gets back the certain code which can be displayed on the screen that source code can be stored on the server or sometimes it's dynamically generated by server example: fetching data.

Every single step could be split up into multiple other steps, but for a good overview of how it all works, that's something we can ignore here. Let's have a look at all four steps.

Now let's see how the Web works on the Client Side:

Step1: Resolve URL

How does the server know that by hitting the URL into web browser example www.snehabirodkar.ml ?

Answer: Its the Address of the server

1. A request is sent to the server of the website.
2. The response of the server is parsed.
3. The page is rendered and displayed.

The official address of each server is an (Internet Protocol) IP IPV4 172.16.254.1 or IPV6 2001:0db8:85a3:0000:0000:8a2e:0370:7334 This format will certainly you'll not enter in your browser for accessing the website, but you could enter such address if you know! But URL is more of a Human readable Format.

When you enter URL your browser contacts a DNS (Domain Name System) Server which is a very huge dictionary-like structure where the domain is mapped to an IP you could say as DNS server translates your URL to IP address then this address is given to the web browser and then the browser makes the request to the server which has IP address. This is how the website is displayed.

In case you're wondering: The browser knows the addresses of these domain servers by heart, they're programmed into the browser so to say.

Once the IP address is known, we proceed to step 2.

Step2: Request is sent

The browser bundles up a branch of information (What's the exact URL?, Which kind of request is made?, which metadata is attached?....) and sends that data to IP then this is how we get our response. Now when code is loaded the data transfer should be standardized. It means as to how the request and response should look like that is done by the protocol that is HTTP or HTTPS(it's more in secured form). The data is sent via the "Hypertext Transfer Protocol" (known as "HTTP") - a standardized protocol that defines what a request and response has to look like, which data may be included (through forms) and how the request will be submitted. Some servers are programmed to generate websites dynamically based on the request (e.g. a profile page that contains your data or in an eCommerce site newly added product), other servers return pre-generated HTML pages (e.g. a blog page). Or both is done - for different parts of a webpage. There also is a third alternative: Websites that are pre-generated but that change their appearance and data in the browser(add some data before and add some details dynamically)

Now server returns the code and displays a website. So let's continue with step 3.

Step 3 - Response Is Parsed

The browser receives the response sent by the server. Instead, the next step is that the browser parses the response. Just as the server did it with the request. Again, the standardization implemented by HTTP helps of course.

The browser checks the data and metadata that are enclosed in the response. And based on that, it decides what to do and performs the task.

In that case, the response would contain a specific piece of metadata, that tells the browser that the response data is of type text/HTML.

<h1>Breaking News!</h1>
<p>Websites work because browser understand HTML!</p>

Every HTML tag has some semantic meaning i.e. structured manner which the browser understands because HTML is also standardized. Hence there is no guessing about what a <h1> tag means. The browser knows how to parse HTML and now simply goes through the entire response data to render the website.

Step 4 - Page Is Displayed

As mentioned, the browser goes through the HTML data returned by the server and builds a website based on that.

Though it is important to know, that HTML does not include any instructions regarding what the site should look like (i.e. how it should be styled). It only defines the structure and tells the browser which content is a heading, which content is an image, which content is a paragraph etc. This is especially important for accessibility - screen readers get all the useful information out of the HTML structure.

How does the browser render web pages?

The Rendering Engine is responsible for displaying the content from HTML. Let’s examine the following index.html for rendering.

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>How web works</title>
  </head>
  <body>
    <p>Holaa<span>Web Development</span> folks!</p>
  </body>
</html>

Not that pleasing, right?

That's why there's another important technology that is CSS ("Cascading Style Sheets").

CSS is all about adding styling to the website. That is done via "CSS rules"

h1 {
  color: purple;
}

This rule would color all<h1> tags purple. Rules like that can be added inside of the HTML code but typically, they're part of separate .CSS files which are requested separately.

It parse HTML and CSS and creates different model object.

1. The DOM (Document Object Model) is formed from the HTML.

1. The Styles are loaded from CSS into CSSOM(CSS Object Model).

That’s how a website works. HTML code is a programming language that allows a web developer to plan out a web page.

What part JavaScript plays?

Script will run as soon as its <script> tag is encountered as the browser reads the HTML. The page shown earlier will pop up an alert dialog when opened. Including large programs directly in HTML, documents are often impractical. The <script> tag can be given an src attribute to fetch a script file from a URL.

<h1>Sneha Birodkar</h1>
<script src="assets/scripts/script.js"></script>

JavaScript can make your website accessible, or it can become a havoc if used scripts without care. An HTML page is a static one and without JavaScript, it would be static still. JavaScript can make the website more interactive and the user-friendliness of JavaScript helps easy navigation of the website or guide them through walkthroughs. Visual & Animated effects can also be achieved with JavaScript.

Some of the things possible on a web page using JavaScript are:

1. Traversing and Manipulating the DOM with JavaScript
2. Selecting Elements and Adding Events with JavaScript

When you access a website, your computer is using a browser. There are several different kinds of web browsers as Safari, Firefox, and Chrome are probably the most popular.

This is why it’s important to have a current browser. If your browser is too old to understand the code, it doesn’t translate the website properly. This is why new websites can look different or fail to work entirely on old computers.

Server-side

You need server-side programming languages - i.e. languages that don't work in the browser but that can run on a normal computer (a server is in the end just a normal computer).

Examples would be:

• Node.js
• PHP
• Django

Important: Except for PHP, you can also use these programming languages for other purposes than web development.

Whilst Node.js is indeed primarily used for server-side programming (though it's technically not limited to that), Python is also very popular for data science and machine learning.

Browser-side

In the browser, there are exactly three languages/ technologies you need to learn. But whilst the server-side languages were alternatives, these three browser-side languages are all mandatory to know and understand:

• HTML (for the structure)
• CSS (for the styling)
• JavaScript (for dynamic content)

Keep learning and keep building!! Cheers

"From a DEVELOPER to a DEVELOPER."

References:

(developer.mozilla.org/en-US/docs/Learn/Gett..)