The last time we looked at how a web page is a tree (at least in my head) but that tree isn't made up of wood. In a web page the tree is made up of words.
The words are in a form that a browser knows how to deal with in terms of what should be appear on the page, that form is HTML.
I've written an awful lot about HTML in the past as part of my dissertion but at it's simplest it's a word wrapped in angle brackets ("<" and ">"). When the browser sees angle brackets it knows it's got to take special notice, perks up it's ears and does what we (as the authors of the HTML) say.
The browser is a forgiving thing though so it does it's best to try and do what we say when we give it odd instructions... but we really shouldn't confuse it if we can help it!
HTML was created by Tim Berners-Lee - you might remember him from the opening ceremony of the 2012 London Olympics - he's pretty cool and one of my heroes!
From what I understand he was working at CERN and wanted a way of transmitting his scientific findings to other scientists in the early days of the internet. He looked at a technology called SGML which was used as a language for sharing big projects and was meant to be read by computers. He took the bits he needed from SGML and created HTML and the rest is history.
In order for a browser to understand what we want it to do we have to tell it that we're going to be giving it some HTML, we do this by adding a document type declaration (a DOCTYPE) on the first line of any web page we give it. This used to be a somewhat complicated thing as there were any number of types of HTML. We're presently working with HTML5 which has cleared up a lot of confusion and makes writing HTML a lot less hard. HTML5s DOCTYPE is easy: <!DOCTYPE html>. See, it was so important it needed an exclamation point at the beginning!
Seeing as we've just told the browser that we're going to be giving it HTML it seems a little odd to then start the next line of a file with <html> but we really should as otherwise we'ed have no trunk (that tree gets everywhere). Going back to the picture we looked at before of the really rather cool tattoo can you guess what goes next?
That's right, we're going to be putting <head> next. Before we close the head and start on the body we really should tell the browser what language we're going to be using <meta charset="utf-8" />. This allows the browser to know what character set (charset) to use. There's another interesting thing about that charset declaration though, did you notice the "/"? That tells the browser that that tag (or element if you'd prefer) doesn't contain anything else. It doesn't look in vain for the ending of that particular branch as we've told it that that's it. This leads to my next question: how do we close the head?
If you've never seen HTML it's probably an unfair question so I'll tell you: we close the head with </head>.
Another thing that a head should have is a title, we put the title within the head like this: <title>My Title</title>. Easy ehh?
Now you've got a pretty good idea after what goes after the head haven't you? That's right we'll put everything we want to be displayed within the body. That's our two main branches taken care of. But we really need to remember to close the trunk. I'm almost certain you know how to do that now. That's right, we'll close the trunk with </html>.
If you've followed on with this we know that at it's most basic a web page looks like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Title</title> </head> <body> </body> </html>
Wow, that's a lot of work just to get to an empty page. But if a web page is a tree then this is a tree in winter when all the leaves have fallen (and a fair few branches apart from the main two). Write this in a text editor of your choice and save it as index.html and you'll be able to see it in all it's stark beauty - and it really is beautiful! You've just written something that a machine can understand! Clever old you!
Just to check run it through something that understands HTML. Go to the W3Cs Markup Validation Service, click the "Validate by Direct Input" tab at the top and paste in your HTML. Hopefully you'll get a nice "This document was successfully checked as HTML5!" message. If not then look at the HTML above again and check that it's all alright!
No comments:
Post a Comment