To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the user of functional cookies. For more information read this page.

How websites are created

Building a website

Websites are created using a variety of technologies. This tutorial will not be a tutorial on using these technologies, but will discuss them in very basic detail.

There are many different technologies that make up a website and whilst design is all about just two or three of these, it's worth noting that a lot more happens in the background.

First of all, there are two types of web development:

  • Front-end development
  • Back-end development

Front-end development is where design is most important.

HTML

HTML or Hyper Text Markup Language is the language of the web.

HTML provides the client browser with all the code and content it needs to generate a webpage for the user. It was developed by the British computer scientist Sir Tim Berners Lee to develop a rich documenting system with links between documents.

HTML gained popularity when the iPhone launched and since then a huge number of websites have been created. HTML is not a design language, but as the basis of which the design language stems, it is important to know how it works.

HTML5 is the latest standard and it changed the way HTML works by adding many new features and removing older ones that were underused.

To learn more about HTML, take a look at this tutorial.

CSS

CSS or Cascading StyleSheets is the language of design on the web. It's main focus is to move all of the design side of the web to a seperate file and keep HTML as the language for content.

Before the shift to a seperate design language with CSS, HTML was similar to the following code sample:

HTML
<body bgcolor="green" width="40" border="1">
		

CSS defines a collection of rules that are applied to HTML to make it more attractive. An example of some CSS is shown below:

CSS
.padded{
	padding: 10px;
	padding: 10px 5px;
}

Without CSS, HTML introduces repetition - something that programmers try to avoid in general. Another benefit of splitting the design into the CSS (and HTML) file is that it follows the Model-View-Controller pattern and separates content, design and functionality.

It is outwith the scope of this article to discuss CSS in detail and there is more in the CSS tutorial on this site.

JavaScript

The third and final cornerstone of web technologies is JavaScript.

JavaScript focuses on interaction to make pages more functional. This again follows the Model-View-Controller pattern by making the controller section separate from the others. JavaScript (and HTML) is the controller.

JavaScript means that the website can have dynamic and interactive features such as buttons that open alert boxes, change text and so on. Some sample JavaScript is shown below:

JavaScript
var e = document.getElementById('sample_box');
e.style.backgroundColor = 'green';
e.style.color = 'orange';

The JavaScript tutorial on this website can be found here.