Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 27, 2022 11:25 pm GMT

How do websites work? Super Simplified Explanation

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:
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:

    CSS 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:

JavaScript Output

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


Original Link: https://dev.to/chandanbsd/how-do-websites-work-super-simplified-explanation-2eha

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To