Category Archives: Networks and the Internet

Year 6 HTML club updates

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.

Website_updates (1)
Website_updates (2)

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!

More soon.

FacebookTwitterGoogle+Share

Teaching HTML to Y6 Pupils (Week 3)

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.

bees_page_code

bees_page_browser

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.

biscuits_page_codebiscuits_page_browser

Next week hyperlinks….hopefully!

Teaching HTML to Y6 pupils

Teaching HTML to Y6 pupils

Recently I started a lunchtime club for Y6 pupils in which I intend to teach them the basics of HTML. The final outcome of the project will be for pupils to be able to write HTML to create a fully functioning website complete with headings, paragraphs, images, navigation buttons, hyperlinks…all styled using some basic CSS.

The reason why the club has been set up now is because, in the Spring term, the Year 6 teachers will be teaching a HTML unit of work and I anticipate that there could potentially be quite a few issues, especially with a class of 32 children.

The children who attend the club this half term will have been given a head start in the basics of HTML and will therefore be able to act as digital leaders when their class is learning HTML next term, by helping classmates and trouble-shooting any problems, alongside the class teacher.

With this blog I will atempt to record what happened each week, what went well and what the pupils found particularly difficult.
Week 1.

The projector in the computer suite, where the club is run, has given up, so the first demonstration had to be done with 15 pupil all crowding round one computer monitor. Not ideal, but then what is?

Having discussed what websites/pages are and how they are created/uploaded to the web we got stuck straight into talking about folder structure and organising files. I demonstrated how to create a new folder and name it HTML, then within that folder how to create a new text file in Notepad and to then change the file extension from .txt to .HTML.

We then of course had to discuss HTML tags and how they effect the content which appears on your web page All of this took the best part of 30 minutes and even then it felt rushed. I think that at least one full lesson for pupils to learn about the history of the web and to talk in more detail about HTML tags is necessary.HTML_CLUB_web_page_example_1

So, having done all of that we were left with little time for the most enjoyable part: Adding HTML code to create your first page. I found that giving pupils a sheet with the basic code and tags was really helpful, as they were then able to type this code carefully into their blank text file, then save it and open it in a browser to ensure that it all worked properly. Once this template was set up they were then able to change the content as they liked e.g. adding more paragraphs, changing the content within the <title> or <h1> tags.

Next week I hope to show pupils how they can work efficiently and save time by using their first web page as template to create the other pages in their website.