Back in my day (OK, before my day), the profession of web developer was a low one. It ranked below puppy hater but above Yankees fan on the scale of professional honor. Because of all the tags and transparency spacer images we used, we were seen as crude hackers with no sense of aesthetics.
Well, we may still be lacking in aesthetic sense, but as the Web has developed so has the profession of web developer. These days there are countless tools we can use to make well-written, standards-conforming, and beautiful (OK, maybe not that last one) web pages. Most of the great websites you use today (shameless plug: including this one) are built using these tools.
Our bevy of tools on the browser’s end have allowed us to create things on the web that were unimaginable just 10 years ago, such as countless social networks claiming to be the best way to waste your time, “hot” tech startups claiming to have revolutionized something that’s already been done a thousand times, and Angry Birds clones claiming to be only slightly worse than the original. All on the web. So maybe these tools haven’t gone to the greatest of uses.
HTML (properly known as HyperText Markup Language; you can see why people who don’t want to look bad just use the acronym) is the language used to lay out web pages. Right-click on this page and click “View Source”. That’s the HTML that this page uses.
Essentially, HTML is a bunch of tags, which the browser interprets and lays out. For example, look at this HTML code:
<p>I don’t know about you, but I like pressing buttons.</p>
This HTML code has text wrapped in a paragraph (the <p> tag starts a paragraph, the </p> tag ends a paragraph.) There’s a line break (the <br>) and then a button you can click to your heart’s content. Your browser will lay it out on the screen for you.
So that’s all well and good. But if you have nothing but HTML, you get a webpage that looks like it came straight out of the 1990’s. Not much good came out of that decade anyway (hairstyles, music, etc.) But wait! There’s more!
Another acronym. Yay. CSS stands for Cascading Style Sheets, which is a bit of a misnomer since they don’t really cascade (whatever that means… it’s computer code, not a waterfall!) CSS is the language used to style webpages. This, too, is interpreted by your browser.
CSS and HTML work together – HTML makes the page’s layout, CSS gives it its flair. Imagine building a house: HTML provides the drab but necessary wooden framework, CSS adds the neon colors and quirky furniture.
CSS is a pretty straightforward language: for a certain HTML tag (like a paragraph), you can specify values for various style classes. Your browser will read the CSS and apply it to all the matching HTML tags. For example:
So every paragraph (stuff in the HTML <p> tags) will have red font and be 16 pixels in size. If you noticed, these are some of the same styles you can use in Microsoft Word and other applications.
So now your webpages are laid out and they look pretty. But here’s the thing: that’s all they do. They just sit there and look pretty. Which is great and all, but users of the web want more. They want fancy animations. They want pop-ups (OK, maybe they did back in 2002, but I digress.) They want buttons that will do stuff when you click on them.
About that last one – that’s an issue. You can make a <button> in HTML, and you can click it all week, but it’s not doing anything any time soon. If you want the button to, oh I don’t know, move your elephant across the screen and attack something, then you need something more.
var paragraph = $(‘p’);
Sound fascinating? I think it does. That’s just part of the beauty of the web.