An introduction to web development

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.

So what are these amazing tools I’ve been talking about? Leading the way have been the (frankly amazing) languages called HTML5, CSS3, and JavaScript, which I nickname the 3 horsemen of the webocalypse. Here’s a look at each one:

HTML

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>

<br>

<button>Click me!</button>

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!

CSS

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:

p {

color: red;

font-size: 16px;

}

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.

JavaScript

JavaScript is not an acronym, if you were wondering. They called it JavaScript because it looked like the programming language called Java, which is strange cause it doesn’t. Anyway, JavaScript is a proper programming language that causes all the dynamic effects you see on the web.

Like any programming language, JavaScript is a series of commands that make variables and use functions. The cool part about JavaScript (well, as cool as a programming language can be) is that you can access those HTML elements (like paragraphs and buttons) and CSS styles (like font color and size) and change them. Look at this code:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – the $ sign tells the browser to find all matching elements, and the ‘p’ means it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to blue.

What I find interesting (again, this is all from the viewpoint of a “webdev”) is how elegantly the three languages work together. That last line of JavaScript interacted with the page’s HTML and the CSS used to style it. It’s not like these languages are just different components of the same thing – they’re one and the same, different sides of the same amazing machine.

Sound fascinating? I think it does. That’s just part of the beauty of the web.