Understanding the Basics of How the Web Works

Welcome to learning about how the exciting world of the internet works!

Have you ever wondered how you can open your browser and visit any website in just a few clicks?

Let's take a magical journey and learn about how the web works in simple words.

In this article, we'll discuss the following:

• Client-server model

• The HTTP protocol

• Domain Name Server (DNS)

• How browsers show web pages.

  By the end of this article, you'll know all these cool concepts and have a proper basic understanding of what happens behind the scenes when you browse the internet.

Client-Server Architecture

Let's start with the client-server model.

Imagine you want to read a book from the library. You (the client) go to the library and ask the librarian (the server) for the book. The librarian finds the book and gives it to you.

The internet works similarly!

What is a Client?

• Client: This is your computer, tablet, or phone. When you type a website's address and hit 'enter', your device is acting as the client. It asks for the web page you want to see.

• Example: When you use your tablet to open www.example.com, your tablet is the client.

Clients can be anything that connects to the internet and asks for information. It could be your phone when you check Instagram, your computer when you watch YouTube, or even your smart TV when you stream a movie.

What is a Server?

• Server: This is a powerful computer that stores websites. It listens to requests from clients and sends back the web pages. Servers are like big libraries full of books (websites) that clients can ask to read.

• Example: When you visit www.example.com, the server stores all the information for that website. It sends the information back to your tablet.

Servers are often located in data centers, which are large buildings with many servers inside. These servers work 24/7 to make sure websites are always available when you want to visit them.

How Clients and Servers Communicate

When a client wants to visit a website, it sends a request to the server. The server gets the request, finds the right web page, and sends it back to the client. This is like you asking the librarian for a book, and the librarian giving you the book.

The communication between clients and servers happens using a special language called the HTTP protocol.

Let's learn more about this!

HTTP Request-Response Cycle

HTTP stands for HyperText Transfer Protocol. It's a set of rules that tells how messages should be sent on the internet. Think of it as the rules for how to play a game.

Everyone needs to follow the same rules to make the game work.

Right?

Exactly! When you type in a website address and hit enter, your device sends an HTTP request to the server. Think of this as saying, "Please send me the web page for www.example.com."

• Parts of an HTTP Request:

  • Uniform Resource Locator (URL): This is the web address you typed in, like www.example.com.

  • Method: This tells the server what you want to do. The most common method is GET, which means "get me the web page."

  • Headers: These are extra pieces of information sent with the request, like your language or the type of device you are using.

    When an HTTP Request is made, the server generates an HTTP Response.

What is an HTTP Response?

• HTTP Response: The server gets your request, finds the right web page, and sends it back to you. It's like the librarian finding the book and giving it to you.

• Parts of an HTTP Response:

  • Status Code: This tells you if the request was successful. A common status code is 200, which means "OK, here is the web page." Another common one is 404, which means "Not Found" (the server couldn't find the page you asked for).

    I bet you've seen something like this on your browser before.

  • Headers: These are extra pieces of information sent with the response, like the type of web page or how long it took to find it.

  • Body: This is the actual web page you asked for, written in a language called HTML.

DNS Resolution

Now, you might wonder, how does your computer know where to find the server? This is where DNS, or Domain Name System, comes in.

Imagine you want to call a friend, but you only know their name, not their phone number. You look up their name in a phone book to find their number. DNS works like this phone book but for websites.

In this context, this phone book is called a DNS Server.

What is a DNS Server?

• DNS Server: When you type a website address (like www.example.com), your computer asks a DNS server to find the matching IP address (like 123.456.789.0). An IP address is like a phone number for websites.

• Example: When you type www.example.com, your computer sends a request to the DNS server. The DNS server looks up the IP address and sends it back to your computer.

What is an IP Address?

• IP Address: This is a unique number that every device connected to the internet has. It's like a phone number for websites. Without IP addresses, computers wouldn't know where to find each other on the internet.

• Example: The IP address for www.example.com might be something like 123.456.789.0.

How DNS Resolution Works

1. Type the Website Address: You type www.example.com in your browser and hit enter.

2. Ask the DNS Server: Your computer sends a request to the DNS server, asking for the IP address of www.example.com.

3. Find the IP Address: The DNS server looks up the IP address for www.example.com.

4. Send the IP Address Back: The DNS server sends the IP address back to your computer.

5. Connect to the Server: Now that your computer knows the IP address, it can send an HTTP request to the server and ask for the web page.

Browser Rendering Process

Finally, let's talk about how the web page you asked for shows up on your screen. This happens in your web browser, like Chrome, Firefox, Safari, or any other browser you use.

Browsers render web pages on your computer using HTML.

What is HTML?

• HTML: The server sends the web page to your browser in a language called HTML (HyperText Markup Language). It's a bit like a recipe that tells your browser what the web page should look like.

• Example: HTML tells your browser to put a big heading at the top, a picture in the middle, and some text at the bottom.

HTML uses special tags to organize the web page. For example, the <h1> tag is for big headings and the <p> tag is for paragraphs of text.

While HTML determines the content of the web page, the styling and organization of the web page on your browser is done using CSS.

What is CSS?

• CSS: Sometimes, the server also sends CSS (Cascading Style Sheets) files. These are like the decorations and colors for your web page.

• Example: CSS tells your browser to make the heading blue, the text bold, and the background yellow.

CSS makes web pages look nice and pretty. It can change the colors, fonts, and layout of the page.

In addition to CSS and HTML, the functionality of the web pages displayed on your browser is made possible with JavaScript.

What is JavaScript?

• JavaScript: These are like the instructions for how your web page should behave. For example, JavaScript makes buttons clickable. The server might also send JavaScript files.

• Example: JavaScript can make a button pop up a message when you click it, or it can change the text on the page without reloading it.

JavaScript makes web pages interactive and fun to use. It can create animations, handle user input, and much more.

So Here's How Browser Rendering Works...

1. Get the Web Page: Your browser gets the web page from the server as an HTTP response.

2. Read the HTML: Your browser reads the HTML file and starts to build the structure of the web page.

3. Apply the CSS: Your browser reads the CSS file and applies the styles to make the page look nice.

4. Run the JavaScript: Your browser reads the JavaScript file and runs the scripts to make the page interactive.

5. Display the Page: Your browser puts everything together and displays the final web page on your screen.

Putting It All Together

Let's review the steps from start to finish:

1. Type the Website Address: You type www.example.com in your browser and hit enter.

2. DNS Resolution: Your computer asks the DNS server (phonebook) for the IP address (location) of www.example.com.

3. Send HTTP Request: Your computer sends an HTTP request to the server at that IP address.

4. Server Response: The server finds the web page and sends it back to your computer as an HTTP response.

5. Render Web Page: Your browser reads the HTML, CSS, and JavaScript files and shows you the web page.

And that's how the magic of the web works!

Now, when you visit a website, you know all the steps happening behind the scenes. Let's dive a bit deeper into each step to understand the magic.

More About Clients and Servers

Clients and servers are like pen pals sending letters to each other.

The client sends a letter (HTTP request) asking for information, and the server sends a letter back (HTTP response) with the information.

Different Types of Servers

There are many types of servers on the internet, each with a different job.

Here are a few examples:

• Web Servers: These store websites and send web pages to clients. Examples are Apache and Nginx.

• Email Servers: These send and receive emails. Examples are Gmail and Outlook.

• File Servers: These store files and let clients download or upload files. Examples are Google Drive and Dropbox.

Different Types of Clients

Just like there are many types of servers, there are also many types of clients.

Here are a few examples:

• Web Browsers

: These let you visit websites. Examples are Chrome, Firefox, and Safari.

• Email Clients: These let you send and receive emails. Examples are Gmail and Outlook.

• File Transfer Clients: These let you download and upload files. Examples are FileZilla and Google Drive.

More About HTTP

HTTP is like a language that clients and servers use to talk to each other. It's simple and easy to understand, which makes it perfect for sending web pages.

HTTP Methods

We mentioned the GET method earlier, but there are a few more HTTP methods that are important:

• GET: This method asks the server to send a web page. It's like saying, "Give me the web page."

• POST: This method sends data to the server. It's like saying, "Here is some information for you."

• PUT: This method updates a web page on the server. It's like saying, "Update the web page with this new information."

• DELETE: This method deletes a web page on the server. It's like saying, "Delete the web page."

Each method has a different job, and the server knows what to do based on the method used.

HTTP Status Codes

We mentioned the 200 and 404 status codes earlier, but there are many more.

Here are a few examples:

• 200 OK: The request was successful, and the server is sending the web page.

• 301 Moved Permanently: The web page has moved to a new address.

• 403 Forbidden: The server understands the request, but it won't allow it.

• 500 Internal Server Error: Something went wrong on the server.

These status codes help clients understand what happened with their request.

More About DNS

As stated earlier, DNS is like a giant phone book for the internet.

It helps clients find the IP address of a server.

How DNS Servers Work Together

There isn't just one DNS server.

Many DNS servers work together to find the right IP address.

Here's how they do it:

1. Root DNS Servers: These are the top-level DNS servers. They know where to find the main DNS servers for all the top-level domains (like .com, .org, .net).

2. Top-Level Domain (TLD) DNS Servers: These DNS servers know where to find the DNS servers for specific domains (like example.com).

3. Authoritative DNS Servers: These DNS servers have the actual IP addresses for the domain names. They are the final step in finding the IP address.

When you type a website address, your computer might have to talk to several DNS servers before it finds the right IP address.

More About Browser Rendering

Rendering a web page is like putting together a puzzle. Your browser takes all the pieces (HTML, CSS, and JavaScript) and puts them together to show you the web page.

Steps in Rendering

1. Parse HTML: Your browser reads the HTML file and starts to build a structure called the DOM (Document Object Model). The DOM is like a tree that shows all the elements on the web page.

2. Parse CSS: Your browser reads the CSS file and applies the styles to the elements in the DOM.

3. Execute JavaScript: Your browser reads the JavaScript file and runs the scripts to make the page interactive.

4. Layout: Your browser calculates where all the elements should go on the screen.

5. Painting: Your browser paints the elements on the screen, making them visible to you.

Conclusion

That's how the web works! From typing a website address to seeing the web page on your screen, many steps happen behind the scenes.

Now you know about the client-server model, the HTTP protocol, DNS, and how browsers render web pages.

When you visit a website next time, remember all the magic happening behind the scenes and appreciate yourself for being in a career line of professionals who make all of these possible.

Happy browsing!