Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter
*
 

Tutorials
Cookies
ASP
Advanced HTML
Frames & Tables
.htaccess
Rounded Table Corners
Flash 5
FTP
Beginners
Javascript
PHP/MySQL
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics
XHTML
Stylesheets
XML
PHP
*

125x125

Related Links
XML.org
XMLNews.org
Stylesheets Tutorial
More XML Sites
*

 
Sitemap | Contact | Link To Us | Advertise
Report A Problem
Home : Tutorials : XML : Part 4

XML Tutorial
Part 4 - Formatting XML

Introduction

As you will have seen in the last part of the tutorial, browsers are not particularly good at formatting XML, and only the very latest browsers support it at all. Although most of the time XML will be used to define data, not to display it, there may be occasions where you decide that you want to format the XML data for viewing. There are three main ways of doing this.

CSS

Cascading Style Sheets (CSS) are one of the more recent web technologies, and are used extensively for formatting standard HTML pages. If you would like to find out more about Cascading Style Sheets read the tutorial on Free Webmaster Help (see related links).

CSS can also be used to format XML documents, though. CSS can 'redefine' HTML tags, allowing them to be presented in different ways. Similarly, it can be used to define how XML tags are displayed. In this section of the tutorial, I will be using an expanded version of my earlier e-mail example:

<email>
<message>
<header>
<from>webmaster@gowansnet.com</from>
<to>webmaster@xml.org</to>
<subject>Comments on XML</subject>
</header>
<body>
I think that XML has great potential. It will work very well and will help many people to make much better use of the internet.
</body>
</message>
<message>
<header>
<from>webmaster@gowansnet.com</from>
<to>webmaster@goodsite.com</to>
<subject>An excellent site</subject>
</header>
<body>
I have just visited your site and I think it is amazing. Keep up the good work!
</body>
</message>
</email>

If I wanted to display this on a web page, I could use the following CSS code:

email
{
background-color: #ffffff;
width: 100%;
}
message
{
display: block;
background-color: #DDDDDD;
margin-bottom: 30pt;
}
header
{
display: block;
background-color: #999999;
margin-bottom: 10pt;
}
from
{
display: block;
color: #0000FF;
font-size: 12pt;
}
to
{
display: block;
color: #FF0000;
font-size: 12pt;
}
subject
{
display: block;
font-size: 14pt;
font-weight: bold;
}
body
{
display: block;
font size: 12pt;
}

There may be a few pieces of code here that are unfamiliar, so I will just cover them. display: block; is important as it tells the system to display the data inside this tag as a block on the page, and most importantly, taking a new line after it. This is also related to the margin-bottom declaration, which allows a space after pieces of data have been displayed.

The actual format of this CSS code is quite simple, though. The XML element name is given, followed by the formatting data inside curly brackets { }. The easiest way to use this with your code is to save it as a .css file (which is just a plain text file, which can be made in any text editor.

Finally, add the following to the beginning of the XML code:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="estyle.css"?>

The first line is the standard declaration of the XML document. The second line points to the stylesheet which will format this document (in this case estyle.css).

You can click here to see the output of this (only recent browsers will support this).

XSL

XSL stands for eXstensible Stylesheet Language, and is a new language developed to format XML docuements. For this example, I will use the same XML code from above.

To format the code, you must create an XSL stylesheet. Although XSL is a language in itself, I will just cover the basics here. The following code goes in a file estyle.xsl:

<?xml version="1.0"?>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:12pt;
background
-color:#FFFFFF">
<xsl:for-each select="email/message">
<xsl:for-each select="header">
<DIV STYLE="background-color:#EEEEEE; padding:4px">
<SPAN STYLE="color:black">To: <xsl:value-of select="to"/></SPAN>
</DIV>
<DIV STYLE="background-color:#EEEEEE; padding:4px">
<SPAN STYLE="color:black">From: <xsl:value-of select="from"/></SPAN>
</DIV>
<DIV STYLE="background-color:#EEEEEE; padding:4px">
<SPAN STYLE="font-weight: bold; color:black"><xsl:value-of select="subject"/></SPAN>
</DIV>
</xsl:for-each>
<DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">
<xsl:value-of select="body"/>
</DIV>
</xsl:for-each>
</BODY>
</HTML>

At first glance it looks very strange, but really it is just HTML DIV and SPAN tags, combined with a little XSL code. I won't cover DIV and SPAN tags fully here, as this is not an HTML tutorial, but the basics of them are that you are assigning areas of the page which contain formatting. The XSL document is really just an HTML page with a bit of XSL code added to it. For anyone who has used PHP or another scripting language to output HTML, this will all be quite familiar. The actual XSL is as follows:

<?xml version="1.0"?>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">

This is the standard header for an XSL document.

<xsl:for-each select="email/message">

This works just like a for loop in a scripting or programming language. It tells the browser to loop through all the items <message> inside the <email> tag.

<xsl:for-each select="header">

This is another for loop to go through all the occurences of the <header> tag inside the <message> tag. In this example of code, there is only one <header> for each message, but this code needs to be included so that the browser looks inside the <header> tag.

To: <xsl:value-of select="to"/>

This is probably the best feature of XSL over CSS. You will have noticed that in the CSS formatted document, all I could do was to display the e-mail addresses at the top of the message. Using XSL (as it is really just an HTML document with extra coding in it), I can tell the browser to output To: before the value. The second part of this line tells the browser to output the value of the tag <to> in the position of the XSL tag.

</xsl:for-each>

This is the end of the loop through the header. At this point the browser looks to see if there is another <header> in the <message> section of the document. As there is not, it continues.

</xsl:for-each>

The second occurance of this tag tells the browser to loop through to the next <message> tag. As you can see, it can get difficult to follow your nested loops like this, so often it is helpful to indent your code.

Finally, add the following to your XML code:

<?xml version="1.0"?>
<?xml:stylesheet type="text/xsl" href="estyle.xsl" ?>

As with the CSS, this tells the browser to look for the XSL file estyle.xsl to get formatting details.

You can view the output of these files here.

Data Islands

Another way of formatting XML is to use Data Islands. Currently, only Internet Explorer 5 and upwards support this, and it is an unofficial standard. Again, I will use the same XML to demonstrate this. Using this method, you use the unofficial <xml> tag in a normal HTML document. You can either surround your XML data with <xml> and </xml> or you can embed a remote file.

To embed data straight into the file you use the folloing format:

<xml id="emails">
XML code goes in here but without first declaration line
</xml>

To embed XML from a remote file use:

<xml id="emails" src="emails.xml">
</xml>

As you will have noticed, you must give an ID to your XML.

Now you have got the XML da
ta into the file, you can format it by normal HTML, but using <span> tags to insert particular fields. This is an example of formatting the e-mail file:

<html>
<body>

<xml id="emails" src="emaildata.xml"></xml>

<table bgcolor= "#EEEEEE" border="0" datasrc="#emails">
<tr bgcolor="#CCCCCC"><td>To: <span datafld="to"></span></td></tr>
<tr bgcolor="#CCCCCC"><td>From: <span datafld="from"></span></td></tr>
<tr bgcolor="#CCCCCC"><td><b>Subject: <span datafld="subject"></span></b></td></tr>
<tr><td><span datafld="body"></span></td></tr>
</table>
</body>

Although I used the same XML data for this as for all the others, I removed the <header> item as the data objects only appear to work on the first level of the document.

You can view the result here.

Part 4

As you can see, although it was not designed for display, it is still possible to format XML so that it can be output by a browser. XSL looks like the future of this, though, as the others have limitations. In the next part, I will show you some more methods of storing data in XML.

© 1999 - 2001 FreeWebmasterHelp.com