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.
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.
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
posted by nicwolff at 7:19 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
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
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]
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]
This thread is closed to new comments.
<p></p>means "paragraph";p {color:#000;}means that paragraph text is black;window.open()means "open a window"posted by AmbroseChapel at 6:35 PM on January 13, 2010 [2 favorites]