Rendering a website works by combining server side technologies with client side technologies. The “client side” being a web user looking at web pages within their web browser and “server side” being the computer(s) they interact with when viewing a website. Understanding this setup is important when looking to develop a website.
The relationship between the two looks a little bit like this (Each circle being a web technology):
It is the web server’s job to give the web browser the relevant HTML, CSS and JavaScript code that it needs in order to display an interactive web page. It is the web browsers job to interpret these languages in order to display a web page properly.
Each one of these has a role:
PHP
This is the brains of the server. It is the programming code that decides what a web page looks like. It can take information that the web browser passes to it in order to return different information. For example if you went to the web page: www.google.com/search?q=test this is telling the web browser that q=test, i.e. search for the word test. The PHP code can do all sorts of things from maths, to processing images, through to communicating with other servers and processes.
MySQL
A content managed website or web application simply would not be able to function without a location to store and retrieve data. MySQL is the server’s memory/data repository (The database). It is a store of data within various tables that can be retrieved using a language called SQL (Structured query language).
Apache
Apache is the server program that listens for communications from the web browser via the internet and tells PHP what they are. Think of it as a shop window where the store assistant takes money/instructions and gives products out.
Server Modules
These are server plugins that allow PHP to do more. For example you can get modules that process images in a more advanced way, or ones that allow for SMS messaging via the server.
HTML
This is the data behind a web page and early websites were nothing but HTML. It is essentially a selection of tags that tell the web browser some information about what a page contains. For example img tags represent an image, and
tags represent a heading. There are lots of tags in existence which can be useful to display different information.
There are lots of questions about what is HTML5. This is a new version of HTML that extends the amount of tags that exist. For example it introduces a tag that can be used by developers to draw information onto. This may seem great but because how HTML renders is managed by the web browser, clients must keep it up to date in order to be able to use the latest web languages. This is why adoption of HTML5 hasn’t been as fast and as widespread just yet (Though this will improve with time).
CSS
This is a language that tells the web browser how to style the html code. For example “h1 color:red;” would tell the web browser that all headings need to be coloured in red. This is a very powerful tool and there are a lot of different ways that CSS styles can be used to render stunning websites.
JavaScript/jQuery
This is a client side programming language that can dynamically use the HTML data to do “something” without (in most cases) needing to ask the server for more information. Most interactive elements of websites these days are driven using JavaScript, the most common example that you will see all over the place are image rotators/galleries.
jQuery is a JavaScript development framework. It essentially allows you to write less JavaScript code to achieve the same levels of functionality. Because it has been thoroughly tested, it also improves the performance and compatibility of this JavaScript code in older web browsers.
More Detail?
It is important in the web game that you are fully up to speed with the latest technologies and how they fit together. A trending topic at the moment is that of Social Media Marketing and how it can be leaveraged alongside various other web technologies. If you are interested in web technologies then you may also be interested in our paper about social media:
