Websites can be roughly divided into two parts, the browser and the server.

We are all familiar with web browsers, you are using one right now. There are a number of popular ones, such as Chrome, Firefox and Internet Explorer.

All web browsers handle the four fundamental technologies of the web. We’ve already seen the first, HTTP, which handles delivering content to the browser. Here are the remaining three:

HTML

The HyperText Markup Language. This is a file containing most of the text content of a web page and has a .html extension. The text is wrapped in tags to give them meaning. A snippet of HTML might look like this:

<blockquote>Nerds like us are allowed to be unironically enthusiastic about stuff. Nerds are allowed to love stuff - like, jump-up-and-down-in-your-chair-can't-control-yourself love it. When people call other people nerds, mostly what they're saying is "You like stuff", which is not a good insult at all. Like, "You are too enthusiastic about the miracle of human consciousness".</blockquote>
<div class="cite">John Green</div>

And when the browser renders the HTML it looks like this:

If you want to get a feel for what all the different HTML tags can be, and what they do, check out Mozilla’s HTML Element Reference.

CSS

Cascading Style Sheets give the browser styling hints for the HTML. It has a .css extension. Every website has CSS, because HTML looks absolutely terrible without it.

For the quote above we can do a stylesheet like this:

blockquote {
  background-color: black;
  color: yellow;
  padding: 10px;
}

.cite {
  text-align: right;
  font-weight: bold;
  font-size: x-large;
}

Each section in the stylesheet applies to a different set of tags. The first section applies to any blockquote tags. The second section applies to any tags which have the attribute class="cite" as part of their name (like the second tag in the example.)

When applied, this “styles” the quote to look like this:

Note that even though the default style is terrible, that didn’t stop me from creating an alternate, equally ugly, style.

If you want a deeper understanding of what all of the CSS properties like padding or background-color can possibly do, check out Mozilla’s CSS Reference.

JavaScript

JavaScript is an entire programming language contained entirely within the browser. Though HTML with CSS might look pretty, it can’t actually do anything once the page has been rendered.

This snippet of JavaScript will run in your browser and scan the current page for blockquote tags and give them a random color every 200 milliseconds (five times per second).

function partypartyparty() {
    var quotes = document.getElementsByClassName('fancyquote');
    for(var i=0; i<quotes.length; i++) {
        var r = Math.floor(Math.random()*255);
        var g = Math.floor(Math.random()*255);
        var b = Math.floor(Math.random()*255);
        var q = quotes[i];
        q.style.setProperty('color', 'rgb('+ r +','+ g +',' + b + ')');
    }
}

window.setInterval(partypartyparty, 500);

If you add it to the page then the result is, well, startling:

We won’t be covering JavaScript in this workshop, but if you do end up doing one of our JavaScript workshops in future then you will find much more useful things to do with it.