DOM or <sub>?

presentation is everything

Decorating your bare HTML pages.

I’m not sure how far we’ll get today; this is a tricky bit of subject matter, and probably the most complex that we will deal with in the course. Don’t be afraid if it doesn’t all make sense straight away; there will be time to kick it all off.

Where to go for more information about this class (because you’ll need to)

I want to re-iterate that the basic place to start looking for information on how to do basic things with web browsers is w3schools. They can tell you how to do most things. If you want to know how to do something well, you really probably want to five into A List Apart, who have fantastic, best-practice articles on all the technologies we are using at this stage- HTML, CSS and Javascript. And if you really want to get in there deep and understand the How and Why of this stuff, the book to go to for CSS is Cascading Style Sheets: Designing for the Web (3rd Edition). For Javascript, I’d recommend JavaScript: The Good Parts and Pro JavaScript Techniques. You can usually get the latter one for cheap these days. Oh, and don’t forget the more experimental javascript weirdness at Ajaxian.

Now, that’s the background information. Let’s get our hands dirty.

Going deep with HTML/CSS

HTML vs CSS as seen by Lego (courtesy eelke dekker)

HTML vs CSS as seen by Lego (courtesy eelke dekker)

Web pages are structured around HTML and CSS. HTML defines the structure and content of the page, and CSS defines the presentation. The glue that binds these together is the Document Object Model, or DOM. We’re going to dive into this using the amazing debugging tool Firebug, or the less famours but similarly fantastic Safari debugger.

This combination of HTML and CSS already provides us a lot of power – it’s worth looking over the archives of CSS showcase sites like CSS Zen Garden to see how much power. It’s still (mostly) static, however. If you want to get interactive and animated, the next step is Javascript


From humble beginnings as basically a marketing stunt by Netscape in the 90s, Javascript has grown to become one of the most widely deployed programming languages in the world. For all its flaws, it’s here to stay

Atwood’s Law: any application that can be written in JavaScript, will eventually be written in JavaScript.

Writing Photoshop, Word, or Excel in JavaScript makes zero engineering sense, but it’s inevitable. It will happen. In fact, it’s already happening. Just look around you.” —Jeff Atwood

I don’t expect you to write a photoshop clone in javascript, but you will be able to pass the course with not much more than a little javascript expertise.

My javascript weapon of choice, and I think, the easiest and and best-documented way of learning Javascript, is jQuery. There’s a lot of walkthroughs here and we’re going todo one together. but first:

Now, point your browsers at the jQuery tutorial and let’s get started. And when you’ve done that, walk through all of these.

Next steps:

Wider context:

0 Responses to “DOM or <sub>?”

  1. Leave a Comment

Leave a Reply

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

You are commenting using your 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


Except where otherwise attributed, Creative Commons License
Netcultures blog is by Dan Mackinlay and Chris Caines and licensed under a Creative Commons Attribution 2.5 Australia License. Content from external sites remains property of its original creator.

%d bloggers like this: