Part III. In Review

In Part III we took a look at some in-depth uses of XML, including XHTML—the reformulation of HTML 4.0 in XML form—SMIL and SVG, XLinks, XPointers, and XForms.

The W3C introduced XHTML with the goal of allowing HTML documents to be validated as true XML documents. There are a number of forms of XHTML:

  • XHTML 1.0 Transitional is most like HTML 4.0.
  • XHTML 1.0 Frameset is the same as XHTML 1.0 Transitional but is used with documents that use frames.
  • XHTML 1.1 is a module-based version of XHTML. XHTML Basic is formulated for devices that will only support smaller implementations of XHTML.
  • XHTML 2.0 is a new version that omits all display elements, using style sheets instead.

XHTML 1.0 is built to match HTML closely; for example, the XHTML document element is <html>. But because XHTML documents are also XML documents, XML rules apply. For example, elements that are not empty need closing tags, attribute values must be quoted, and empty elements must end in />.

You also need a <!DOCTYPE> element in XHTML, and this element must appear before the document element. In the <html> document element, you must declare the namespace as <html xmlns="http://www.w3.org/1999/xhtml">. Here's an example of an XHTML document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Using XHTML
        </title>
    </head>

    <body>
        <h1>
            Welcome to my XHTML-compliant page!
        </h1>
        This is an XHTML document.
        <br/>
        Do you like it?
    </body>
</html>

It's apparent how much this document resembles HTML, but it's also apparent that it's XML.

In Part III you saw that XHTML elements mirror HTML elements so well that you can easily convert HTML documents into XHTML if you know the XHTML rules. For example, you can easily convert this HTML document:

<HTML>
    <HEAD>
        <TITLE>
            Want to read about HTML?
        </TITLE>
    </HEAD>

    <BODY>
       <H1>
            Want to read about HTML?
       </H1>

       Read all about
       <A HREF="http://www.w3.org/MarkUp/Activity.html">HTML</A>.
    </BODY>
</HTML>

into this XHTML document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <title>
            Want to read about XHTML?
        </title>
    </head>

    <body>
       <h1>
            Want to read about XHTML?
       </h1>

       Read all about
       <a href="http://www.w3.org/MarkUp/Activity.html">HTML</a>.
</html>

The following is an XHTML example that creates a table by using the HTML analogs <TABLE>, <TR>, and <TD>—that is, <table>, <tr>, and <td>—to hold a tic-tac-toe game:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Formatting Tables in XHTML
        </title>
    </head>

    <body>
        <h1>
            Formatting Tables in XHTML
        </h1>
        <table border="1">
            <tr>
                <th>X</th>
                <th>O</th>
                <th>X</th>
            </tr>
            <tr>
                <td>O</td>
                <td>X</td>
                <td>O</td>
            </tr>
            <tr>
                <td>X</td>
                <td>O</td>
                <td>X</td>
            </tr>
        </table>
    </body>
</html>

SVG is all about creating graphics, and you can use a browser plug-in to support SVG, as you did in Part III. SVG documents use the <svg> document element; you were able to create basic shapes by using the <circle> element to create circles, the <line> element to create lines, the <rect> element to create rectangles, the <polyline> element to create polyline figures, the <ellipse> element to create ellipses, and the <polygon> element to create polygons.

Many elements are already built in to SVG. For example, the <group> element lets you group elements together so you can move or rotate them all at once. You can script elements by using the <script> element. The <animate> SVG element lets you animate SVG elements by setting how to change the values of their attributes over time. You can also create all kinds of graphic effects. Here's an SVG example that creates a linear gradient by using the <linearGradient> element:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <text y="40" style="font-size:24pt">
        Handling gradients
    </text>
    <defs>
        <linearGradient id="gradient1">
            <stop offset="0%" stop-color="#000000" />
            <stop offset="100%" stop-color="#00FF00" />
        </linearGradient>
    </defs>

    <rect fill="url(#gradient1)" stroke="green" stroke-width="5"
        x="100" y="200" width="200" height="400"/>
</svg>

SMIL is designed to create multimedia presentations by using XML. For example, here's how a SMIL presentation might present slides, play music, and display text:

<smil>
    <head>
        <layout>
            <root-layout width="400" height="300" background-color="white"/>
            <region id="topRegion" title="topRegion" left="0" top="0"
                width="400" height="200"/>
            <region id="caption" title="caption" left="0" top="201"
                width="400" height="100"/>
        </layout>
    </head>

    <body>
        <par>
            <seq>
                <par>
                    <img region="topRegion" src="slide1.jpg"
                        type="image/jpeg" dur="20s"/>
                    <text region="caption" src="image1.txt"
                        type="text/plain" dur="20s"/>
                    <audio src="xml1.au" region="audio"
                        type="audio/x-au" dur="20s"/>
                </par>
                <par>
                    <img region="topRegion" src="slide2.jpg"
                        type="image/jpeg" dur="20s"/>
                    <text region="caption" src="image2.txt"
                        type="text/plain" dur="20s"/>
                    <audio src="xml2.au" region="audio"
                        type="audio/x-au" dur="20s"/>
                </par>
                <par>
                    <img region="topRegion" src="slide3.jpg"
                        type="image/jpeg" dur="20s"/>
                    <text region="caption" src="image3.txt"
                        type="text/plain" dur="20s"/>
                    <audio src="xml3.au" region="audio"
                        type="audio/x-au" dur="20s"/>
                </par>
            </seq>
        </par>
    </body>
</smil>

XLinks are used to create hyperlinks in XML. Any XML element can be an XLink if you use the correct attributes. In particular, you need to use one attribute, xlink:type, to set the type of XLink to one of these values: "simple", "extended", "locator", "arc", "resource", "title", or "none".

Simple XLinks predominate today because they're much like HTML hyperlinks. To create a simple XLink, you set the xlink:href and xlink:type attributes. The following example, which treats a simple XLink very much like an HTML hyperlink, will work in both XML browsers and HTML browsers that support JavaScript:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>

<insurance>
         <title>
             Markup Information
         </title>
         You can find more about markup languages
         <link xmlns:xlink = "http://www.w3.org/1999/xlink"
             xlink:type = "simple"
             xlink:show = "new"
             xlink:href = "http://www.w3.org/MarkUp/Activity.html"
             onClick="location.href='http://www.w3.org/MarkUp/Activity.html'">
             here.
         </link>
</insurance>

XPointers let you get even more specific than XLinks, but there's currently even less implementation of XPointers than of XLinks. The XPointer specification is now divided into three recommendations—the XPointer framework, the element scheme, and the namespace scheme—along with the working draft for the general XPointer scheme.

XForms show a great deal of promise. XForms are the XML counterpart of HTML Web forms, and you can use them to support controls such as buttons, check boxes, and radio buttons.

A major idea behind XForms is to separate data from presentation, so XForms store their data in an XForms model, typically stored in an XHTML's <head> section. The presentation of the actual controls that an XForm displays is done with specialized elements such as <button> and <select>.

For example, the following example is an XForm that stores its data in the <head> section and displays two check boxes as well as Submit and Cancel buttons. Here's what the <head> section, which holds the data for the two check boxes, looks like:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:xforms="http://www.w3.org/2002/xforms/cr">

    <head>
        <xforms:model>
            <xforms:submission localfile="data.xml"/>
            <xforms:instance>
                <data xmlns="">
                    <selectboolean1>true</selectboolean1>
                    <selectboolean2>true</selectboolean2>
                </data>
            </xforms:instance>
        </xforms:model>
    </head>
        .
        .
        .

In the presentation of these controls in the <body> section, you just refer to the location of their data storage in the <head> section:

    <body>
        <h1>Using XForms</h1>

        <xforms:selectboolean ref="/data/selectboolean1">
            <xforms:label>Click me</xforms:label>
        </xforms:selectboolean>

        <xforms:selectboolean ref="/data/selectboolean2">
            <xforms:label>Click me too!</xforms:label>
        </xforms:selectboolean>

        <p>Submit and Reset Buttons</p>
        <xforms:submit>
            <xforms:label>Submit</xforms:label>
        </xforms:submit>

        <xforms:trigger>
            <xforms:label>Reset</xforms:label>
            <xforms:reset ev:event="DOMActivate"/>
        </xforms:trigger>
    </body>
</html>

And that's it for Part III. In Part IV you're going to start working with programming and XML to take advantage of the full power of XML.

Share ThisShare This