XML: A Primer:HTNL and CSS: WYSIWYG Pages

Table of Contents

These kinds of changes made designers extremely unhappy. Used to WYSIWYG tools, they quickly demanded stronger, more consistent formatting controls. The FONT element gave them many of the tools they wanted, whereas tables, frames, and new attributes for wrapping text around graphics made it easy to place that formatted text more precisely where they wanted it to go. Best of all (apart from some cross-platform font issues), the browsers would render the pages nearly identically. The following code uses formatting codes rather than logical codes to produce text somewhat similar to that of the previous example.

  <HTML>
  <HEAD><TITLE>Formatted Document, later
  HTML</TITLE></HEAD>
  <BODY BGCOLOR="#FFFFFF">
  <FONT FACE="Arial, Helvetica"
  SIZE=7><B>Introduction to HTML</B></FONT>
  <FONT FACE="Arial, Helvetica" SIZE=3>
  <P>This page has been created with specific
  formatting tags instead of logical tags.</P>
  <P>Since we'd like to specify text like we could
  in QuarkXPress, we'll use bold for <B>emphasis</B>
  where appropriate, italic for <I>citations</I>
  when necessary, and maybe highlight a <FONT
  FACE="Courier"><B>variable</B></FONT> with bold
  Courier. We can also indicate code listings with
  Courier:</P>
  </FONT><FONT FACE="Courier" SIZE=2>
  10 PRINT "HELLO WORLD"<BR>
  20 END<BR>
  </FONT>
  </BODY></HTML>

This time, the document looks nearly identical in Netscape (see Figure 2.3) and Internet Explorer (Figure 2.4). All the fonts are the same size, all the formatting is identical, and we don’t need to worry about as much variation across browsers.

Figure 2.3 Explicit formatting with Netscape Navigator 3.0.

Figure 2.4 Explicit formatting with Internet Explorer 3.0.

As convenient as this may be, it has some unfortunate side effects and doesn’t completely address all aspects of page design. Our simple example didn’t really abuse HTML, but pages that use tables and documents exported from traditional WYSIWYG document creators (Microsoft Word, for instance) can end up with a profusion of FONT elements that sometimes take up more space than the actual content. They don’t address all aspects of page layout, which is another giant problem they pose for designers. Netscape and Microsoft still address many layout issues, especially whitespace, in different and uncontrollable ways. Tag-based formatting isn’t enough.

Structured Formatting: Cascading Style Sheets

As part of a general effort by the W3C to return HTML to its more structured past and to address the needs of Web designers for whom control of overall appearance is the largest roadblock to effective Web use, the W3C released the Cascading Style Sheets Level 1 specification in late 1996. Microsoft jumped on the bandwagon immediately, implementing some CSS features in Internet Explorer 3.0 and adding considerably more robust functionality in 4.0. Netscape, which has proposed its own competing JavaScript Style Sheets standard, has also lined up behind CSS, implementing much of it in Netscape Communicator 4.0.

None of the browsers currently available from Microsoft or Netscape allow developers to assign styles to XML elements. This book will explore how to use XML and styles together, but keep in mind that you cannot just run these examples through a browser…yet. Because the XML specifications and other W3C standards refer frequently to Cascading Style Sheets, I will use style sheets to refer to CSS, rather than JavaScript Style Sheets, in this book. As we’ll see later in this chapter, CSS may not be around forever either. Competing proposals for formatting control are also on the agenda at the W3C, and many of them are based on existing SGML standards.

For our first style sheets demonstration, we’ll spruce up our earlier logical tag demonstration, providing specific formatting definitions for all the tags involved. It’s the same HTML we used before, with the addition of a simple STYLE element:

  <HTML>
  <HEAD><TITLE>Formatting with CSS, modifying
  standard HTML</TITLE>
  <STYLE TYPE="text/css"><!—
  H1 {font-family: Arial, Helvetica; font-weight:
  bold; font-size: 24pt}
  EM {font-weight: bold; font-style: normal}
  CITE {font-style: italic}
  VAR {font-family: Courier; font-weight: bold}
  CODE {font-family: Courier}
  LI {font-family: Arial, Helvetica}
  —></STYLE>
  </HEAD>
  <BODY>
  <H1>Introduction to HTML</H1>
  <P>This page has been created purely with logical
  tags. No additional formatting has been specified
  by the designers.</P>
  <P>While it might be nice to specify text like we
  could in QuarkXPress, we'll settle for applying
  <EM>emphasis</EM> where appropriate,
  <CITE>citations</CITE> when necessary, and maybe
  highlight a <VAR>variable</VAR> along the way. We
  can also indicate code listings:</P>
  <CODE>
  10 PRINT "HELLO WORLD"<BR>
  20 END<BR>
  </CODE>
  <P>Bulleted lists are easy too:</P>
  <UL>
  <LI>HTML Structures</LI>
  <LI>CSS Structures</LI>
  <LI>XML Structures</LI>
  </UL>
  <P>Numbered and lettered lists are also fun:</P>
  <OL>
  <LI>Item #1</LI>
  <LI>Item #2</LI>
  </OL>
  </BODY></HTML>

As you can see in Figures 2.5 and 2.6, we have considerably more control over the appearance of this document in both Netscape Communicator 4.0 and Internet Explorer 4.0. (Earlier browsers, except Internet Explorer 3.0, will ignore the STYLE element because we placed comments around its content. Internet Explorer 3.0 will interpret the tags but won’t let them override what it plans to do with the tags, resulting in bold italic for the EM tag, for instance.)

Figure 2.5 Simple style sheet in Netscape Communicator 4.0.

Figure 2.6 Simple style sheet in Internet Explorer 4.0.

Table of Contents