introduction

in the beginning . . .

The web is still relatively new, but it has matured quite a bit since, in 1991, Tim Berners-Lee first posted the specifications for HTML (how to code web pages), HTTP (how to transfer them), and UDIs (how to find them, now URLs). The problem was that HTML was designed as a way to markup the content of a document and earlier browsers could display this content to users. All this stuff was primarily meant for scientists and researchers, and little thought was given to presentation and graphics.

Though HTML was meant as a structural language, regular users creating websites wanted to be able to change fonts, add colors and do fancy layouts on their pages - things that engineers usually don't care so much about. So, we started hacking new things into the HTML spec, including <font> tags and properties such as align, size, bgcolor, etc. Each of these had nothing to do with the content of the page, only it's appearance.

While it made logical sense to wrap a <font> tag around an area of text if you wanted to change it, what you ended up with were hundreds or thousands of font tags across as website specifying mostly just a few font variations. After you had finished the design your boss might say that the text was too small and you were forced to go back and change them all, a time-consuming process.

And oh!, the tables! Tables have just gotten so far out of hand that people don't realize that their name indicates what they should be used for - tabular data. Someone creating a website for their cat on Geocities wanted their page to have columns, a presentational aspect that HTML didn't provide for. "Wait!", they thought, "Tables have columns, i'll just make each of my pages a table and throw all of the content into <td> elements!" It just snowballed from there and even the homepages of certain large companies had 50 or more tables on an individual page, just to try to accomplish a particular layout. Pages such as this quickly become unweildy, difficult to maintain, and inflexible. As we'll discuss more later, there is nothing wrong with tables themselves but problems arise when they are hacked and used for page layout.

What was needed was a formal way to specify how you wanted your html to be presented that was separated from the HTML itself. As we'll see, this capability was provided by Cascading Style Sheets.

skip a bit, brother

Another common, and extremely frustrating, problem was that different web browsers would render pages drastically different from one another. Browser companies would even create HTML or Javasript elements and usages that only their browser would recognize.

Thankfully, organizing bodies exist to attempt to define standards and reign in the lawlessness rampant on the web. In 1994 the World Wide Web Consortium (W3C) began publishing standards defining what exactly is legal with different document types and formats. These standards are actually called 'recommendations', mostly because there is no enforcement body that attempts to ensure that people code their documents properly and that browsers render them correctly.

Though definitely still not perfect, progress is definitely being made between browser developers to respect the W3C recommendations and render pages consistently.

three shall be the number thou shalt count

With formal document specifications in place it is now up to the developers to design sites properly. The design paradigm has begun to shift to more modular web development through content separation. Specifically, there are three areas of separation:

content

Usually HTML, XHTML or XML, this is the markup of the page that defines the information in the document. You can define where paragraphs, headers, etc. are and group related text, but no information should be coded here about the visual layout of the page.

style

The de facto standard for defining the appearance of a page is using Cascading Style Sheets (CSS). These can be embedded within HTML or in external files referenced by your pages.

functionality

Many pages need to be able to do more than just present text to the user. Javascript is commonly used to perform actions on the client-side, including common tasks such as form validation. It can allow pages to be much more interactive by allowing the user to dynamically change content without sending data back to the server.

Within your HTML pages you should code only the content of the document, using appropriate structural markup. You can then create stylesheets using CSS that tell the browser how to display the HTML content. Finally, a Javascript layer will add dynamic functionality so web pages aren't doomed to be static and non-interactive. The goal of this tutorial is to demonstrate the basics of these three levels of web development.

and there was much rejoicing

We now have a good foundation to start off with. We have the means of separating content, style, and functionality, and we have formal document specifications that browsers should respect so that our pages look the same regardless of browser used (we'll tackle issues with this last bit later). This separation will allow for faster development and our pages will be easier to maintain because they are much more modular. Also, when CSS is employed, the page sizes are usually much smaller, so they load faster and take up less bandwidth.

Talk, talk, talk. Let's see an example of separation of content and style.

I was recently asked to create a web template for the Botulinum Neurotoxin Resource Guide. After collecting some example content and getting a general sketch of what the user wanted the site to look like, I started by creating this HTML page.

BoNT resource guide template (unstyled)

Obviously that is a very simple page and, had I delivered only this, I would probably not get asked to do any more design work in the future. View the source code of the page (under the View menu on most browsers). If you are new to web development don't worry too much about the code specifics right now, but you should be able to see that most of the document is made up of either text that is visible on the rendered page or simple URL tags. It's a very simple, short page, even though it can hardly be called attractive.

This is the key to modular design. Because we didn't have to put any style information within this document, we are left with only the content and markup, which is very easy to maintain. Now, let's take that exact same HTML page and add a link to a stylesheet.

BoNT resource guide template (style 1)

This page is the exact same HTML as the previous one (view the source if you like) except we have added a link to a CSS stylesheet I wrote to give the desired layout, a single line of code within the HTML file. With this stylesheet we were able to transform the plain, dull page into something much better, specifying things such as colors, fonts, and layout. We turned the plain list of links into a tabbed navigation area. More as a proof of concept than anything else, we even added a scroll bar to the bottom-most section of text. CSS allows for a high-level of presentational control.

But what if you work long and hard coding an example for someone, and they hate it? Or they decide to use it, and after a year or so want something new. Using CSS, we can take the same HTML pages they have populated, apply a different stylesheet, and get a completely different layout.

BoNT resource guide template (style 2)

Again, the HTML between these three examples has not changed except for the line that says which stylesheet to use. The appearance, on the other hand, has changed a lot. The most obvious change is the color scheme, which is much more sedate and corporate-looking. Also, the entire content of the page is now restricted within a fixed-width box rather than expanding and contracting in a fluid manner with the window.

Hopefully these few examples have given at least a quick demonstration of the layout and presentational control that CSS brings. We'll be using CSS throughout this tutorial to control the style of our pages.

wrap it up, wrap it up ...

We've talked about the first two tiers of our three-tier strategy of web design, the content and the style. We'll wrap up by quickly mentioning the third, functionality, which allows us to make our pages interactive. This is done using Javascript.

With most other scripting methods, such as CGI or PHP, the code written by the developer is executed on the server and the results are pushed out to your browser (the client.) Javascript, on the other hand, allows the developer to write code to be executed while you are viewing the page on your machine. This is called client-side scripting and can be used to form validation, small animations, remote procedure calls (AJAX), dynamic page elements, HTML (DOM) manipulation and even change CSS definitions.

As a tiny example, clicking here will make the information box on the right change styles, while clicking here will make them change back again.

Javascript is a very useful way to do client-side scripting and its syntax is rather straight-forward. The trick is to learn the differences in the way each browser recognizes certain syntax in order to write code that will work across multiple platforms.

In the pages to come we'll explore all these topics in much greater detail. At the end of it all you should have all the tools you need to create pages that are elegant, modular, easy to maintain, and compatible across multiple browsers.