XML and IE5, Part 7

by Richard G. Baldwin
baldwin@austin.cc.tx.us
Baldwin's Home Page

Dateline: 2/11/00

 

 

Recap from previous weeks:  In my previous articles I have been introducing you to the use of Microsoft IE5, as a viewer for XML files. 

 

Objective:  The primary objective of this series of articles is to show you how to create XML files and associated style sheets that can be successfully browsed using IE5.

 

CSS:  I have written several articles discussing Cascading Style Sheets (CSS).  Last week, I introduced you to the use of CSS with XML and IE5. 

 

CSS and HTML:  In an earlier article, I showed you how to write a simple HTML file containing a cascading style sheet.  In that article, I showed you some screen shots of my Netscape 4.7 browser using the style sheet to render the HTML file.

 

Converted HTML to XML:  Last week, I converted that HTML file into an XML file.  I used IE5 to render the XML file using the same style sheet that I developed in the earlier article.  That allowed us to make a direct comparison between the rendering for the HTML and XML approaches.

 

Embedded style sheets:  In earlier articles, I included the style sheet in the actual HTML file (although I could have separated it out).  Last week, I separated the style sheet from the XML file and placed it in a separate file.

 

Three cases:  When you load an HTML or XML file into IE5, the following three cases can exist relative to a particular element in the file:

 

 

The behavior of IE5 is considerably different for these three cases, depending on whether the file is an HTML file or an XML file.

 

Case 1 with HTML: If there is no style sheet, the element is rendered according to the default rendering style for that type of element.  This is probably what you have been accustomed to seeing most of the time since you first started browsing the web.

 

Case 2 with HTML:  If there is a style sheet, but that style sheet doesn’t specify a rendering style for that particular element, it is rendered exactly as in Case 1.  In other words, that particular element is rendered exactly as if there were no style sheet.

 

Case 3 with HTML:  If there is a style sheet and it specifies a rendering style for that particular element, it will be rendered according to the specified rendering.

 

The differences:  IE5 doesn’t behave the same way for these three cases when an XML document is loaded into the browser.

 

Case 1 with XML: This is an easy one.  If there is no style sheet, the entire XML file is rendered as a tree, as shown in the following screen shot from an earlier article.

This is definitely not what you have been accustomed to seeing most of the time since you first began browsing the web.

 

Case 2 with XML:  This is an interesting case.  If there is a style sheet, but that style sheet doesn’t specify a rendering style for that particular element, unlike with HTML, it is not rendered exactly as in Case 1.  In other words, that element is not rendered in the tree format that you would see if there were no style sheet.  How is it rendered?  We will see the answer to that question shortly.

 

Case 3 with XML:  This is also an easy one.  If there is a style sheet and it specifies a rendering style for that particular element, it will be rendered according to the specified rendering style.

 

Back to Case 2 for XML:  Now let’s take a look at the interesting case where there is a style sheet, but it doesn’t specify a rendering for a particular type of element. 

 

Create a style sheet file:  Begin by using your text editor to create a file named aa021100-a.css containing the style sheet text shown below.

 

.classDemo { color: green}

#idDemo { color: blue }

 

Although short, this is a valid style sheet.  In fact, it is part of the style sheet that I used for demonstration purposes in the article last week. 

 

Create an XML file:  Now use your text editor to create an XML file named aa021100-a.xml containing the following XML text (without the boldface). 

 

If you haven’t read the article from last week, don’t be concerned about the fact that the element names in this XML file are what you normally see in an HTML file.  I converted a well-formed HTML file to produce this XML file and didn’t bother to change the element names. 

 

Note in particular the second and third lines (shown in boldface) that specify the file that you created above as the style sheet for this XML file.

 

<?xml version="1.0"?>

<?xml-stylesheet type="text/css"

href="aa021100-a.css"?>

<html>

 

<body>

<h3>This is a header of the h3

variety</h3>

<p>This is a paragraph.</p>

<h2>This is an h2 header</h2>

<h3>This is another h3 header</h3>

<p>This is another paragraph.</p>

 

<h2 class="classDemo">

This is an h2 header modified by

the classDemo class

</h2>

 

<p id="idDemo">

This is a paragraph modified by

the idDemo ID.</p>

 

</body>

</html>

 

Only two elements are covered:  The important thing to note here is that only two of the elements in this XML file (partially shown in boldface) match the rendering specifications in the associated style sheet.  Even in those two cases, the rendering specification simply specifies a change in color.  Nothing about typeface, font size, or physical location is specified in the style sheet.

 

Here is a screen shot showing what this XML file looks like when rendered in IE5 using the style sheet shown earlier.

Not a tree:  As you can see, this is definitely not a tree format, so it doesn’t match the IE5 default formatting that is used when no style sheet is specified. 

 

That’s a wrap:  That is enough for this week.  I am going to let you ponder this until next week when I will discuss it further.  So, until next week, that’s a wrap.

  

Coming attractions...

 

Next week, I plan to continue the discussion from above.

 

In subsequent lessons, I will discuss the use of XSL style sheets with XML.

 

The XML octopus

Trying to wrap your brain around XML is sort of like trying to put an octopus in a bottle. Every time you think you have it under control, a new tentacle shows up. XML has many tentacles, reaching out in all directions. But, that's what makes it fun. As your XML host, I will do my best to lead you to the information that you need to keep the XML octopus under control.

 

Credits

This HTML page was partially produced using the WYSIWYG features of Microsoft Word 2000. The images on this page were used with permission from the Microsoft Word 97 Clipart Gallery.

Copyright 2000, Richard G. Baldwin

About the author

Richard Baldwin is a college professor and private consultant whose primary focus is a combination of Java and XML. In addition to the many platform-independent benefits of Java applications, he believes that a combination of Java and XML will become the primary driving force in the delivery of structured information on the Web.

Richard has participated in numerous consulting projects involving Java, XML, or a combination of the two.  He frequently provides onsite Java and/or XML training at the high-tech companies located in and around Austin, Texas.  He is the author of Baldwin's Java Programming Tutorials, which has gained a worldwide following among experienced and aspiring Java programmers. He has also published articles on Java Programming in Java Pro magazine.

Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.

baldwin@austin.cc.tx.us
Baldwin's Home Page

-end-
 
 
 

 

rev0001170838