﻿<?xml version="1.0" encoding="utf-8" ?> 
<?xml-stylesheet type="text/xsl" href="demo.xsl" ?>
<courses name="Fawcett">

  <!-- everything in head, e.g., titles, styles, and scripts, go here -->
  <btitle>Demo XML</btitle>
  <theme src="demo.css" />

  <!-- everything in body goes from here to bottom -->
  <visible>
  <title>Demonstration Page</title>
  <revised>21 May 2003</revised>
  
  <hilight>
    <ifile title="demo.xsl">demo.xsl</ifile>&#32;
    <ifile title="demo.css">demo.css.txt</ifile>&#32;
    <ilink title="TopXML">www.TopXML.com/xsl</ilink>&#32;
    <html><a href="#contents">Contents</a></html>&#32;
  </hilight>

  <image src="demo.jpg" size="200" />
  <caption></caption>

  <quote source="Albert Einstein (1879-1955)">
    Not everything that can be counted counts, and not everything that counts can be counted.
  </quote>

  <html><a name="contents"/></html>
  <section title="Notes:">
    The web page you are viewing has been rendered using <ifile title="four files">xslProc.vsd</ifile>:
    <olist>
      <litem>
        <u>demo.xml</u><br/>
        Holds the content of the page - its text and images.
      </litem>
      <litem>
        <u>demo.xsl</u><br/>
        Holds transformation templates that describe how to transform XML tagged items into HTML.
      </litem>
      <litem>
        <u>demo.css</u><br/>
        Has style declarations that together form a theme - a group of related sizes and colors.
      </litem>
      <litem>
        <u>demo.jpg</u><br/>
        Holds an image to be rendered within the generated HTML page.
      </litem>
    </olist>
    This seperation is very useful.  The web site I've built for all my classes uses this technique.
    Seperating content from styling lets me easily keep content up-to-date because it is not
    mixed in with lots of styling constructs.
    <p/>
    Furthermore, now is it possible to have several 
    different styling themes for different kinds of pages, simply by building a theme file for each
    of them, e.g., homeTheme, coursesTheme, codeTheme, etc.
  </section>

  <section title="Example:">
    The table below is defined in three files.  Demo.xml declares the table, its rows, and its cells.
    Demo.xsl associates the XML declarations with HTML table constructs and classes that are
    defined in the styles file, demo.css.
    <center>
      <section title="Table">
        <table>
          <th>
            <sd>First</sd><sd>Second</sd><sd>Third</sd>
          </th>
          <tr>
            <cd>1</cd><cd>2</cd><cd>3</cd>
          </tr>
          <tr>
            <cd>4</cd><cd>5</cd><cd>6</cd>
          </tr>
        </table>
      </section>
    </center>
  </section>
  </visible>  
</courses>
