Web design: history & context
What is HTML?
The HyperText Mark-up Language is a method of describing the structure of a document to a kind of program called a web browser. You type in your content, then you mark up sections of it as being headers, paragraphs, etc. Then you add your images and tables, just like a Word document. Web documents are different in three major ways, though:
- The layout of your document is described by one or more separate documents called "Style sheets". This is the greatest difference between the way most people use word processors like Microsoft® Word and the way that web documents are written: instead of saying "this bit is bold", and "this big is bigger and coloured blue", you use HTML to say "this is a sub-header", "this is the page title", and "this is a copyright warning", and then you write a style-sheet that says, "sub-headers are bold and blue, the page title goes up here in the top left of the screen, and the copyright warning has a yellow background and black text".
- Your HTML documents can connect to other documents and files anywhere in the world by creating links.
- HTML documents aren't just viewed by the same program in the same way as they're written, like Word documents. Hundreds of different kinds of program read and interact with HTML documents, each with their own capabilities, limits and environment; standard desktop PCs, printers, braille or talking devices for the blind, mobile phones and PDA devices all read the same HTML document and present the information in their own ways.
HTML files are plain text files with your text content "marked up" with HTML tags. Inside your HTML file you type all the text that appears on a web page, and also include instructions to the web browser such as "download this image and show it on the page here". It's important to remember though that most of an HTML document is your content.
Because HTML files are plain text, you can write them in any text editor (like Windows Notepad or Simpletext on the Mac) as well as in a variety of specially adapted programs including WYSIWYG editors such as Macromedia's Dreamweaver or Allaire's Homesite. The strength of these packages is that they allow you to deal with entire sites rather than simply single documents, however the majority of these tools also (like Word) mix layout and content in the same file which makes your site a lot less flexible when it comes to maintaining it or making it available to non-standard devices. You'll see as the tutorial progresses that HTML can be written very plainly, very simply without the need for expensive packages, and the understanding of the language gained by hand-coding will make you a better web designer.
HTML evolution & the "browser wars"
HTML started off fairly unobtrusively at CERN during the early 90s and was intended to provide a way to link related research papers and to create a "web" of information. It soon grew beyond that, though, as various people found that HTML was incredibly versatile, but the standard at the time, HTML 0.9 was severely limited in what it could do. Browsers at the time simply displayed headers, paragraphs, links and some presentational markup like bold and italic. When the Mosaic graphical WWW browser was written by the NCSA, it allowed for coders to include images on the same page as the HTML document rather than just linking to them like any other document, and when a group of programmers from the Mosaic team created their own program called Netscape Navigator, HTML and the web really took off.
Tim Berners-Lee originally intended HTML to remain purely "semantic", like the SGML language he had based it on, and for all presentation and layout to be handled by style-sheets, but the style-sheet specification was a long way off and with Netscape's introduction of the TABLE tag for grids of data (like Excel Spreadsheets), designers had found a sneaky way to (fairly) precisely place parts of the document anywhere they pleased. When the Cascading Style-Sheet specification was finally ready to take over the job of laying out an HTML document on the screen, the web browser market was a cut-throat industry. Microsoft (who right up until mid 1995 had said that they weren't interested in the Internet) made a deal with Spyglass, the company that had made a popular windows version of the original NCSA Mosaic graphical web browser and built Internet Explorer on top of it to compete with the very-much dominant Netscape, now its own company with a fully-fledged browser "suite" called Communicator. As each company put forward its own new features and the HTML standards struggled to keep up (frames, marquees, layers), the web exploded in size as advertisers and corporations noticed that the Internet was big business. The web was an untidy mess of conflicting standards and unsupported features as the new Internet industry suffered a gold-rush.
The W3C published the 4th version of the HTML specification in 1998 in an effort to clean up the standard and to raise the profile of style-sheets, which offered a multitude of advantages to browsers that supported them. Unfortunately Netscape Navigator 4's support for style-sheets was patchy and broken, Internet Explorer 2 and 3's support was nonexistent, and these were the cutting edge browsers of the time; many companies and schools had slow-moving IT departments that required months of testing before they brought in new versions, and therefore were still using old-style browsers. Style-sheets were slow to pick up because documents that used them looked bare and unappealing in browsers that couldn't understand or didn't load style-sheets. Businesses and hobbyists continued to use table-based layouts for many years (and still do at the time of writing).
Style-sheets & Standards: the new way
Today, however, support for style-sheets in our now-ubiquitous web browsers has grown almost to saturation point. All the major desktop browsers support enough of the CSS specification to display crisp, clean pages at a time when layouts that are less busy and more flexible are coming back into fashion. Furthermore, the "new way" of style-sheet-based web design offers real advantages to web designers under pressure to produce and maintain ever more pages. As the only popular browser that doesn't properly support CSS (Netscape Navigator 4) fades into obscurity, the combination of widespread support for standards, and diversification in the way we use browsers has made the use of style-sheets in web design essential. The major advantages include:
- Browsers aren't just on the desktop any more.
- PDAs, mobile phones, printers, braille and text-to-speech devices are just some of the things that are becoming Internet capable, and they all have their own special limits. Small-screen devices can't display table-based layouts without scrolling or ignoring the grid format entirely (and potentially getting content in the wrong order), printers have to split content into separate pages, and text-to-speech devices often get confused inside deeply layered tables. HTML 4 with CSS on the other hand, marks up code in a logical order so that even if the style-sheets don't load, the content is readable to devices such as mobile phones and braille displays. HTML also allows for different style-sheets to load for different media, such as small-screen mobile devices, text-to-speech readers, printers and projectors, allowing designers to create documents that display on a variety of devices without having to maintain multiple documents.
- The long arm of the law
- In the US, the Rehabilitation Act amendment of 1998 introduced additional legislation called "Section 508" that demanded that federal government services on the Internet be accessible to people with disabilities including visual impairments. Section 508, and the W3C's newly formed Web Accessibility Initiative gave strict guidelines for government-funded businesses to adhere to. Web designers had to start thinking of alternative, flexible ways to lay out their documents.
- Maintainability
- Wired News recently updated their site to use a style-sheet-based layout. Perhaps the most important advantage of using style-sheets for them was that they had literally thousands of pages to update and look after, and by using style-sheets, Wired can update the look of their entire website by simply modifying the style-sheet. In fact, Wired now use style-sheets to change the colour of their website according to the day of the week. Style-sheets now offer far more control over the look of a web page than using plain HTML ever did, and they do so in a way that benefits everyone, from designer to browser manufacturer, to end-user.
Need more convincing? Style-sheet-based web sites are easier to write so you can spend more time on what you're saying than how it looks. They load faster because browsers only need to load one style-sheet for the whole site and your HTML has a far more simple structure and fewer tags. And they cost you less if you have to pay for bandwidth (on busy sites, this is a real incentive, but if you're a hobbyist you probably won't notice the difference).