Explain relationship between HTML, CSS & JavaScript with pretty pictures?
January 13, 2010 4:01 PM   Subscribe

I'm trying to give a very broad overview of how HTML, CSS and JavaScript interact to someone who has very limited technical knowledge. (Smart, but not in that field) What are some good resources I can share?

I don't need to persuade, but I wouldn't mind being able to explain how things work without getting all handwavey. In particular, I'm looking to explain how changing the CSS or JS can make the page different without having to touch the HTML.

The "Web Standards Trifle" is the sort of thing I think would work, but pictures would be even better.

In particular, I'd love to find a diagram or other visualization. I swear I used to have a lovely graphic that showed separation of content from design & behavior, but I must've recycled it at some point.
posted by epersonae to Technology (6 answers total) 8 users marked this as a favorite
If the person is good with language and grammar, you could try explaining it in terms of nouns, verbs and adjectives.
  • HTML does the nouns: <p></p> means "paragraph";
  • CSS does the adjectives: p {color:#000;} means that paragraph text is black;
  • Javascript does verbs: window.open() means "open a window"

posted by AmbroseChapel at 6:35 PM on January 13, 2010 [2 favorites]

Might as well them the truth: the browser parses the HTML to build a hierarchical model of the document; applies the CSS rules to the elements to render the model as a page on-screen; and then runs the Javascript in the page to animate or manipulate both the model and the CSS on-screen in reaction to the user's clicks and keypresses.
posted by nicwolff at 7:19 PM on January 13, 2010

Boy, did I not read the question. Sorry!
posted by nicwolff at 7:20 PM on January 13, 2010

It's a 3-layer birthday cake.

The HTML is the structure.
The CSS is the colorful icing.
The Javascript is the trick candles you can't blow out.

Of course, it's not that simple, but trying to think of it in layers certainly helps.
posted by camworld at 4:57 AM on January 14, 2010

HTML is the script. It just contains the words the actors are supposed to say.

CSS places the actors in their starting positions and dresses them in various costumes.

JS moves the actors from their original positions to new positions, alters the costumes so that they look different from the way they looked when the play started. It can even retroactively alter the script. Basically, it can take all the "chess pieces" laid out by the HTML and CSS and play with them, shuffling them around, changing them, etc.

JS can also communicate with both the audience and the back-stage crew. If someone in the audience wants one of the actors to die so that his understudy can take his place, JS will handle that. If someone backstage wants the curtain to come down. JS will handle that, too.

Simplifying the metaphor, HTML is the script; CSS is the costume designer; JS is the director.

If you want to change the play from "Oklahoma!" to "Hamlet" without changing the costumes, edit the HTML; if you want to keep on doing "Oklahoma!" but change its setting to outer space (e.g. space suits instead of cowboy gear), edit the CSS; if you want to add in script changes from a playwright who is furiously writing backstage, use JS to pull his changes onto the stage.
posted by grumblebee at 11:14 AM on January 14, 2010

Video = visualization?

HTML & CSS - The Very Basics

May not cover Javascript the way you want, though.
posted by backwards guitar at 11:39 AM on January 14, 2010 [1 favorite]

« Older What outdoor toys do your kids like?   |   My quadcore is running like a Pentium 2 Newer »
This thread is closed to new comments.