How do websites work? Super Simplified Explanation

#tutorial #css #html #javascript

Internet and Web Addresses:

To access a website on the world wide web, we use IP addresses
Each Website has an associated IP address (This is similar to our home address)
When we enter the IP addresses (we actually enter web address like www.google.com which the browser converts into IP address) on a web browser, the web browser makes a query to the webserver (A computer that handles user requests and provides responses) and then downloads three files: an HTML file, a CSS file, and a javascript file.
The web browser then takes these three files to show us the webpage

What is the HTML file?

The HTML file is similar to the “stone bricks.” we use to build our house.
i.e., Its only purpose is to define the structure of the webpage

For Example:

<HTML>
    <HEAD>
        <TITLE> My Personal Website </TITLE>
    <HEAD>
    <BODY>
            Hello World, My name is Chandan.
    <BODY>
</HTML>

Output:

Explanation:

In the above HTML snippet, we can see that the HTML tags provide a structure that identifies the webpage. In this case,
<TITLE> My Personal Website </TITLE>
This line ensures that the title of our website is called “My Personal Website"
<BODY> Hello World, My name is Chandan </BODY>
This line ensures that the content or body of our website displays the line “Hello World, My name is Chandan”

What is the CSS file?

The CSS tells the web browser how to present our HTML elements.
i.e., it is similar to a hairstylist who gives shape, length, and color to our hair
For Example:
```
body{
    color: lightgreen;
    background-color: grey;
    text-align: center
}
```
OUTPUT:

The above example shows that HTML tells the web browser “WHAT” to display, and CSS tells the web browser “HOW” to show.

What is a JavaScript file?

JS files provide the functionality or “actions” of a webpage.
Without JavaScript, we can only display some content beautifully using HTML and CSS.
But to provide some functionality, we need to use JavaScript.

For Example:

let entireDocumentVariable = document.querySelector("html");

entireDocumentVariable.addEventListener("click", () => alert("Hello, Welcome to my website"));

Result:

Explanation:

Using javascript, we have written a functionality where a user clicks on any area inside the web page, and he is greeted with an alert saying, "Hello, Welcome to my website."

Source Code: https://codepen.io/chandanbsd/pen/WNMdBZm