4Getting started

Web pages are built using HML and CSS files.

What’s HTML and CSS you ask?

There’s an old joke:

There’s a man flying in a hot air balloon and suddenly he realises he’s lost. Reducing height he spots another man on the ground and shouts “Excuse me Sir, can you tell me where I am?” The man below says: “Yes. You're in a hot air balloon, hovering 30 feet above this corn field”. “You must be an engineer” says the balloonist. “I am” replies the man. “How did you know?" “Well” says the balloonist, “everything you’ve told me is technically correct, but it's of no practical use at all”. The man below replies, “You must be a project manager". “I am” replies the balloonist, “How'd you know?” “Well” says the man, “you don’t know where you are or where you’re going, but you expect me to help. You’re in exactly the same position you were before we met, but somehow now it’s my fault”.

I am that engineer so this is it:^†1

HTML is hypertext mark-up language and CSS is cascading style sheet.

Got that? Good.

†1		And for civil engineers: An indeterminate beam walks into a pub. The landlord asks “what can I get ya?” The beam replies “I just need a moment”. — Ha!

Broadly, HTML is the actual web page; it’s the file that the web browser loads first. The HTML file contains all the content (all the words that are displayed) on the web page.

CSS controls the way the page looks and feels. It determines the fonts used, the colour of objects, the size of text and headings, the page layout of the website, &c.

HTML is a simple programming language with relatively few keywords that is dedicated to organising text, sentences and paragraphs.

HTML is quite forgiving of mistakes and will still show some result even when there are errors in the code. This aspect of HTML makes it quite easy to learn and write and producing a simple web page that only contains a small amount of content and formatting is very easy.

The problem with HTML is it doesn’t scale very well — once bigger or more complicated pages are developed, the styling aspects start to involve multiple keywords in each section; these then get repeated multiple times for each part of the page. What starts out as a simple and easy to learn language becomes messy, convoluted and quite difficult to trace and debug.

CSS was developed to overcome (some of) these difficulties.

It does this by creating custom tags that define a set of properties e.g. the font, text size, line spacing, colour, margin, even the background.

These custom tags can then be used just like a normal HTML keywords; but instead of just changing one aspect, it changes multiple aspects to conform to the tag definition. The end result of all this is that only one tag need be used to achieve a specific look, and that tag can be used over and over again throughout the pages of the website.

Any number of tags can be created and more than one tag can be applied to the same HTML element.

While CSS does make some aspects of the HTML easier to follow, it in itself, has some of the same problems. It will still be necessary to define things multiple times in the CSS (colour and margins being two of my main bugbears). CSS has no concept of variables or constants^†2 that can be defined and then used multiple times. If two different tags specify the same colour value for different properties that colour value (its number) will have to be entered each time.

HTML and CSS are not programming languages like C and Basic; they are more like formatting styles in Word.

I’m going to go through both HTML and CSS (in lots and lots of tedious detail), it is usual to talk about both of them at the same time and as we get going and doing more complicated things, this is exactly what will happen.

To get started though, I’ll look at them individually and I’ll start with the HTML, this is after all exactly were a web browser starts.

†1		There are no variables or constants in CSS; there are however, CSS pre-processors like SASS (I’m not going to tell you what it stands for — it’s just plain embarrassing) and LESS (doesn’t seem to stand for anything) that will accommodate variables and constants — this might be the way to go, but I had enough on my plate just learning CSS.