Would you like to know how the web works?

I knocked this info graphic together as a high level overview of how the web works and more specifically how websites work to give you a big picture idea on how the individual parts of web technology fit together.

So let me take you through the graphic.

Starting at the bottom of the picture we have somebody surfing on their laptop, lets call her Mary.

Household computer sends web page request

When Mary clicks on her Google query to go to a webpage, a request is sent to the world wide web denoted by the globe of the earth.

The web handles this query by having thousands of network routers inter connected using a technology known as DNS.

Basically when Mary sends her query to the web server, these query “packets” know the address (IP number) of her laptop.

In the case of this graphic, Mary’s computer IP address is 42.444.96.82.

The query packets that Mary’s computer sent to the internet also know the IP number (address) of the Web Server that is going to give her back the web page that she requested.

Just like the sorting office for physical mail delivery, you could say that there is a hierarchal system on the internet that forwards the data packets (containing her web query) from one web router to another, until eventually they reach the correct destination.

Web server receives web page request

The final internet router in the web query chain that Mary started off, has found the correct web server at IP 86.555.74.555 (long box labeled “Web Server” above globe on graphic).

The web server (web server software running on an ordinary or souped up PC often in a server farm – loads of computers sitting in racks) now needs to decode the request and process it.

There are two main brands of web server out there, the most ubiquitous probably being Apache (free open source) and I guess it’s main competitor would be Microsoft’s Internet Information Server IIS.

Businessprogrammer.com has a preference for free open source technology when it comes to business computing and internet programming so let’s assume the web server is running apache software.

Mary’s web page query could be requesting a static page or some form of interactive page.

If the page is static then the web server opens the Static Html on it’s file system together with any associated javascript or CSS and sends the page back to Mary’s laptop (green arrow pointing away from web server).

If however the web page is interactive, this could mean that it is a web application or it is answering her questions. Google, Yahoo and Ask.com are the most well know examples of this.

Then the web server has a lot more work to do. So looking at the top half of the graphic, the Apache server is going to make a call to return the HTML to Mary’s laptop.

But since it is interactive the HTML is going to have to be generated “on the fly”, so Apache makes a call to the “Dynamic” section of this graphic (top left box) and calls a “PHP” interactive script (in red in Dynamic box, top left of graphic).

Php is an open source and free web scripting language (program code) that runs on web servers and enables you to build web pages interactively.

In the case of Mary’s web query it will also make a call to the database server (box top right of graphic) in order to get any information required for Mary’s query.

The php script will then assemble the results of the database query together with links to any css and javascript files all glued together within HTML (generated by php) and send this back to the web in order to arrive at Mary’s laptop as the web page that she requested.

That’s It

So there you have it, the info graphic gives you a high level perspective of how all the web parts inter-relate.

In teaching business programming we will go deeper into each of these parts. Now however you have an idea of how everything ties together.