Later in the book, you will learn exactly what the rules of XHTML are, and how CSS works to add striking designs to structured content. But for now, it is only necessary that you understand that standards-based Web design consists of three primary components. Web standards guru Jeffrey Zeldman describes these components as structure (XHTML), presentation (CSS), and behavior (JavaScript). 4 JavaScript is formally known as ECMAScript, as the standard is issued by ECMA (formerly the European Computer Manufacturers Association, but which now goes only by the acronym ECMA). But JavaScript is the generic name that Web designers use (also, people confuse this point often: “Java” is not short for JavaScript, but an entirely different language).
A standards-based Web page, then, is made up of three separate parts:
• Structured content in pure XHTML (e.g., a hyperlink in a site’s navigation)
• Visual (and even audible) design in CSS (e.g., the styling of the hyperlink in the site’s navigation)
• Advanced functionality and enhancement in JavaScript (e.g., providing a short preview of the page the navigation hyperlink links to)
The JavaScript component that Zeldman labels “behavior” I prefer to call “performance.” I do this because how a Web page performs, both with and without JavaScript, is an essential part of solid Web design.
And page performance includes factors such as user viewing prefer- ences and computer speeds, which tend to fall outside of what would normally be considered “behavior.” So the three-pronged approach to Web design described in subsequent chapters emphasizes structure, pre- sentation, and performance.
Structure: The XML Recommendation and the Birth of XHTML
In February 1998, the W3C issued the fi rst recommendation for Ex- tensible Markup Language (XML). 5 XML is one of the more widely
40 HOW TO DESIGN AND WRITE WEB PAGES TODAY
supported standard Web languages in existence. But despite being called a language, XML is actually a standard set of rules for creat- ing other languages (called “applications,” in XML-speak) that enable people and computer applications to share structured content with one another.
The most important XML application for Web purposes is XHTML 1.0, which appeared as a W3C recommendation in January 2000. 6 XHTML is the HTML language rewritten according to XML’s rules.
In many ways, HTML and XHTML are the same language. But XML’s rules are much simpler and more consistent than SGML’s, the language from which the original HTML was created.
This book promotes the use of XHTML (specifi cally, XHTML 1.0 Strict) and only refers to “HTML” in historical senses (although see the sidebar “HTML5”).
In addition to drawing upon XML’s simplicity and consistency, XHTML also refl ects the spirit of XML, which is to provide structured information, free from any visual presentation. Old practices in writing HTML resulted in messes like:
<FONT face="Arial, Helvetica, sans-serif"
color=#cc6600 size=7>
The World Wide Web
</FONT>
HTML5
There is a new specifi cation for HTML in development, called HTML5.* It is in- tended to be the successor to HTML 4.01. What is interesting about HTML5 is that its specifi cation originated in 2004 outside of the W3C by a group that dubbed itself the Web Hypertext Application Technology Working Group (or WHATWG).
Although it is possible to write pages in HTML5, the specifi cation is still largely in development.** Learning XHTML 1.0, as this book advocates, will prepare you to pick up HTML5 later, if you decide to use it rather than XHTML 1.0. There are also HTML5 resources on this book’s companion site, http://sustain ablewebdesign.com/book/ .
*W3C, “HTML5: A Vocabulary and Associated APIs for HTML and XHTML,” http://www.w3.org/
TR/html5/
**WHATWG, “FAQ,” http://wiki.whatwg.org/wiki/FAQ
STANDARDS-BASED WEB PAGES 41 Here it is, rewritten according to the rules of XHTML:
<h1>
The World Wide Web
</h1>
XHTML is used to do nothing more than provide meaningful structure to all of a page’s text content and any media elements such as images, audio, and video. The “Strategies for Success” portion of this book of- fers guidance in building structured content in XHTML.
Presentation: Widespread Browser Support for CSS
Visual design used to be handled in nonstandard HTML “tag soup,”
as seen above. To add the fonts, color, and size from the old “tag soup”
HTML, Web designers now write with the CSS design language, often in a separate fi le:
h1 {
color: #C60;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
}
One thing that makes CSS a better alternative to HTML-based design is that CSS can completely change the look of a site without a designer having to rewrite the site’s XHTML. The most famous dem- onstration of this is the CSS Zen Garden. 7 The Zen Garden is a show- case of CSS-based designs, all of which use the exact same XHTML.
Have a look; you’ll be amazed.
CSS also allows you to control the look of your entire site from one CSS fi le. Changes to that fi le—for example, changing headings to ap- pear in purple rather than red—are instantly refl ected across your en- tire site. To redesign a site involves nothing more than changing the CSS fi le. This also makes sites load faster: the CSS instructions only have to be downloaded once, which helps Web browsers build your pages in the browser window very quickly.
And CSS can change more than just the visual design of a page on screen. CSS can also be used to specify how a page looks when printed, removing needless items like site navigation or making visible detailed copyright information. CSS can be used for assistive technologies, too.
42 HOW TO DESIGN AND WRITE WEB PAGES TODAY
Special CSS properties exist for changing how a Web page sounds when it is read aloud. That is why CSS can be said to handle “presentation,”
which includes the more specifi c term “visual design.” However, in this book, CSS is limited primarily to visual design for screen and print. For more on CSS, see Chapter 10.
Performance: JavaScript and the DOM
In standards-based Web design, JavaScript works primarily with the Document Object Model (DOM) to change what happens when a link is clicked, to reveal hidden parts of a navigation bar, or even to change a page design for extremely widescreen views of pages. JavaScript coupled with the DOM is often called “DOM Scripting,” a term that this book will use. For more about JavaScript and the DOM, see Chapter 19.
NEXT STEPS
Now that you have some sense of where Web standards came from and why they are necessary for Web designers to know, the next chapter prepares you to write and design by helping you set up a custom writing, design, and publishing environment that supports writing and design- ing with Web standards.
NOTES
1 . The Web Standards Project, http://webstandards.org
2 . Tim Berners-Lee with Mark Fischetti, “Competition and Consensus,”
Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web (New York: HarperBusiness, 2000), 103–21.
3 . Berners-Lee, Weaving the Web , 91–93.
4 . Jeffrey Zeldman, Designing with Web Standards , 2nd ed. (Berkeley, CA:
New Riders, 2007), 53–57.
5 . W3C, “Extensible Markup Language (XML) 1.0,” http://www.w3.org/
TR/1998/REC-xml-19980210
6 . W3C, “XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition): A Reformulation of HTML 4 in XML 1.0,” http://www .w3.org/TR/xhtml1/
7 . CSS Zen Garden, “The Beauty in CSS Design,” http://www.csszengar den.com/
C H A P T E R 5
Preparing to Write and Design
Designing and writing Web pages isn’t a job for one piece of software;
instead, you will want to set up an entire environment for building your site. Although you will have to purchase a domain name and Web hosting, almost everything else you need to start writing and designing Web pages can be downloaded from the Internet for free.
But don’t let the free price tag fool you into thinking that “free”
means lower quality than expensive software. Some of the best Web development tools—such as the Firefox Web Developer Add-on,1 the Notepad++ editor,2 and the XAMPP Web server,3 all of which you can run on a USB drive—are available for free and are better than their for- pay counterparts. Or, as with the Web Developer Add-on, simply have no for-pay counterparts.