🌍 Lesson F3 – How Websites Work?

🔍 Understanding What Happens When You Open a Website

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand how websites work

✅ Understand the role of the Internet

✅ Understand the role of Web Browsers

✅ Understand Servers and Clients

✅ Understand Domains and Hosting

✅ Explain the complete journey of a website request

✅ Understand HTTP and HTTPS in simple terms

📖 Introduction

Every day we open websites like:

• Google
• YouTube
• Facebook
• Amazon
• College Websites

But have you ever wondered:

🤔 What happens when we type a website address?

🤔 How does the website appear within seconds?

🤔 Where is the website actually stored?

🤔 How does the browser know what to display?

In this lesson, we will understand the complete process in very simple language.

By the end of this lesson, you will know exactly what happens behind the scenes whenever a website is opened.

🌐 What Happens When You Open a Website?

Suppose you open your browser and type:

www.google.com

Within a few seconds, Google’s homepage appears.

This process may look simple, but many things happen in the background.

The complete process involves:

1. User
2. Browser
3. Internet
4. DNS
5. Web Server
6. Website Files

All these components work together.

🏠 Real Life Example

Imagine you want to order food from a restaurant.

The process is:

Step 1

You place an order.

Step 2

Waiter takes your order.

Step 3

Kitchen prepares food.

Step 4

Waiter brings food.

Step 5

You receive food.

Similarly, when opening a website:

Step 1

You request a website.

Step 2

Browser sends request.

Step 3

Server processes request.

Step 4

Server sends website files.

Step 5

Browser displays website.

👨‍💻 Understanding Client and Server

This is one of the most important concepts in web development.

What is a Client?

A client is a device that requests information.

Examples:

• Laptop
• Desktop
• Smartphone
• Tablet

When you open a website, your device becomes a client.

Example

You open:

www.youtube.com

Your laptop sends a request.

Therefore:

👉 Your laptop is the Client.

What is a Server?

A server is a powerful computer that stores website files and sends them when requested.

Servers run 24 hours a day.

Their job is:

• Store websites
• Process requests
• Send data

Example

YouTube stores its website on powerful servers.

When you open YouTube:

The server sends:

• HTML files
• CSS files
• JavaScript files
• Videos
• Images

to your browser.

📦 Client-Server Architecture

The basic communication looks like this:

Client → Request → Server

Server → Response → Client

Example:

Your Browser → Request Google Homepage

Google Server → Sends Google Homepage

This process happens within milliseconds.

🌐 What is the Internet?

The Internet is a global network connecting millions of computers around the world.

It allows devices to communicate and share information.

Without the Internet:

• Websites would not work
• Emails would not work
• Social media would not work

The Internet is like a giant highway connecting computers worldwide.

🌍 What is a Web Browser?

A web browser is software used to access websites.

Examples:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Safari
• Opera

What Does a Browser Do?

A browser:

✅ Sends requests

✅ Receives website files

✅ Reads HTML

✅ Applies CSS

✅ Runs JavaScript

✅ Displays the final website

Example

When HTML is received:

<h1>Welcome</h1>

The browser displays:

Welcome

The browser converts code into a visual webpage.

🏢 Where Are Websites Stored?

Websites are stored on servers.

The process is called:

Web Hosting

What is Web Hosting?

Web hosting is a service that stores website files on servers connected to the internet.

Think of hosting as renting space on a computer that is always online.

Without hosting:

Nobody can access your website.

🏠 Real Life Example

Imagine building a shop.

After building the shop, you need land to place it.

Similarly:

Website = Shop

Hosting = Land

Without hosting, your website cannot exist online.

🌐 What is a Domain Name?

A domain name is the address of a website.

Examples:

google.com

youtube.com

amazon.com

nextgendevhub.com

Why Do We Need Domains?

Every server has an IP Address.

Example:

142.250.183.14

Imagine remembering hundreds of IP addresses.

Very difficult!

Instead we use domain names.

Example:

Instead of:

142.250.183.14

We type:

google.com

Much easier.

📞 Real Life Example

Think of a mobile phone.

Contact Name

Rahul

Actual Number

9876543210

You remember the name, not the number.

Similarly:

Domain Name = Contact Name

IP Address = Phone Number

🔎 What is DNS?

DNS stands for:

Domain Name System

DNS converts domain names into IP addresses.

Example

You type:

google.com

DNS converts it into:

142.250.183.14

Then the browser can find the correct server.

🚀 Complete Journey of Opening a Website

Let’s understand the full process.

Step 1

User types:

www.google.com

into browser.

Step 2

Browser asks DNS:

Where is Google?

Step 3

DNS provides IP Address.

Step 4

Browser contacts Google’s server.

Step 5

Server receives request.

Step 6

Server sends website files.

Files include:

• HTML
• CSS
• JavaScript
• Images

Step 7

Browser receives files.

Step 8

Browser displays the website.

📄 Understanding HTML, CSS and JavaScript in Website Loading

Imagine building a house.

HTML

Creates structure.

Example:

• Walls
• Rooms
• Doors

CSS

Provides beauty.

Example:

• Paint
• Decoration
• Furniture

JavaScript

Provides functionality.

Example:

• Automatic Doors
• Smart Lights
• Security Systems

When a website loads:

Browser receives all three.

Then combines them to create the final webpage.

🔒 What is HTTP?

HTTP stands for:

HyperText Transfer Protocol

It is the communication method used between browsers and servers.

Example:

Browser requests:

GET Homepage

Server responds:

Homepage Sent

This communication uses HTTP.

🔐 What is HTTPS?

HTTPS stands for:

HyperText Transfer Protocol Secure

It is the secure version of HTTP.

Why HTTPS Is Important?

HTTPS protects:

• Passwords
• Personal Information
• Banking Details
• Payment Information

Example

Secure Website:

https://www.google.com

Not Secure:

http://example.com

Most modern websites use HTTPS.

💡 Real World Example

Suppose you visit an online shopping website.

Process:

1. Browser requests website
2. Server sends website files
3. Browser displays products
4. You add product to cart
5. Browser sends order request
6. Server processes order
7. Confirmation appears

Everything works through client-server communication.

📝 Practical Activity

Open Chrome Browser.

Visit:

1. Google
2. YouTube
3. Amazon

Observe:

• Website Address
• HTTPS Symbol
• Domain Name

Write observations in your notebook.

📋 Assignment

Assignment F3

Answer the following:

1. What is a client?
2. What is a server?
3. What is web hosting?
4. What is a domain name?
5. What is DNS?
6. What is the difference between HTTP and HTTPS?
7. Explain how a website loads in your browser.

🧠 Quiz

Q1. Which device requests website data?

A. Server

B. Client

C. Router

D. Database

✅ Answer: B

Q2. What stores website files?

A. Browser

B. Client

C. Server

D. Keyboard

✅ Answer: C

Q3. What does DNS do?

A. Styles websites

B. Creates websites

C. Converts domain names into IP addresses

D. Stores images

✅ Answer: C

Q4. Which is more secure?

A. HTTP

B. HTTPS

✅ Answer: B

Q5. What is Google Chrome?

A. Server

B. Browser

C. Hosting

D. Domain

✅ Answer: B

📌 Lesson Summary

✅ A website is stored on a web server.

✅ Users access websites through browsers.

✅ The device requesting data is called a client.

✅ The computer providing data is called a server.

✅ Domains make websites easy to remember.

✅ DNS converts domains into IP addresses.

✅ Hosting stores website files online.

✅ HTTP and HTTPS are communication protocols.

✅ HTTPS provides secure communication.

✅ Every website works using the client-server model.