Lots of de-bugging this week. One example, which had us scratching our heads for a good while, was the mysterious appearance of the paragraph with nothing in it ( see image below- right) We finally spotted the fact that there was a closing paragraph tag which was missing the all important forward slash, so it didn’t close the <p> tag at all….in fact it created another one below!
Once this forward slash was added, however, the page sorted itself out and we all breathed a sign of relief!
I might have to have a chat with them about their choice of colours though…..
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!
A bit of success at last!!
I was beginning to think that perhaps I’d been a bit ambitious in thinking that I could get Y6 pupils to code HTML successfully, but this week’s session has restored my faith in the project.
I began by telling pupils this week that all I wanted from them by the ned of the session was a basic page with a title, a <h1> <h2> a paragraph and a few images in it and nothing more. They also needed to be able to explain every last bit of code in the page to prove they knew what was going on. To simplify inserting the images I demonstrated how to download an image file from the web, before saving it into a folder named images and then re-sizing it if it was too large. This meant that the code for inserting the image of the bee above was simplified from this: <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Tetragonula_carbonaria_%2814521993792%29.jpg/220px-Tetragonula_carbonaria_%2814521993792%29.jpg”>
to this: <img src:”images/bee.jpg”> Much more sensible and easier to make sense of.
The only problems we encountered this week were debugging issues, which are actually quite fun to fix when the pages are as simple as this. One in particular, which had us scratching our heads, was that an image wasn’t being pulled through because the <img src=> tag was below and therefore not inside the <body> tag. An easy mistake to make, but not so easy to spot.
Next week hyperlinks….hopefully!