HTML + IWB = True Love

Last year, I was pleased with the success of the web design unit I did with my fourth and fifth graders, but I wanted to find a way to bridge the gap between me teaching them a tag, and them successfully using it, especially early on in the unit before they “got” it.

One thing I tried was to insist that they split their screen. On one half was their Notepad document where they were coding their page, and on the other side was WebMonkey so they could be looking at the lesson, referring to the codes. For some there came an “Aha!” moment and then they took off, looking at codes, trying them out, tweaking them. They had learned to learn and I was thrilled to have launched them down that road.

For others, I felt like I was just outside of the Zone of Proximal Development. There would be momentary glimmers, but not enough spark for it to catch. The HTML was too abstract for them.

This year, I have a Promethean interactive whiteboard in my lab. I felt I was under-utilizing it until this unit began. Now it has become essential. Right from the first day, I used it to help the kids start being aware of file extensions, since this is the first time some of them had to type them in.

I created a simple matching exercise with the extensions on one side, and the file type on the other. When they paired the file type with its extension, the white hidden text appeared “magically” in the black box where the extensions were. The kids named this “the X-ray thing!” and keep asking for more such activities.

As important as their enthusiasm for this type of activity is its effectiveness. I taught the same concept last year, but it didn’t stick. This year, after that one brief activity, when I say. “File extension, remember, the file’s last name?” I get instant nods and looks of recognition, and if someone is adding a photo to their web page and it isn’t working, I can say, “Did you remember to add the extension to the file name?” and instead of a blank stare, they’ll glance at the screen and say, “Oh! That’s the problem.”

Next, I introduced the concept of tags and taught them the four key tags that must be on every web page. Then they practiced putting these tags in place by dragging them around on the IWB. I don’t know if it is the large muscle movement helping to make the abstract concept more concrete, or the fact that since so many kids want a turn at the board, that we spend more time in guided practice before they try it on their own. Whatever the reason, it is working. When the kids leave the group area and head to their computers, I’d say 2/3 of them now seem to know what to do, compared with 1/3 after the first lesson last year.

I am only referring to fourth graders who haven’t done any coding; my returning fifth graders have amazed me with what they retained. I do think many of them didn’t get it last year, but as so often happens between fourth and fifth grade, things that seemed beyond them as fourth graders, be it editing their work, reflecting on their learning, or writing HTML code, they suddenly seem to understand it when they return as fifth graders. That was one of the many reasons I love teaching a combined fourth/fifth grade classroom for so many years back in the US. If I’d only taught fourth, I have never know that the lessons did finally take root, they just had a long gestation period.

As we move into more complex tags, the IWB has continued to be a powerful tool. As I mentioned in the previous post, the tag we use to insert graphics into web pages, is long and confusing. Kids often leave off a bit of it or put the bits in the wrong order. As I pondered how to make them more successful, I created a number of flip chart pages around this tag. The first page introduced the tag. Then in a large font size, it showed the tag as it would need to be typed. I colored coded it so I could point out what they were likely to forget, which parts were easy to accidentally flip, etc.

The next page was a matching activity so they could match the parts of the code with each part’s purpose. To keep everyone engaged, I had the student who were sitting in the audience be ready to give each try a thumbs up or thumbs down to indicate whether or not they agreed.

The final page had all the tags we had already learned in their proper places, and then all the pieces of the image source tag waiting to be inserted. That was a real challenge; sometimes it took the entire class working together to correctly assemble that line of code, but every class eventually succeeded. And in the work time after that, students had good success, and were very willing to help each other until everyone had an image on their web page.

Adding the IWB to this unit has been a positive experience all the way around. The students seem to be learning the content more easily and are clearly engaged. I’m learning to use the IWB. Life is Good.