Saturday, 23 March 2013

Making a web page 03: Multi-coloured trees!

Now we've talked about trees and we've created a tree in winter:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Title</title>
    </head>
    <body>
    </body>
</html>

But I've looked back over what I've written and I realised that I really didn't explain enough about the way the bits of the tree hang together.

Lets correct that now.

We looked at how HTML has it's roots in a language called SGML but what does that mean?

When we write we follow certain rules. We have a paper and a pen or pencil and we start writing words down. Once we've come to a place in the stream of words which feels like it'd be a place where we'd stop to take a breath if we were speaking those words we put a full stop. We then start another sentence. When we've written enough sentences to convey a specific meaning we generally end the set of sentences and start a new set of sentences in a new paragraph.

Now that's simplifying things an awful lot but it's how I think about writing. Sometimes a paragraph can have just one sentence and that's cool as well.

We spend most of our time in school learning these rules and clever people that we are we've created all sorts of tools to help. Those words we talked about, they are made up of letters and sometimes those letters can be in the wrong order or have the wrong letters in them so we've made clever tools that compare those collections of letters to a list of all the combinations of letters in our language and when it doesn't find that combination of letters it can put a wriggly red line under the word. These spell-checkers are brilliant and save me all sorts of trouble as I really can't spell for toffee! If we've got a particularly clever tool it might even check the context of the collection of letters (lets just call it a word) and check to see if it fits within the context of the other words in the sentence. These sorts of tools are even more brilliant because they not only have the list of words but they also have an idea of the meaning of those words and they'll be able tell if you really meant to put "there", "their" or "they're" in the sentence.

Okay, so we've had a think about how we write. How might we put those letters, words and paragraphs within a web page? How might we tell a browser what to do with all those words?

HTML comes from SGML, another language that came out of SGML is XML and, even though HTML came before XML, HTML (and particularly later versions of HTML) learnt a lot from XML. XML can look something like this:

<?xml version="1.0"?>
<trunk>
    <bough>
        <branch>
            <leaf/>
        </branch>
    </bough>
    <bough>
        <branch>
            <leaf/>
            <leaf/>
        </branch>
        <branch>
            <branch>
                <leaf/>
                <leaf/>
                <branch>
                    <leaf/>
                </branch>
            </branch>
            <leaf/>
        </branch>
    </bough>
</trunk>

What do you notice about that XML? This is where I'm going to rattle on about trees again. A tree that you see in nature is narrowest in it's trunk, here the trunk is the tallest/widest element and that's because we have to contain all the elements of the tree within the trunk... spend a moment getting your head around that.

In the XML above the trunk has, at the first level, two boughs, those boughs contain branches and those branches can contain other branches or leaves. To an extent a tree is a hierarchy. In a visualisation of a hierarchy things are arranged so that we can tell what a things place is within the hierarchy. They can be at the top or the bottom or somewhere in-between. I used to work nights in a hospital, as such I never met a lot of people who worked in the hospital so I'd hear peoples names and not know what position they held in the hospital so I wrote a program which would - when it knew who their boss was - draw a picture of the hospital organisation. This is known as an organogram and it helped me understand who people were when they were talked about.

Hospitals aren't the only places where hierarchies are important, can you think of some more?

Armies run in hierarchies. Individual Soldiers are arranged into Units who take their orders from a Sargent, a set of Sargents take orders from a Captain, Captains take orders from Generals (as you can probably tell - I know nothing about the armed forces - so if I've made a mistake, forgive me).

So in the above XML the trunk contains everything else, it's the root element. Generally speaking something done to the trunk will have an effect of everything that depends upon it. Trees are generally green in colour but suppose that the XML tree above is in a place where trees are red, can you imagine how we might make it red?

We could go along and change each tag/element (can we just settle on calling them elements now? That okay? Cool!), we could change trunk to redtrunk, bough to redbough, branch to redbranch and leaf to redleaf... but what would happen if we wanted to colour the tree blue? What would happen if we wanted future trees to have a smaller type of branch called a twig? Would we end up with bluetrunk, bluebough, bluebranch, blueleaf, twig, redtwig and bluetwig... that'd be very complicated and mean that we'd have to go through each tree that we'd written and make sure that each element was called the right thing... what would happen if we had a redtrunk, two greenboughs, a handful of bluebranchs and then lots of yellowleaves?

That's an awful lot of complications and rules in which to get stuck in. We've already unconsciously absorbed one set of rules though haven't we? We know that the trunk is the root element and that the only element that can come after the trunk is the bough element, the bough elements can have branches that can then have further branches and/or leaves. That's an interesting one that isn't it? Our language and our understanding of trees means that unconsciously we know the rules of making a tree!

But getting back to out multi-coloured tree we can, instead of altering each and every element simply alter the root elements attributes. What do I mean by this? If each element is surrounded by angle-brackets (<branch>) and is either matched by an ending (</branch>) element or self closing (<leaf/>), then most elements can have extra stuff within the element, between the angle brackets. These extras are in the form of a word (or set of words separated by "-"s) and can be followed by an equals sign ("=") and then some more words within speech marks. We can then alter the colour of the tree above by replacing the first <trunk> with <tree colour="red"> and we get a red tree... well... we would if a browser understood the tree dialect of XML.

Browsers don't understand our tree though... although perhaps they do? What happen's when you save the above xml as tree.xml and open it in a browser? My guess is nothing though some browsers will try to draw a representation of the XML.

Those extras within the element are called attributes and they're very important within HTML as well. We can add a paragraph to out winter tree now. Because Tim Berners-Lee knew that he'd be doing an awful lot of writing using HTML he made the paragraph dead easy to remember, he called the paragraph element p.

Open your bare tree (I think we called it index.html) in your editor of choice and, within the body element write something. When you've finished writing add a p within angle-brackets at the beginning of the text (<p>) and a /p within angle-brackets at the end (</p>). It should looks something like this now:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My Title</title>
    </head>
    <body>
        <p>My first paragraph.</p>
    </body>
</html>

Just for giggles lets add an attribute to the paragraph, lets alter it's colour (though for some reason within HTML colour is spelt "color"...?). So lets add colour="red" to our paragraph element, just like we did with out tree trunk. Look at the page in your browser and give yourself a pat on the back, we've covered a lot today!