eXtropia: the open web technology company
Technology | Support | Tutorials | Development | About Us | Users | Contact Us
Resources
 ::   Tutorials
 ::   Presentations
Perl & CGI tutorials
 ::   Intro to Perl/CGI and HTML Forms
 ::   Intro to Windows Perl
 ::   Intro to Perl 5
 ::   Intro to Perl
 ::   Intro to Perl Taint mode
 ::   Sherlock Holmes and the Case of the Broken CGI Script
 ::   Writing COM Components in Perl

Java tutorials
 ::   Intro to Java
 ::   Cross Browser Java

Misc technical tutorials
 ::   Intro to The Web Application Development Environment
 ::   Introduction to XML
 ::   Intro to Web Design
 ::   Intro to Web Security
 ::   Databases for Web Developers
 ::   UNIX for Web Developers
 ::   Intro to Adobe Photoshop
 ::   Web Programming 101
 ::   Introduction to Microsoft DNA

Misc non-technical tutorials
 ::   Misc Technopreneurship Docs
 ::   What is a Webmaster?
 ::   What is the open source business model?
 ::   Technical writing
 ::   Small and mid-sized businesses on the Web

Offsite tutorials
 ::   ISAPI Perl Primer
 ::   Serving up web server basics
 ::   Introduction to Java (Parts 1 and 2) in Slovak

 

Introduction to XML For Web Developers
XML Basics  

Okay, you are probably beginning to get a little bit dizzy with all of this theoretical stuff. If you are like me, by now you are quite ready to sink your teeth into the meat of XML.

So to conclude this section, we will run through a very simple XML example so that you can see how it all fits together. We'll keep it simple of course, in fact we will be sloppy and not include a DTD (for simplicity). But in the next few sections we will give you all the tools to start doing more advanced work.

Let's return to our contact document:

<?xml version = "1.0" encoding="UTF-8" standalone = "yes"?>

<DOCUMENT>

<CONTACT>
<NAME>Gunther Birznieks</NAME>
<EMAIL>gunther@bobsfishstore.com</EMAIL>
<PHONE>662-9999</PHONE>
</CONTACT>

<CONTACT>
<NAME>Susan Czigonu</NAME>
<EMAIL>susan@eudora.org</EMAIL>
<PHONE>555-1234</PHONE>
</CONTACT>

</DOCUMENT>

You could copy this text using your favorite word processor and save it as plain text, naming it something like contacts.xml or test.xml.

Notice that the first line is something we have not seen before. This line is called a processing instruction. We will talk much more about processing instructions and their attributes later. For now, just know that all XML documents need this first line much like HTML documents begin with <HTML>.

Other than that, you see a set of opening and closing tags with data (together, the tags and data are called XML Elements).

XSL Basics  
Okay, the next thing you will need to do is associate stylistic meanings to the tags so that a browser can display the document. As we said before, since XML allows you to create your own sets of tags, you must also create your own style guidelines which a browser can use to interpret your tags (which it has never seen before).

Because they are extracted from the data, style sheets can be shared by any number of XML documents. Also, they can be written in a number of style languages such as Cascading Style Sheet Language (CSS) or eXtensible Style Language (XSL). In this example, we will use XSL.

Let's take a look at a Style Sheet in XSL for our contacts.xml document

"Unlike HTML, XML is VERY precise. If the syntax isn't exactly right, the parser will stop processing it and nothing (except an error message) will be displayed. For example, the processing instruction is absolutely required fro all XML documents. In contrast, most browsers will accept a missing <HTML> tag at the beginning of an HTML document. This is because browsers have built-in "recovery" code to guess what's missing and to recover from invalid HTML. XML parsers, whether embedded in browsers or as standalone processors, are explicitly not allowed to recover. Much like compiling a program, an XML file is either correct, or it's toast. If this seems arbitrary, consider that XML is about transmitting structured data using tags that are usually non-standard. Parsers can't guess what's missing the way they can with HTML." - Ken Sall

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template pattern = "DOCUMENT">
	<HTML>
	<HEAD>
	<TITLE>Contacts</TITLE>
	</HEAD>
	<BODY>
		<xsl:process-children>
	</BODY>
	</HTML>
</xsl:template>

<xsl:template pattern = "CONTACT">
	<UL>
		<xsl:process-children>
	</UL>
</xsl:template>

<xsl:template pattern = "NAME">
	<LI>
		<xsl:process-children>
	</LI>
</xsl:template>

<xsl:template pattern = "PHONE">
	<LI>
		<xsl:process-children>
	</LI>
</xsl:template>

<xsl:template pattern = "EMAIL">
	<LI>
		<xsl:process-children>
	</LI>
</xsl:template>
</xsl:stylesheet>

Putting it all Together  
Once you have defined your XML and XSL documents, you can run them through a procesor and display them. We talk a lot more about how you do this in later sections. For now, we only show you what the final converted document will look like

<HTML>
<HEAD>
<TITLE>Contacts</TITLE>
</HEAD>
<BODY>

<UL>
<LI>Gunther Birznieks</LI>
<LI>gunther@bobsfishstore.com</LI>
<LI>662-9999</LI>
</UL>

<UL>
<LI>Susan Czigonu</LI>
<LI>susan@eudora.org</LI>
<LI>555-1234</LI>
</UL>

</BODY>
</HTML>

In the next couple of sections we will delve more deeply into the syntax of the XML document, the XSL document and the DTD.

Previous Page | Next Page | Table of Contents