On J.R. Carpenter’s Gorge, Part 2.5: HTML, web pages, and the DOM

html-code-sample-news-template

It ain’t pretty, but it’s what the Web is made of.

This post is part of a series on digital literature. I’m dissecting the JavaScript code of “Gorge”, an infinite poem by J.R. Carpenter that riffs on Nick Montfort’s program “Taroko Gorge”.  The first post, which defines “variables”, “strings” and “arrays”, is here; the second, which explains “functions” and demonstrates how the program chooses randomly from a list of inputs (a.k.a. words), is here. This post is a brief primer on how web pages are written, how HTML works, and what a DOM is. It will help to know this stuff before we move on to Part Three: putting everything together.

As you probably know, web pages are written in a language called HTML (HyperText Markup Language), which consists of a bunch of elements. Elements are basically containers for bits of the page. (If you know anything about JavaScript, you may be thinking, “Hey, that sounds like an object.” You would not be wrong.) They can also be nested: like the branches of a tree, one element can have one or more “child nodes”, or elements that branch off from it.

As well as containing stuff, elements have attributes or characteristics. (If you know anything about JavaScript, you may be thinking, “Hey, that sounds like a property.” Again, you would not be wrong.) One common attribute is called “id”; we use IDs to mark bits of the page that the program is interested in. Because attribute values have to be unique, you can drop an ID into a section of the page and be certain that, when you instruct the program to look for that ID, it’ll take you to the right place. For example, if I wanted a way of quickly referring to a paragraph about Henry Fielding—and let’s say that’s located the top of the second paragraph in the third div of my web page—I might drop the ID “fielding” in there. It saves me from having to tell the program “look out for the top of the second paragraph in the third div”, which is a pain in the arse to write and also less natural, since no one (almost no one) thinks like that. (Also, when you restructure your piece, so that the Fielding paragraph isn’t the second one anymore, the “id” attribute “fielding” will still take you to the right place. Isn’t that convenient.)

The DOM, or Document Object Model, is a mapping from HTML to JavaScript: elements (in HTML) are mapped onto objects (in JavaScript). This allows your JavaScript programs to fiddle with your web page. Now, this may not bother you, but when it was first explained to me, it bothered me because it seemed inefficient. Why do you have to do that? Why can’t you just do things to your web page using HTML? Well, because HTML isn’t a programming language; it’s a markup language, which is like a fancy form of annotating (make this bit bold, make this bit bigger, put a hyperlink here). In order to change the contents of the page, you have to change stuff in the DOM.

Hopefully, this will have given you the vocabulary/conceptual tools to better understand the next post. In that, I’ll talk about how the code for “Gorge” manipulates the DOM to change how the poem appears on its web page.

Advertisements

2 thoughts on “On J.R. Carpenter’s Gorge, Part 2.5: HTML, web pages, and the DOM

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