After a few weeks of finding I was too busy to blog about how the Y6 HTML lunch time club is going I thought it was about time I added some updates as I’m so pleased with the progress the group are making.
As you should be able to see from the screenshots above, the group are now at the stage where they have got 3 or 4 completed web pages, which all link to one another using a simple navigation bar. Now comes the fun part….styling! We have been playing around with css (Cascading Style Sheets) for the last few weeks and everyone has now successfully linked their style sheet with each of their web pages. This means they are now free to play around and experiment with different elements within that style sheet, allowing them to modify and change the way their pages look. For example, the example at the top shows how a simple line of code in the style sheet: background-image: url(“../images/mario.jpg”); can insert a background image to every page of the website, creating quite an eye-catching effect. If you look closely you can see that the <h1> has also been styled using css, inserting a small logo of Super Mario to the left of the heading. The Biscuits web page in the middle shows how the <ul> and <li> tags have been styled to remove the bullet points and arrange the navigation bar horizontally. The Dinosaur website at the bottom shows how the css has styled the <body> tag so that each page has a coloured background and all the content is centralised.
The examples above might not look like the professional websites that we are all accustomed to seeing when we browse the web but, as I keep reminding the children, bbc.co.uk, facebook.com, theguardian.com, youtube.com etc…are websites which have all been initially created by a large number of people and all require even more people to run them and keep the content up to date. The websites these Y6 children are building may be simple and less ‘funky’ on the surface but, and this is a big but, they have been created entirely by writing HTML code in a text editor; no copying and pasting, no shortcuts just coding! And for that I take my hat off to them.
As usual there was a fair bit of de-bugging that went on in order to get their web pages to this stage e.g. background-colour doesn’t work whereas the US spelling e.g. background-color works perfectly! When I spotted a missing semi-colon at the end of a line of code in a css file, the child responded by saying “it still works anyway even without the semi-colon, so it doesn’t matter” There wasn’t much I could say to that and I didn’t want to rant about how I find it a bit irritating that Chrome (and other browsers I assume) are now intelligent enough to close tags for you as this inevitably leads to laziness and sloppy coding down the line…it is only a lunch time club after all!