Web Anatomy: The Skeleton of a Website

As you may know, any website is more than just what you see. Every page on the web is a puzzle in and of itself, put together into a working piece. But how many pieces does a website have?

Front End

The Front End of a website is the part that the user sees and interacts with. The Front end is itself another puzzle, a conglomerate of Content, User Interaction, and Layout:

  • Content: This is the actual information on the page. Examples are text posts, videos, and images. 
  • User Interaction: This is where you, the user, come in. Examples are clicking on links or videos.
  • Layout: Describes how all of a pages content is displayed for the user to interact with.

Back End

The Back End is a lot more complex than the Front End. The Back End is where all the magic of a website happens. It is where all your assets and data are stored, as well as processed. The Back End is also an amalgam of 3 major pieces, the Database, Application, and Server.

  • Database: This is where all of your content from the front end is actually stored and saved.
  • Server: The server takes input from the app and interacts with the database. It’s essentially a private computer for the database.
  • Application: The web app processes the user interactions from the front end, asks the server for the necessary content from the database, and then arranges the new content according to the front end’s layout.

What does that all mean?

To put all that into perspective, lets say you have a vacation coming up and you want to book a flight for the weekend. You open up your browser and pull up your airline's page. The decorative images scattering the page are examples of the content, as are the links nicely laid out in a menu across the top, showing the layout. You click a link, wanting to check flight times, and provide the user interaction. The application then takes your input, interacts with the server to get all the necessary flight times from the database, and the arranges all the content neatly according to the layout, and then takes you to a new page within the website to display that information.

Is That All?

Not even close! Each of these pieces can be broken down even further, down into programming and code. There is an entire other level of programming and scripting languages backing the server, database, and application, as well as the content, layout, and user interaction. Now that you know the skeleton, you can look to learn how it all works. Click the links below for more information.

More Info

Knowledge Jam – Backend Languages

Wikipedia – Front and back ends

Fedora