21 articles and counting

Teaching HTML with Hypertext Fiction

Continuing a project I worked on during Mozilla Service Week, I’ve been working on my curriculum for a workshop I will be teaching in Nov for the first time. The class is called Where the Wild Things Could Be… and will be through the 826 Seattle writing workshop. It will have about 8 students that are 11-14 years old.

Working on Hypertext Fiction FunThe goal is to teach HTML. Hypertext Fiction, like the Choose Your Own Adventure book series, is a narrative with multiple story paths and endings. The web is a natural medium for this type of story. I’m hoping that teaching kids how to write hypertext fiction is a natural way to teach them how to create HTML.

A major impediment to learning the basics of HTML is all the web publishing cruft:

  • Text editors
  • Files
  • FTP
  • Hostnames and Hosting

All of this crap is an accident of history and seems like a big stumbling block, before you get to the juicy stuff of HTML, CSS, and JavaScript.

The approach I’m taking is to create a web application that paves over these four problems. The student will have create a short page name and then get an edit box. This gives them a body tag and let’s them create from there. Saving the page publishes it. Linking involves using the “short page name” of another page in your HTML code.

This workshop is only 2 hours, so I will focus on teaching hypertext fiction basics and the following HTML tags: A, P, UL, and LI. Students will use Sticky Notes and a whiteboard to coordinate the story and page flow.

I’ve looked around a little for a web application, but nothing is perfect, so I’ll probably write my own. R.Y.O.H is a clever new project, but doesn’t allow HTML coding and it’s quite a bit different than my wireframes. Wordpress is too distracting. Wikimedia is close but doesn’t allow HTML and I don’t want to just teach wiki markup. Do you know of a good hypertext fiction web tool?

I’m creating the curriculum online. I’d love feedback. I’ll post and link to more materials as I create them. Steal my work. Improve it.

8 Responses to “Teaching HTML with Hypertext Fiction”

1
David Humphrey - 04/10/09
Not sure if you've seen this, but it might interest you: http://www.opera.com/company/education/curriculum/
2
ozten - 04/10/09
@David thanks for the link. I'll read the HTML sections closely. It's tough to figure out what's a good mix for a 2 hour workshop with 11-14 year olds where the focus is a writing workshop which also exposes a little bit of the medium of the web.
3
AndyEd - 04/10/09
Are you familiar with Twee/Twine, based upon tiddly wiki, for hyperfiction authoring? It's really pretty slick: http://gimcrackd.com/etc/src/ That said, it doesn't offer a big opportunity to teach HTML though there's opportunities for the overall template and individual messages.
4
Felix Pleșoianu - 04/10/09
Looks like what you want is a wiki, only with plain HTML instead of wiki markup. There are wikis that support pluggable rendering engines, It shouldn't be too hard to implement a 'no-op' one. That leaves the issue of links. Are the students supposed to enter the absolute URL, every time? Because I found that to be a PITA in my custom-made CMS.
5
ozten - 04/10/09
@AndyEd - I did find Twine but saw that it was a thick client and didn't research any further. Thanks for pointing it out, I did watch a couple videos. If looking very interesting, if your looking for Wiki-syntax and tiddly wiki type-one page publishing.
6
ozten - 04/10/09
@Felix - So I'll have then write a "short page name" at the top of each of their sticky notes and the web app will have a first step when creating a new page to enter this short name. All links are '/shortstoryname/shortpagename'. Each page, when in edit mode, will have the short page name at the top so they can copy and paste it into their href in another tab or window.
7
Richard Milewski - 05/10/09
Take a hard look at Patrick Taylor's LeCMS ( http://www.worldlevel.com/ ) and la.plume ( http://www.mini-print.com/ ), these are very small CMS systems written in PHP. La.plume is only 30 kbytes (yes KILO)! Neither requires a database, and both accept straight HTML as input mark-up. While very simple, both are quite elegant. If they don't fill the bill as is, either should be quite easy to hack into what you need. I love your project. Please keep blogging about it. It fits right in with the "Magic Ink" ideas Atul Varma, Frank Hecker and Mark Surman have been talking about. -- Richard ...and I'm guessing you already know about Curriki.org? A great place to post your finished course!
8
karl - 11/10/09
Good initiatives. Why not setting up a Web server with HTTP PUT, and then using amaya to set you up in a scenario which is really using the full HTTP stack for editing.

Leave a Reply

Name (required)
Mail (will not be published) (required)

Your Comments: