Mashup

The Web standards – HTML, CSS and JavaScript

That’s usually the first question that gets asked about web standards. You can accomplish content, styling and layout just using HTML—font elements for style and HTML tables for layout, so why should I bother with this XHTML/CSS stuff? Tables for layout etc is how it used to be done in the bad old days of web design, and many people still do it like this (although you really shouldn’t be), which is one of the reasons why we created this course in the first place. We won’t be covering such methods in this course. Here are the most compelling reasons for using CSS and HTML over outdated methods:

  1. Efficiency of code: The larger your files are, the longer they will take to download, and the more they will cost some people (some people still pay for downloads by the megabyte.) You therefore don’t want to waste your bandwidth on large pages cluttered up with styling and layout information in every HTML file. A much better alternative is to make the HTML files stripped down and neat, and include the styling and layout information just once in separate CSS file(s.) To see an actual case of this in action, check out the A List Apart Slashdot rewrite article where the author took a very popular web site and re-wrote it in XHTML/CSS.
  2. Ease of maintenance: Following on from the last point, if your styling and layout information is only specified in one place, it means you only have to make updates in one place if you want to change your site’s appearance. Would you prefer to update this information on every page of your site? I didn’t think so.
  3. Accessibility: Web users who are visually impaired can use a piece of software known as a “screen reader” to access the information through sound rather than sight—it literally reads the page out to them. In adition voice input software, used by people with mobility impairments, also benefits from well constructed semantic web pages. Much like a screen reader user uses keyboard commands to navigate headings, links and forms a voice input user will use voice commands. Web documents marked up semantically rather than presentationally can be easier to navigate and the information in them is more likely to be found by the user. In other words, the faster you “get to the point” (the content), the better. Screen readers can’t access text locked away in images, and find some uses of JavaScript confusing. Make sure that your critical content is available to everyone.
  4. Device compatibility: Because your XHTML page is just plain markup, with no style information, it can be reformatted for different devices with vastly differing attributes (eg screen size) by simply applying an alternative style sheet—you can do this in a few different ways (look at the mobile articles on dev.opera.com for resources on this). CSS also natively allows you to specify different style sheets for different presentation methods/media types (eg viewing on the screen, printing out, viewing on a mobile device.)
  5. Web crawlers/search engines: Chances are you will want your pages to be easy to find by searching on Google, or other search engines. A search engine uses a “crawler”, which is a specialized piece of software, to read through your pages. If that crawler has trouble finding the content of your pages, or mis-interprets what’s important because you haven’t defined headings as headings and so on, then chances are your rank in the search results will suffer.
  6. It’s just good practice: This is a bit of a “because I said so” reason, but talk to any professional standards-aware web developer or designer, and they’ll tell you that separating content, style, and behavior is the best way to develop an application.

JavaScript—adding behavior to web pages

Finally, JavaScript is the scripting language that you use to add behavior to your web pages—it can be used to validate the data you enter into a form (tell you if it is in the right format or not), provide drag and drop functionality, change styles on the fly, animate page elements such as menus, handle button functionality, and a million other things. Most modern JavaScript works by finding a target HTML element, and then doing something to it, just like CSS, but the way it operates, the syntax etc is rather different.

JavaScript is a more complicated and expansive subject than HTML and CSS, so to keep things simple and avoid confusion at this stage, I won’t be discussing it in the below example. In fact, you won’t be looking at JavaScript in this course again until much later on.