The Anatomy Of A Website

Hayden Smith deconstructs the typical webpage…

Chances are that if you’re reading this that you have a website. Whether you put it together yourself, used a site builder, a one-click installer, or got someone else to do it for you then a website will consist of the same core building blocks.
Lets look deeper at the subject and see what a website is made of…
HyperText Markup Language, or HTML is the foundation of the World Wide Web. Initially created by Tim Berners-Lee at the end of the 1980s, it was devised as a way of displaying content and linking between documents using markup tags. These tags generally sit between a less-than (<) and greater-than symbol (>) with an opening tag and a closing tag describing an effect upon the text between them. For example…
<b>These tags make this text bold</b>
Over time HTML has been expanded to include more tags to give more control; it now describes both the layout and style of the website. But by the time of HTML 5, HTML is used less to describe layout and style. However, to break the content of the page into blocks you can still write a web page purely in HTML and have something presentable.
Cascading Style Sheets, or CSS, were designed to enable the separation of layout and style of a web page from the content (the HTML). CSS could be inline in the HTML document or as a separate CSS document that is linked to from the HTML document.
The implementation of CSS meant that the tags used in the HTML files could be simplified greatly with the CSS telling the browser how everything should look. Most modern websites are made using this distinction with the HTML files containing the content and the tags for the blocks of text and the CSS file defining how those blocks will look, where on the page they will appear, and whether they should even appear.
CSS is capable of displaying things differently whether it appears on screen, is printed or is read by a screen reader. It can also be used to change the layout of a page dependent on screen size, This capability is now called responsive web design.
Client side scripts can be in a number of formats, though javascript is probably the most common. These are used to create interactive elements on a web page without the page having to be reloaded every time. The concept of having scripts running on the client’s computer like this was referred to as Dynamic HTML.
These scripts are able to manipulate both the HTML content and change the style of the website in response to actions on the page. There are some issues with the use of client side scripts as it requires that the client’s web browser support the language it is written in and hasn’t been disabled by the client for security purposes.
Server side scripts are normally used to create the HTML content for a site. While historically, websites consisted of static HTML files, which meant that the content of the file only changed when edited manually, the use of server side scripts meant that the content of the website could change dependant on a number of input variables.
A large number of languages can be used for server side scripting of websites, php, asp/asp.net and perl are probably the most common ones. Unlike client side scripts, which rely on support on the client’s browser to work properly, server side scripts are run on the server so every client will get the same output. The only requirement is that the server to run the site has the relevant scripting language installed. Server side scripts often make extensive use of databases to process and retrieve content before creating the HTML output that the client sees in their browser.
Databases are usually used to hold the data required for the pages. Posts for a forum, entries for a blog, pages for a wiki, and comments on a news article are examples of things that would be stored in a database. For many of today’s modern website software packages, almost all of the data posted to or about the site will be stored in a database with server side scripts interfacing with the database to retrieve the information. MySQL and PostgreSQL are two of the most common databases used online for websites.
Asynchronous Javascript and XML, or AJAX, is a name for a technology that involves using javascript to communicate with the server to fetch information in the form of XML documents that can then be read through client side scripts to update the HTML. This reduces page reloads and allows for tricks such as loading more content to a page as the user scrolls down rather than loading a giant page of content at the start.
As you can see there’s an awful lot of technologies that come together to make a modern website, and it’s a credit to the developers of the many blog, forum and content management systems out there that they can make it so simple for someone to put a site online using these technologies.
All websites need powerful servers to run on, visit the VPS.NET website to find out more.