The Return of the WebMonkey

Last year, my web design unit with my fourth and fifth graders went on forever. I started it in Front Page, which is how it had been done for a few years at my school. I was new to Front Page. After working with it with my students for a few weeks I decided that...

1. It had too much propriety Microsoft stuff in it.


2. It was too temperamental.


3. The kids weren't learning much of value.

For me, #3 was the kicker. I felt they weren't learning much because they were already comfortable users of Microsoft Word, and much of Front Page feels very Word-ish. And the parts that don't feel Word-ish are their own strange Front Page thing that won't help the kids anywhere else in life.

And so, I decided to teach them to code. Never mind that I was far from adept at coding, I just dove in.

Fortunately, I used a site called Web Monkey as my starting place with the children. It steps through the basics of web design with irreverence and a blue monkey with a hammer-- Who could ask for more?

We are using that site again this year, but more as a reference than a read and follow it step-by-step type of thing. Older or more experienced students could do that, but most of my 9-11-year-olds find that too daunting at first.

Thus far, this has been our sequence...

Lesson 1: Intro to HTML
We start with quick look at the idea of HTML, including the concept of tags. They then open Notepad and add the html and body opening and closing tags, add a few words to the body, and then learn where and how to save it. At this point, a miracle happens (at least in their minds.) Their simple text document now has an Internet Explorer icon and when they double-click it, they can see their web page. Life is Good.

Lesson 2: Body Tags
The next week, after learning how to right-click, and the "Open with Notepad" their index.html file, they learn how to expand the body tag so that they can change their pages background color and text color. When I show them the handy chart of the 216 web-safe colors with their hexadecimal codes, you'd have thought I was showing them photos of Eden given the reverent "Oohs!" that are heard around the room, soon followed by genuine happy dances of joy as their pages change color.

In addition to the bgcolor and text tags, I teach them the font color tag. They oblige by joyfully creating truly garish text color combinations on their pages-- we'll deal with tasteful design after this pure joy has worn off.

Next I challenge them to figure out how to change the font tag to change the size of certain words. They leave feeling very clever and talk web design all the way back to their homeroom.


Lesson 3: Adding Images
The img src tag is a real challenge for lots of reasons, including...

• it's length
• the tricky words (is it img src or img scr? Most kids choose the latter for some reason.)
  
• the need for quotation marks (which are easily forgotten)
• the need for us to use ../ because we are on a network
• the need to put the images inside their web folder
• the need to know the file extension on the image.
  

A typical image tag ends up looking like this:

img src="../susans/images/cardinal.gif"

They thought back ground tags were bad, so this is a bit daunting. However, I have carefully prepared a folder of animated GIF images for them to copy and use. The anticipation of having a flapping butterfly, a barking dog or a flaming, flying dragon on their web page pushes even the most reluctant to persevere.

I use my "first dones" as experts and soon everyone has an image on their page. As they leave class, I usually hear a few scheming to go online and find images of something they are passionate about, such as Runescape characters.-- Means I need to have the "Can't use copyrighted images on something we are posting online" talk soon, but not today.

For a few classes who were ready for it, I gave them the optional homework of going to Flaming Text to create a banner for their page. They need to put the image into their Digital Dropbox in Blackboard to get it to school, thus reinforcing a skill I've been helping them learn.


Lesson 4: Messing With Text
In which we emphasis text using b and i or em tags. Then we learn to move text and other elements around the page using the p and p align tags. Finally we explore headlines and agree that it is vexing that with the font size tag, larger numbers create bigger text, but with the headline tags, H1 makes a larger headline than H6.

We'll go on from there, but I'll stop writing this for now. It is such a delight to teach my students something that they find so meaningful and engaging. The rest of us may argue that "real" webmasters don't code by hand. However, my students see this as an important way to spend their time. A number of them have gone home and on their own created a simple page. I wasn't offering extra credit; they did this for their own delight. If only everything was this fun to learn...