A Proper Web Standards Education: Part 1

Introduction

Now is an exciting time to be getting into creating web sites — the Web touches many aspects of our lives, it allows you to have an instant global audience, the technologies involved are pretty mature for the most part, there are more educational resources available than ever before and pretty much everyone wants a web site (except my dad). Your friends will love you even more for your new-found skills, and even though it is a very competitive marketplace these days, web design and development can be a very profitable career.

But how do you get into it, and how do you learn what you need to know? In this article I will aim to point you in the right direction, and give you a basic framework of good key concepts to take on board and develop your knowledge of.

Get into web standards!

Being part art and part science, web design and development has never been a very straightforward discipline — there are many good ways to build a web page, and many more bad ways (I hesitate to use right and wrong here, as the right solution for one context can easily be completely wrong in another context). There are many skills to use when coding a web page, some of which I’ll talk about below, and many technologies and techniques to consider, a lot of which are very daunting and complicated for novices to behold. You’re not going to be able to study for a week and then build the next Facebook.

In spite of all this complexity and uncertainty, however, one thing remains pretty consistent amongst all good web sites — the use of client-side web standards to create the web site’s content, visual appearance, layout, and dynamic behavior. And this is where you should start off your learning path.

Client-side web standards?

By this, I am talking about code that runs in your web browser. When you surf to a web page, generally your web browser sends a request to a server, and the server sends back a web page to the client; the client-side technologies used to build that web page are not processed until the page gets to the client. Once there, they are processed, and the result spat out for you to view in your web browser.

Web standards are defined in recommendations — vast sprawling documents maintained by standards bodies (most notably the W3C), which define how those technologies are supposed to be processed by web browsers, and how developers are supposed to use them to create web pages. The W3C are an organization with the aims of standardising web technologies and furthering the evolution of the Web.

But these documents are not the best place to go to start learning web development — they are completely exhaustive in the detail they go into, to try to eliminate as much ambiguity as possible, but this makes them rather cumbersome to digest. You are much better off reading web design tutorials such as the Opera Web standards curriculum.

What other technologies are available?

There are many technologies used in the creation of web pages other than client-side web standards, but I’ll keep things simple and not talk about them much in this document. Here is a short list, just in case you come across some of these terms are are curious:

• Server-side technologies: These are technologies processed by the web server before the result is then sent to your web browser along with the rest of the web page. Such technologies are generally used to connect to a database, and deliver different results to you depending on what options you choose, for example when looking up train times, or buying something from an e-commerce site. Examples include PHP, .NET, ASP, Ruby, Python, and JSP.
• PDF: This isn’t really a web technology as such, although you find it on the Web a lot. It is a format created by Adobe that is good for publishing documents you want to keep as read-only, ie you just want people to read them, and not alter them. They require a special program or plugin to view.
• Flash: Flash is a technology delivered in the form of objects embedded in web pages (termed movies), which need a special plugin to view. Flash is good for delivering certain types of content, such as video, animations, and banner adverts, and can sit nicely alongside web standards, but it is terrible for creating entire sites in, and can be rather inaccessible to people with disabilities (ok, so client-side web standards content can be inaccessible too if done badly, but I’d argue that web standards are easier to make accessible than Flash).
• Silverlight: This is kind of Microsoft’s answer to Flash — a technology created recently to provide dynamic content for web sites. It has many of the same advantages and disadvantages as Flash.

HTML, CSS, and JavaScript

There are many standards maintained by the W3C, but the three you should start off learning are HTML, CSS, and JavaScript, in that order (they get harder to learn in this order, and it is fairly logical to learn them in this order too).

• HTML: This is a markup language that you use to structure your content — it uses a system of elements that you wrap around various bits of content to give them meaning. View the source of this document now — Right-click (Ctrl + click on Mac) and select View source or similar depending on what browser you are using — and look at how the different elements define paragraphs, headings, lists, etc.
• CSS: A rule-based language that you use to style your web page — you can for example select a specific type of element and choose to alter font size, colour, or position on the page.
• JavaScript: A scripting language that allows you to apply dynamic behaviour to sections of your web page, for example allowing you to drag and drop sections, animate things, make things fade in and out, or change styling on the fly.

In general, you should keep your content, style, and behaviour information separate in these three layers, and follow best practices as outlined in my web standards curriculum course. For example, you can add styling information directly to HTML using <font> elements and inline CSS inside <style> elements, but it’s generally better to not do so. In the next issue I’ll talk about this and other benefits of using web standards and associated best practices to create your web sites — accessibility, flexibility and ease of maintenance, search engine optimization, etc.