Building a website
Websites are created using a variety of technologies. This course will not be a course 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 course.
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:
<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:
.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 out with the scope of this article to discuss CSS in detail and there is more in the CSS course 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:
var e = document.getElementById('sample_box'); e.style.backgroundColor = 'green'; e.style.color = 'orange';
The JavaScript course on this website can be found here.
