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.

6 thoughts on “A Thimble Full of HTML

  1. Hey Doug,

    I’m a fan of learning the code when the GUI isn’t doing what you need to solve the problem you have – if you’re willing to dive in to figure it out, you’ll certainly come aware with a better understanding of how everything works. Embedding a tweet is a great example of this.

    Thimble looks sweet – I used to work in Dreamweaver with the “split” view (I think) which showed the visual and the code views at the same time. I recently found some tools for LaTeX math notation that work in the same way.

    I don’t know about other platforms, but in the WordPress app on my iPad your horizontal rule shows up, but your code for it is just rendered as another horizontal rule. Might want to put it in ‘pre’ tags so it isn’t interpreted as HTML. For those reading this comment, put HR in a tag to get a horizontal rule.

    Thanks! Nothing like code over breakfast 🙂


  2. I’m a firm believer that students need to see the HTML. I’ve found that students often come back a year or more later and tell me that knowing what the HTML was about helped them when they needed to do real web development.
    Thimble looks pretty nice. I may use it next year when I teach HTML again.


  3. For me this post reminds me of many years teaching tech. From my early TRS-80 logo days to when we used HTML to create our own web experience for kids in a country that did not allow internet access. Using TextEdit and our internal network kids developed webpages to simulate how the net worked. Many years later to today where I was in a meeting looking at new course offerings that included, in addition to other things, HTML. It has been an interesting journey.


  4. For those working on webapps consistently, I’d recommend using a full-featured IDE like JetBrains’ WebStorm. Otherwise, for simple fiddling around, I’d recommend using services like Plunker (http://plnkr.co/) and jsFiddle (http://jsfiddle.net/). You don’t have to download anything, you can see your results in realtime, and you get easy integration with the popular frameworks that power modern webapps.


  5. I must admit that I want full control when I make websites. scrawlar, twiducate, nkwiry – all developed on notepad, from scratch on my little laptop on this couch.

    Don’t get me wrong, I like tools like wordpress, but they often bloat the HTML with unnecessary tags. Greats tools for beginners, but I want to be certain that my sites will look as best as they can in every browser on every platform.

    I used to use frontpage and even publisher – that was the mid 90s. As I learned HTML, I began to write it all from scratch.

    Just last week I taught my grade 8 class some basic HTML. They loved taking full credit for the “Hello World” they published to firefox. We used an app called “nitroHTML” on iOS, but it looks very similar to Thimble you have mentioned. We will definitely have to check that out! Thanks for sharing.


Please share your thoughts here

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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.