Now that we have seen how web pages get from the server to the browser, we should turn to how they are actually made. That is what we're going to be spending most of the course learning about.
Web pages are constructed using three main technologies, each of which plays a different role in the creation of the pages.
First is HTML, the HyperText Markup Language. HTML is used to describe the content of pages and its usually what people are talking about when they mention “a web page”. In HTML, we will express things like “this is a paragraph” or “this is an important word”. We aren't concerned in HTML how those things look. We will cover the basics of HTML further in the unit Markup and HTML.
Since HTML describes only the content itself, we need some other tool to make it look a certain way: that is CSS, Cascading Style Sheets. We can use CSS to suggest appearances for the pieces of content we have created in HTML. For example, we can express ideas like “all paragraphs should have this font size” with CSS. We will introduce CSS in the unit Stylesheets.
With HTML and CSS we can make simple web pages, but they don't do anything. In order to control the behaviour of our pages, we need a third technology: JavaScript. JavaScript is a programming language that is embedded in web browsers. It can be used to insert logic and behaviour into web pages. We will start working with it in the unit JavaScript Introduction.
These three technologies form the basis of what we know as “web pages”, and the basis for this course.
Why separate Content, Appearance, and Behaviour?
At this point, it might not be obvious why we need three different pieces of technology to create web pages. Hopefully, the distinct uses of these three things will become obvious as the course goes on. But for now, we can at least introduce the broad motivation.
Maybe the best reason for separating the three concepts is efficiency: with all of our appearance information in one CSS file, it only has to be loaded by the web browser once, even if the user views many pages on our site. Since there is less to be downloaded, the pages on our site will load faster. The same thing will happen with out JavaScript: it will be in a separate file, and can be downloaded once, even if it is used on every page on our site.
Similarly, when we are creating web sites, we can specify all of the content by itself in HTML. Then we can then worry about appearance and behaviour once in CSS and JavaScript: this information doesn't have to be included separately on each page (or even worse, we could have to specify the appearance of a paragraph on each and every paragraph on the site).
We will also end up with web sites that are easier to maintain. For example, if there is a problem with the appearance, you know to look in the CSS file. And if you fix the problem once, it should apply to your entire site since all of the pages will use the same stylesheet. On a larger project, you can have different people working on different aspects of the site: an author working with the HTML, a designer working on the CSS, and a programmer creating the JavaScript.
As we actually start working with these technologies, you will hopefully convince yourself that these things are true, and that there are other reasons to keep these concepts separate.