A Thimble Full of HTML

In the beginning, there was Notepad…

Everyone just had to have a personal webpage – it was the upcoming thing to have.  So, I bought a book about HTML, roughed out what my first webpage would look like and then began the process of creating a webpage.  It took a long time and when I was done, I had a crappy looking webpage.  It was OK because most everyone else had a crappy looking webpage.

So, it was off to find other alternatives.  At the time, Netscape Composer did a nice enough job and my personal webpage started to look better!  In fact, we used Netscape Composer for the Women in Technology program and the grade 7/8 students did a pretty decent job composing their own.  Later on, the Ministry of Education licensed the Macromedia Suite of web tools and moved along to the Adobe Suite.  With a lot of practise, it was relatively easy to create a decent enough webpage and website.  The nice part was that the graphical user interface took learning most of the HTML out of the process.

Now, most people use a wiki program like PBWorks, WordPress or Google Sites to develop their online presence.  They do an exceptional job of writing the HTML in the background as you compose/edit in the foreground.  If you wish, there is always a tab or link to let you lift the hood and look at the code underneath.  Most people probably don’t.  After all, it requires a knowledge of HTML and most people don’t know the code.

It’s a contentious issue for those who teach web design in a computer science classroom.  Some camps are OK with graphic developers, other camps insist that students learn to write using HTML.  It’s much like the discussion about whether or not students should memorize the multiplication tables.

I would suggest that, no matter where you stand, there is a middle ground.  There is a need to at least having a passing interest in HTML code and how it drives your content.  This blog, I would offer as Exhibit A, is one of them.

On Friday, I show off some of the best that Ontario Edubloggers have to offer.  The post will have three or four blogs and a long time ago, I used to use 6 = signs to separate one from the other.  It looked like this ======.

One day, I stepped back and thought … that looks really ugly especially when HTML supports a divider that would go from the left side of the screen to the right.  You don’t need to count the number of characters – it just works.  All that you have to do is insert the horizontal rule into the page at the right spot.  Problem is that the WordPress editor and the Scribefire editor which I use almost exclusively don’t have a little button to click and insert the code.

Instead, you have to switch from editing visually to editing the code.  It’s just a click away.  When you do it the first time, you’re immersed in at least a bit of HTML.  You then need toidentify the exact spot in the page where to insert the code and then key

---

to make it happen.

---

When it works, it works well.  Or, you might want to insert a code generated by an external program.  For example, a Twitter message.  When you ask Twitter for the raw code, you get something like this.

Kind of cryptic if you don’t understand HTML.

So, back to that middle ground.  What’s the best way to teach this?

“Best” is in the eye of the teacher and her professional judgement.  But, I would suggest taking a look at Mozilla’s Thimble.

Unlike traditional web development environments where you have to throw out the visual to get to the code or throw out the code to get to the visual, Thimble gives you the best of both worlds.

I know it’s a little small in the blog post but open the image and you’ll see it regular size.

On the left, you have an editing environment.  Computer Science teachers should be immediately drawn to the colours used to show various components of the code.  Using Thimble is easy.  Just type your code in the left panel and the results appear instantly on the right.  Talk about your immediate feedback.

This old coder had a whale of a time playing with Thimble, wishing that I had an excellent tool like this when I was writing my first webpages.  It would definitely have helped flatten the learning curve.

If you’re looking for a tool to teach HTML, I’d recommend having a good look at this and kicking the tires on it.  It think you’ll like what you see.