'The builder's guide to the world wide web' film by Richard Teahan
At the BBC we make lots of websites. Throughout the BBC's digital history many technologies have come and gone, but the three basic building blocks for websites have remained the same:
HTML, CSS and Javascript
These core languages provide users with the best online experience. They're also the simplest tools our designers and engineers can use to create a complete and compelling BBC online. They are simple, but not easy to write or master. As with all languages, they continue to change. It's very important that our web designers are fluent in these languages before they start using more complicated ones.
HTML
If we were to put these three technologies in order, the first to tackle would be HTML (Hypertext Markup Language). When building a beautiful house, one needs stable scaffolding and solid foundations, right? The same applies when building a website. We start with its markup. HTML provides page structure. Because our content is still mostly experienced in scrollable pages on a flat screen. HTML provides the structural elements that fit these pages, like headings, paragraphs, lists, quotes, and many others.
For our many users with physical or sensory challenges, such as those using screen reader technology, and for those 'less human' (but all important) search engines, HTML can make up their entire experience of the web. That's why having good semantics in HTML is so important, i.e using the right element for the right job. HTML can also provide extra information to describe things like text alternatives for images and labels.
CSS
With the basic structure done, we can now decorate our house. We do this with CSS (Cascading Style Sheets). This language is used to define typefaces, sizing, colour and those well defined behaviours of certain elements (eg. hover states). CSS can also define how the same page looks on different screen sizes and devices. Or responsive web design as it's most commonly referred to. As with HTML, CSS can make or break the experience of a website. At the BBC we test everything, to ensure all users can clearly see and identify text and elements once styled. Finally, as in all well written stories, the order in which things happen is vitally important. (Maybe I should have started with this).
Javascript
When all is set up and looks good, we'll still need to interact with parts of our house. We must install the plumbing! We do that in Javascript, or JS as it's often referred to. Amongst other things JS can be used to handle clicks, hovers and scrolls. It's used to set cookies so you get the right recommendations on iPlayer; to re-order an Olympic medal table in Sport; or to start and stop a story in News. It's a truly complete programming language and many websites today are built exclusively using JS. At the BBC we make sure our web pages are still accessible without Javascript. But some of our content can only be accessed using JS, like video and audio, in which case we provide hints and information on how to enable it.
Back-end, HTTP (and riding the rails)
HTML, CSS and Javascript are the languages that a browser uses to render a web page and make it functional. They make up what we tend to call the front-end. But how does the Web talk to itself? How does that information end up in your browser in the first place? This is a complicated discourse. It actually involves many languages layered on top of each other. We call these Internet Protocols, e.g. the Hypertext Transfer Protocol (HTTP). The conversation all starts when you click a link or enter a URL in your browser. In that moment a series of events is triggered with what we call the HTTP Request. Imagine a little railroad wagon, into which you load your request. Once triggered, it starts traveling through the Internet. Once it reaches its destination many wagons of HTTP Responses are loaded and sent back to you. They carry everything your browser needs (HTML, CSS, Javascript, images, video, audio etc etc), to assemble your requested web page. Sometimes the load being carried by these wagons is copied at intermediate stations along the way, so the next time the request is made, it's journey time is reduced. We call this caching.
House building? Railroads? Stations? Forgive all the metaphors, but yes, the Web is all these things. Well, kinda. It's a complicated world made of many layers. It's rules and languages change fast and often. The internet can sometimes feel like a runaway train, but armed with a good knowledge of it's foundations we're able to take control of it and enable our users to steer it safely.
