HTML, XHTML v. XML and XSL

So what are all these crazy acronyms and where did they come from? Here is a very brief history and description.

In the Beginning there was HTML (sort of)...

In the beginning there was only SGML (Standard Graphical Markup Language) which never became popular, possibly because it was so difficult to implement in its entirety. SGML was almost too powerful because it allowed you define your own markup language when all most of us wanted was just a mark up language -- any markup language that was already implemented. SGML might have been one of those great ideas that was just ahead of its time. However, when the physicists in Switzerland invented (what was to become) the World Wide Web (WWW or W3), they used SGML to define HTML (hypertext markup language) which did become very popular.

With HTML we use tags to define how we want our text displayed. For example, we might say <strong><big><blink>This text is really emphasized</blink></big></strong> to give the following results: This text is really emphasized. (Unfortunately, not all browsers implement the blink feature).

HTML worked great until you read Peter Lynch's books on investing in the NASDAQ and NYSE. Peter recommends you buy stocks when they reach their 52 week low and sell high. So you dutifully spend many hours each morning poking around on http://finance.yahoo.com trying to find stocks that have hit their 52 week low until one day you say "I'm going to write a program that will do this laborious chore for me!". So then you write a program called a robot which looks at the many thousands of stocks and deciphers the HTML to find the current price of the stock, and the 52 week low and creates a daily report of those stocks which are at their lowest point in a year. What a job!

At this point you really wish HTML had special tags with names such as <current_bid>232</current_bid> and <low52>200</low52>. HTML does not, of course. So, when the folks at yahoo make a minor change in the way they display the stock data, you are out of luck and you have to rewrite your program (which never did work on the other sites such as http://www.bigcharts.com or http://www.pcquote.com anyway).

XML to the Rescue!

At this point someone said, wow! I wonder if there are other robots out there extracting data? Well, yes, there are many business to business commerce programs that are using the WWW as a medium for their business transactions. And when the transactions are automated, the program might be called a robot and it is deciphering that HTML code just like our stock robot.

So, now we decided we really need SGML after all. http://finance.yahoo.com others could define their own industry specific tags like <current_bid> and then it would not matter how they displayed their data, we would just look for the tags we wanted. This is essentially what the eXtended Markup Language (XML) is. XML is a simplified version of SGML.

But what is XSL?

The problem with XML is that only defines data, not how to display it. This is remedied with XML Style Language (XSL). When we use XML to define the data in one file (typically with an extension of XML) and XSL to define how to format the data in a second file we receive a couple of powerful benefits:

We can use the same XSL file over and over again with many XML files which will guarantee consistency in formatting

We can translate the XML file into an HTML file so we can view it with a browser (such as Netscape or Internet Explorer). This is especially easy to do if the XML to HTML translator is built-into the browser (which is the case with Internet Explorer v5). To accommodate Netscape, we can use a separate program that dynamically translates from XML to HTML as needed. Microsoft and IBM provide such software that will execute inside the web server.

It now becomes much easier to write robot programs

So this may be interesting stuff to web page authors. But suppose you are the author of a spreadsheet program or a drawing program? Authors of these kinds of programs need to find a way to save all the data between sessions. They typically have very complex data structures. Now, with the additional of XML, you have three options:

	Create some proprietary format for storing the data in a flat file that only the program's author can understand
	Use some commercial database product that requires additional royalties
	Use XML (and optionally, XSL) to save the data and then anyone can read it.

Coming Full Circle: from XML/XSL back to (X)HTML

Now we finally come full circle: if XML/XSL allows us to define our own mark up language, can we re-invent HTML? Yes. That is what XHTML is. This means HTML is extremely similar to XHTML. The difference is that XHTML uses a standard XSL file to define the meaning to the HTML tags. This means the folks controlling the standard XSL file control how your document appears instead of Microsoft or Netscape. (The big problem with HTML is that your document sometimes looks a little different on different browsers). It also means that you can define your own XSL file to redefine how all your web pages look by merely changing one file.

XSLT: Translating XML to HTML

Users of Internet Explorer can experience a little XML demo: ../C_Plus_Plus.xml. Users of Netscape can try out the server-side XML to HTML automated translation: ../C_Plus_Plus.asp.

Sample XML File

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="course_collapsable_lists.xsl"?>
<document>
<title>C++ Programming</title>
<module>
<title>Type Safe C </title>
<description>
This module starts the beginner programmer out using a
subset of ANSI C and C++ known as Type Safe C.
</description>
<prereq>Some programming experience with a language such as
Pascal, Visual Basic, C or Ada.
</prereq>
<ul>
<li>Data Abstraction</li>
<li>C++ As Better C
<ul>
<li>Dialects of C</li>
<li>The Preprocessor</li>
<li>Stream I/O</li>
<li>String Streams</li>
</ul>
</li>
</ul>
<module>
<title>Lunch Menu</title>
<ul>
<li>ice cream</li>
<li>popsicles</li>
</ul>
</module>
</module>
<module>
<title>Type Safe C for Experienced C++ Programmers</title>
</module>
<module>
<title>Class User Programming and the Standard Library</title>
<p>Ditto the first day.</p>
</module>
<module>
<title>Class Provider Programming</title>
<p>Ditto the first day.</p>
</module>
<module>
<title>Advanced Techniques</title>
<p>Ditto the first day.</p>
</module>
</document>

Sample XSL File

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<HEAD>
<TITLE><xsl:value-of select="document/title"/></TITLE>
<STYLE TYPE="text/css">
H1,H2 {FONT-FAMILY: sans-serif; FONT-STYLE: normal; FONT-WEIGHT: bold}
OL LI {list-style: upper-roman}
OL LI LI {list-style: upper-alpha}
#lItem0 { position:absolute; }
#lItem1 { position:absolute; }
#lItem2 { position:absolute; }
#lItem3 { position:absolute; }
#lItem4 { position:absolute; }
#lItem5 { position:absolute; }
#lItem6 { position:absolute; }
#lItem7 { position:absolute; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="list.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function init() {

var width = 350, height = 22;
myList = new List(true, width, height, "#CCCCCC");
myList.addItem("This is an netscape compatible collabsable list");
myList.addItem("Click on the arrows");
subList = new List(false, width, height, "#CCCCCC");
subList.addItem("This is a sub item!");
subsubList = new List(false, width, height, "#CCCCCC");
subsubList.addItem("Sub-sub list item");
subList.addItem(subsubList, "A sub sub list");
myList.addList(subList, "Some sub-items:");

/*<xsl:apply-templates select="document/module" mode="collapsable_list"/>*/

myList.build(210,430);
}
</SCRIPT>
</HEAD>
<BODY LANGUAGE="JavaScript" ONLOAD="init();"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>

<p><img src="images/logo.gif"
alt="[Company Logo Image]" border="0" width="120" height="24"/>
<img border="0" src="images/SIGNITEK_4COLOR_LOGO.gif" width="192" height="163"/><img border="0" src="images/two_color_signitek.gif" width="190" height="163"/> </p>

<p>
<a href="./"><img src="_derived/home_cmp_zero110_gbtn.gif" width="95" height="20" border="0" alt="Home" align="middle"/></a> <a href="xml.htm"><img src="_derived/up_cmp_zero110_gbtn.gif" width="95" height="20" border="0" alt="Up" align="middle"/></a> <a href="feedback.htm"><img src="_derived/feedback.htm_cmp_zero110_gbtn.gif" width="95" height="20" border="0" alt="Feedback" align="middle"/></a> <a href="toc.htm"><img src="_derived/toc.htm_cmp_zero110_gbtn.gif" width="95" height="20" border="0" alt="Contents" align="middle"/></a> <a href="search.htm"><img src="_derived/search.htm_cmp_zero110_gbtn.gif" width="95" height="20" border="0" alt="Search" align="middle"/></a>
</p>
<p>
<img src="_derived/server_side_xsl.htm_cmp_zero110_bnr.gif" width="580" height="60" border="0" alt="Server Side XSL"/>
<br/>

</p>

<DIV ID="lItem0" NAME="lItem0"></DIV>
<DIV ID="lItem1" NAME="lItem1"></DIV>
<DIV ID="lItem2" NAME="lItem2"></DIV>
<DIV ID="lItem3" NAME="lItem3"></DIV>
<DIV ID="lItem4" NAME="lItem4"></DIV>
<DIV ID="lItem5" NAME="lItem5"></DIV>
<DIV ID="lItem6" NAME="lItem6"></DIV>
<DIV ID="lItem7" NAME="lItem7"></DIV>

<H1><xsl:value-of select="document/title"/></H1>

<DIV STYLE="border:1px solid black; padding:.5em; FONT-SIZE: small;">
<H4>Table of Contents (Automatically generated by XSL)</H4>
<xsl:for-each select="document/module">
<DIV STYLE="margin-left:1em">
<A>
<xsl:attribute name="HREF">#<xsl:eval>uniqueID(this)</xsl:eval>
</xsl:attribute>
Module <xsl:eval>formatIndex(childNumber(this), "1")</xsl:eval>.
<xsl:value-of select="title"/>
</A>
</DIV>
</xsl:for-each>
</DIV>

<xsl:apply-templates select="document/module" mode="body"/>

</td></tr></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td valign="top" width="1%">

<p><img src="images/undercon.gif"
alt="[Under Construction]" border="0" width="40" height="38"/></p>

<p>

</p>

</td><td valign="top" width="24"></td><td valign="top">

</td></tr></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td>

<p><nobr>[&nbsp;<a href="./">Home</a>&nbsp;]</nobr> <nobr>[&nbsp;<a href="xml.htm">Up</a>&nbsp;]</nobr></p>

<h5>

Send mail to <a href="mailto:sh@SIGNITEK.com">webmaster@SIGNITEK.com</a> with
questions or comments about this web site.<br/>

</h5>

</td></tr></table>
</BODY>
</HTML>
</xsl:template>

<xsl:template match="module" mode="body">
<DIV>
<H2>
<A>
<xsl:attribute name="NAME"><xsl:eval>uniqueID(this)</xsl:eval></xsl:attribute>
Module <xsl:eval>formatIndex(childNumber(this), "1")</xsl:eval>.
<xsl:value-of select="title"/>
</A>
</H2>
<xsl:apply-templates />
</DIV>
</xsl:template>

<xsl:template match="module/module" mode="body">
<DIV>
<H3><xsl:value-of select="title"/></H3>
<xsl:apply-templates mode="body"/>
</DIV>
</xsl:template>

<xsl:template match="module/description" mode="body">
<P><xsl:apply-templates mode="body"/></P>
</xsl:template>

<xsl:template match="module/prereq">
<P><b>Prerequistes: </b><xsl:apply-templates mode="body"/></P>
</xsl:template>

<xsl:template match="p" mode="body">
<P><xsl:apply-templates mode="body"/></P>
</xsl:template>

<xsl:template match="ul" mode="body">
<UL>
<xsl:for-each select="li">
<LI><xsl:apply-templates mode="body"/></LI>
</xsl:for-each>
</UL>
</xsl:template>

<xsl:template match="module/module" mode="collapsable_list">


</xsl:template>

<xsl:template match="module/description" mode="collapsable_list">
<P><xsl:apply-templates mode="collapsable_list"/></P>
</xsl:template>

<xsl:template match="module/prereq">
<P><b>Prerequistes: </b><xsl:apply-templates mode="collapsable_list"/></P>
</xsl:template>

<xsl:template match="p" mode="collapsable_list">
<P><xsl:apply-templates mode="collapsable_list"/></P>
</xsl:template>

<xsl:template match="topics" mode="collapsable_list">
<OL>
<xsl:for-each select="topic">
<LI><xsl:apply-templates mode="collapsable_list"/></LI>
</xsl:for-each>
</OL>
</xsl:template>

<xsl:template match="emph">
<I><xsl:apply-templates /></I>
</xsl:template>

<xsl:template match="text()"><xsl:value-of /></xsl:template>

</xsl:stylesheet>

Sample ASP file to translate XML to HTML on the Server

<%@ LANGUAGE = JScript %>
<%
// Parse error formatting function
function reportParseError(error)
{
var s = "";
for (var i=1; i<error.linepos; i++) {
s += " ";
}
r = "<font face=Verdana size=2><font size=4>XML Error loading '" +
error.url + "'</font>" +
"<P><B>" + error.reason +
"</B></P></font>";
if (error.line > 0)
r += "<font size=3><XMP>" +
"at line " + error.line + ", character " + error.linepos +
"\n" + error.srcText +
"\n" + s + "^" +
"</XMP></font>";
return r;
}

// Runtime error formatting function
function reportRuntimeError(exception)
{
return "<font face=Verdana size=2><font size=4>XSL Runtime Error</font>" +
"<P><B>" + exception.description + "</B></P></font>";
}

// Set the source and stylesheet locations here
var sourceFile = Server.MapPath("C_Plus_Plus.xml");
//rsh
var styleFile = Server.MapPath("course_collapsable_lists.xsl");

// Load the XML
var source = Server.CreateObject("Microsoft.XMLDOM");
source.async = false;
source.load(sourceFile);

// Load the XSL
var style = Server.CreateObject("Microsoft.XMLDOM");
style.async = false;
// rsh
style.load(styleFile);
// style.load("course_collapsable_lists_xsl.asp");

if (source.parseError.errorCode != 0)
result = reportParseError(source.parseError);
else
{
if (style.parseError.errorCode != 0)
result = reportParseError(style.parseError);
else
{
result = source.transformNode(style);
}
}

Response.Write(result);
%>