Running Diary: The Elementary School Computer Club

My 6 year old daughter is wrapping up her year in Kindergarten and it’s been a fun time. Volunteering at her school, however, is surprisingly competitive. There are only so many slots to help out in the classroom and they lock up so quickly that up until now all I was able to get into was a book fair. It turns out, though, that not every parent builds web sites for a living and that was particularly attractive to the school’s computer club, who I recently showed the basics of HTML editing.

If nothing else, the experience reminded me that it’s a good idea to get out of your regular work environment every once in awhile. It helps you see the world from a different perspective and, for me at least, let me appreciate the cool factor of my job I sometimes take for granted.

Needless to say, this was not my usual audience of international engineers or senior managers. The school’s computer club consisted of 15 4th and 5th graders, all of whom spend an extra hour after school learning different applications. Their previous assignment, for example, had been to use PowerPoint to create posters for a school event. Seeing as I don’t have a 4th or 5th grader at home, I wasn’t sure what to expect. Mostly, I was frightened that they all already new the difference between an <i> and an <em> and that I’d have nothing to say.

Beforehand, the club adviser and I put together this slide set to guide the conversation, but we both agreed that it should be very hands on. So, I started by having the kids all load any web page they wanted to into Internet Explorer. Then I showed them how to view the HTML source of the page and explained that was how the computer at the web site tells your browser how the page should look. I borrowed a graphic from howstuffworks.com to help me with that part and explained what a URL was.

Then we got into making our own HTML page and that’s when some trouble began.

Explaining what an HTML tag is and what role it plays was simple enough, but from the blank stares I got from this slide told me I had to back up (again, images borrowed from howstuffworks.com):

Simple HTML diagram

It was a sobering lesson in knowing your audience and setting context and I did a lousy job of it for a couple of minutes.

So, instead of starting with the full simple HTML page shown above, we started with just an <html> tag and it’s end tag. Try saying that out loud to 10 and 11 year olds: “Type less than symbol, the letters H, T, M, and L, and then a greater than symbol”. The teacher and I then ran around to everybody’s computers to make sure everybody had it correct and all to show nothing. Even I had to admit to them that, so far, we all had pretty boring web pages.

Next, we we added <head> and <title> tags and I told them to type whatever they wanted to in the <title>, save their files in Notepad, and refresh Internet Explorer. It was then that the difference in my audience compared to what I am used to struck me in the most positive way possible.

The first kid who got hers working and saw her browser title say “Girls soccer rules!” exclaimed, “COOOL!”

Senior managers hardly ever say that about browser titles 8).

We went on to adding a page body and simple text manipulation tags, with lots of “Woah!” and “Neat!” comments along the way. We ran out of time before we got to CSS and adding color so I just demonstrated that, but I pointed them to HTML Dog if they wanted to explore some more themselves at home.

Overall, I’m so glad I did this. I’ve been writing HTML since 1995 and I definitely take for granted that it’s something that most of the general public has no idea is there helping them explore information online. Just spending an hour being reminded how cool that is was worth it but if I lit a fire under a young person to get excited about web development that would be even cooler.

Advertisements

Tags: , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: