How the internet works...

So how are web pages made and what technologies are involved in the process? Well...

Front End ('Client Side' - or, 'what you can see'). These 3 technologies make up the 3 layer model:

1. HTML (Content) - what's actually there on the page.
2. CSS (Presentational) - how it looks...
3. Javascript (Behaviour) - what it does when you interact with it.

Back End ('Server Side'). These technologies arrange the package of the above technologies that you receive when you make an http request (when you put a web address into the browser and press return, or click on a link...). They most often comprise of two parts:

1. A back-end language, such as PHP, ASP C#.net, etc.
2. A database language, such as MySQL, MSSQL, PostgreSQL, etc

You'll often find that people in the business will try and tell you that something is front or back end in nature. Let me give you a guiding principle to help you:

The client side is there to present a ready made product - it's a self-contained document with no interaction with the realities of the outside world. As soon as any concerns outside the scope of the document (or the pre-formatted data sent with it) are brought up (such as 'who is this user?', 'what addresses are available?' and many other logical queries), the process is then handled server side.

I'd like to give you an analogy that'll help you understand the basic technologies that make up web development and how they interact with each other...

Imagine you're setting up a restaurant. You'll need a few things:

1. A table and chairs
2. Cutlery and crockery
3. Menus
4. A waiter (or server)
5. A kitchen
6. A chef
7. Ingredients.

The front end of the restaurant, the dining area, is where the customer interacts with the restaurant. In the analogy this represents your user interacting with the technology of the internet by using their browser (Firefox, Chrome, Internet Explorer, etc).

HTML says: get your dining area and in it put a table, cutlery, crockery, etc.

<dining room>

  <table>

    <fork />

    <plate />

    <spoon />

    <knife />

  </table>

</dining room>

CSS says: Put the table in this position, put the chairs around it, facing inwards, in these positions. Put a plate in front of each chair and put a knife to the right of the plate facing way from the chair, a fork to the left and a spoon above facing right.

dining room {

 width: 10m;

 length: 6m;

}

table {

  margin: 1m; /* must be a 1 metre gap around the table to allow people to sit down. */

  position: relative; /* all further objects are positioned relative to the table */

}

chair {

  facing: table;

}

plate {

  position: in front of chair (on the table, because all further objects are positioned relative to the table);

  position: relative; /* all further objects are now positioned relative to the plate */

}

knife {

  facing: same way as chair;

  position: right (of plate);

}

etc, etc...

Javascript says: 

function eating (knife, fork, plate, food, mouthPosition){

  this.useFork (food){

    food.stab();

    food.holdStill();

  }

  

  this.useKnife (knife, plate, food){
      knife.placeKnifeOnFood();

      while (knife !== touching plate){

        knife.drawForwards();

        knife.drawBackwards();

      }

  }

  this.putFoodInMouth (mouthPosition){

    food.position = mouthPosition;

  }

 useFork (food);

 useKnife (knife, plate, food);

 putFoodInMouth (mouthPosition);

}

Not entirely accurate code-wise, but good enough to give you an idea of how the 'client-side' technologies work. Client side technologies are the technologies that your browser uses to display the web pages it is sent by the server; the 'back end'...

If we think of the interaction between the waiter (server) and the customer (client): The client makes an initial request to the server to come into the restaurant and be seated and see what's on the menu. That's like the http (hyper text transfer protocol) request when you first request a web page and it is amassed by the server and sent to you. You can then make further requests to your server, such as 'can I have the soup', etc. and, depending on who you are the server will give you what you have requested. For example, a small child may request a beer, but the server will recognise that the child is too young and deny the request. In the real world someone may request to post on a thread, but may not be allowed because they are not logged into the site, etc.

Server-side languages often communicate with databases (using a database language). Databases are effectively tables of information. The tables link data in meaning by putting them in rows:

Name                     Suitable for Children

Beer                        No

Orange juice          Yes.

In our restaurant example, the client will ask the server for something extra beyond the original setup, such as asking for the soup. The waiter then goes to the kitchen and asks the cook to prepare soup. Think of the cook as the database language - bringing resources together to give bring a product. The waiter then returns the result of the cooks efforts and gives it to the client.

In short, that's how the internet works. As you'd expect this is a simplistic view - for example, technologies like Ajax (Asynchronous Javascript and XML) allow the client-side to make request to the server-side from within the document (rather than request a whole new document), but essentially the above holds true in the majority of cases. In the next few chapters I'll go into each technology separately and show you how to use and how not to use.