๐ How Websites Work
We now know that a browser communicates with a server through the Internet.
But what actually makes a website appear on your screen?
Let's understand that step by step.
1๏ธโฃ A Website Is Made of Files
At its simplest, a website can be made from different types of files.
The three most important ones we'll learn first are:
HTML โ Structure
CSS โ Design
JavaScript โ Behaviour
Think of a house:
๐งฑ HTML = Structure of the house
๐จ CSS = Paint and decoration
โ๏ธ JavaScript = Things that make it interactive
For example, a button might look like this:
HTML
โ
Creates the button
CSS
โ
Makes the button look good
JavaScript
โ
Makes the button do something when clicked
2๏ธโฃ What Happens When You Open a Website?
Suppose you visit:
www.example.com
Your browser needs to get the resources required to display the website.
A simplified process looks like this:
You
โ
Browser
โ
Internet
โ
Web Server
โ
Website Files
โ
Browser
โ
Webpage
The browser receives the files and processes them.
3๏ธโฃ The Browser Is Very Important
A web browser is software that understands and displays web content.
Examples include:
Google Chrome
Microsoft Edge
Mozilla Firefox
Safari
When the browser receives HTML, it understands the structure.
For example:
<h1>Hello World</h1>
<p>Welcome to my website.</p>
The browser interprets this and displays:
Hello World
Welcome to my website.
You don't see the HTML code itselfโyou see the result of the browser interpreting it.
4๏ธโฃ HTML Gives the Website Structure
HTML tells the browser what things are.
For example:
<h1>My Store</h1>
<p>Welcome to my online store.</p>
<button>Buy Now</button>
The browser understands:
h1 โ Heading
p โ Paragraph
button โ Button
HTML doesn't primarily decide how beautiful these elements look.
That's where CSS comes in.
5๏ธโฃ CSS Controls Appearance
CSS tells the browser how things should look.
For example:
button {
background: blue;
color: white;
}