DevGuru Tutorials

Quick References

Features

Partners

A Beginners Guide to Creating and Displaying Your First XML Document.

This tutorial is divided into two parts. In Part 1, we will explain how to create an XML document and how to assign data types to the values in the XML document. In Part 2, we will create HTML pages that display the data contained in the XML document. All of the examples in this tutorial are designed to be viewed with either Internet Explorer 5.0 or 5.5.

Part 1: Creating the XML Document and the Schema Go to Part 2

Historically, the HyperText Markup Language (HTML) has been the coding technology used to publish content on the World Wide Web. Developed twenty years ago, HTML is a very easy to use language that allows you to create a static page composed of text, images, and hyperlinks that can be viewed by anyone in the world who has access to the Internet. Today, the integration of HTML with other technologies, such as Active Server Pages (ASP) and SQL, is commonplace and permits the creation of dynamic web sites that interact with the user. The future promises to bring a fantastic offering of new technologies that are expected to profoundly affect how we develop web sites.

One of the emerging technologies that is currently receiving considerable attention is the eXtensible Markup Language (XML). Both HTML and XML are markup languages, which means that they use embedded tags to dictate how a document is to be displayed. HTML is composed of a static number of pre-defined tags which have specific tasks. For example, the HTML <b> tag renders the text in a bold font style. In contrast, you can use XML to create an unlimited number of your own custom tags and attributes, assign a data type to each tag and attribute, access values associated with the tags, and accomplish all of this in a custom structured format that you have also created.

The XML custom tags themselves have no meaning and you should not think that you are creating custom HTML tags. It is important to understand that the sole purpose of these XML tags is to contain data. It is the value assigned to the tag, and not the tag, that is important.

The ability to create custom tags to specifically meet the needs of your web pages can open many interesting possibilities for the site developer.

Tags

The first step is to create your own custom tags. This requires that we obey the syntax rules for XML in terms of both creating the individual tags and placing them in a logical order. An XML document that obeys the syntax rules is said to be well-formed. If the rules are not obeyed, you will get error messages. Fortunately, these rules are very simple.

Your tags can be composed of almost any string of characters, with certain limitations:

The first character of an XML tag must be an upper or lower case letter, the underscore, or a colon.
The remaining characters can be composed of any combination of upper or lower case letters, colons, hyphens, numbers, periods, or underscores.
XML tags are case sensitive, i.e., <Fish> and <fish> are two different tags.

All of your custom XML tags must be closed. There are two ways to close a tag legally. The first way is just like in HTML. Note how the opening tag <fish> and the closing tag </fish> delimit (enclose) the text, which is neon tetra. The text is referred to as the value associated with the <fish> tag.

<fish>neon tetra</fish>

The second way, which is a blank space followed by a backslash, is used when there is no value associated with the tag.

<fish />

A set of opened and closed tags is commonly referred to as an element. You can nest XML elements inside other elements, but only in a logical manner. The inner nested tags must be closed before you close the outer nested tags.

Here are two examples of nested XML custom tags:

<aquarium>
   <fish>neon tetra</fish>
</aquarium>

In the following example, we add one more layer of nested tags and repeat the <fish> element. Note how both the <name> and <number> tags are closed before we close the <fish> element in which they are contained.

<aquarium>
   <fish>
      <name>angel fish</name>
      <number>9</number>
   </fish>
   <fish>
      <name>discus</name>
      <number>16</number>
   </fish>
   <fish>
      <name>neon tetra</name>
      <number>76</number>
   </fish>
</aquarium>

Attributes

Just as an HTML tag can have attributes, you can also create one or more custom XML attributes for your own custom XML tags. You can use these attributes to provide additional information associated with your tag. The attribute is a name/value pair separated by an equal sign. The value must be enclosed by a pair of single or double quotes.

To demonstrate the use of attributes, we create a list of DevGuru staff members. Note how the programmer tag is used as a container element for the name, dob (date of birth), and ssn (social security number) tags for each staff member. In this list, each employee is assigned an id number (empID) as an attribute of the <programmer> tag, and the age (age) is listed as an attribute of the <dob> tag.

<devguru_staff>
   <programmer empID="1">
      <name>Bugs Bunny</name>
      <dob age="30">03/21/1970</dob>
      <ssn>111-11-1111</ssn>
   </programmer>
   <programmer empID="2">
      <name>Daisy Duck</name>
      <dob age="51">08/09/1949</dob>
      <ssn>222-22-2222</ssn>
   </programmer>
   <programmer empID="4">
      <name>Minnie Mouse</name>
      <dob age="23">04/13/1977</dob>
      <ssn>333-33-3333</ssn>
   </programmer>
   <programmer empID="3">
      <name>Pluto</name>
      <dob age="21">07/04/1979</dob>
      <ssn>444-44-4444</ssn>
   </programmer>
   <programmer empID="6">
      <name>Porky Pig</name>
      <dob age="43">11/30/1956</dob>
      <ssn>555-55-5555</ssn>
   </programmer>
   <programmer empID="5">
      <name>Road Runner</name>
      <dob age="47">01/19/1953</dob>
      <ssn>666-66-6666</ssn>
   </programmer>
</devguru_staff>

Comments



Schema

The next major step is to create a schema which is a formal way of defining and validating the content of an XML document. (A well-formed XML document that conforms to its schema is said to be valid.)

The schema is how we assign the data types to each tag and any attributes that are contained in the XML document. A schema is a structured document which must obey XML syntax rules. It is composed of a series of predefined tags and attributes that are part of the XML language and are used to set the data types for the values associated with our custom tags. Simply put, not only do we get to create custom XML tags, but we can also denote that an XML data value is, for example, an integer data type. This ability to assign specfic data types to specific XML data values is one of the reasons why XML has attracted so much attention.

A schema can be part of the XML document or a separate file. For our examples, we will create a separate schema file to allow you to view the resultant document.

Fortunately, if you can write HTML code, you can write a schema document. Here are the XML tags and attributes that we will use to create a schema:

Schema
The Schema tag serves as a container element that delimits the beginning and end of the schema. This tag must be closed and please note the exact spelling with regard to case.

xmlns
The xmlns attribute is used to declare the schema XML namespace. The value is a URL or URN address that the browser will access to get information on how to parse and validate the code.

xmlns:dt
The xmlns:dt attribute is used to declare the data types of the schema XML namespace. The value is a URL or URN address that the browser will access to get information on the data types to allow code validation.

If you are using IE 5 to view your XML document, then you must include the xmlns and the xmlns:dt attributes exactly as displayed below:

<Schema xmlns="urn:schemas-microsoft-com:xml-data" xmlns:dt="urn:schemas-microsoft-com:datatypes">
...
</Schema>

AttributeType
The AttributeType tag is used to declare the data type for an attribute of an XML tag. This tag must be closed and please note the exact spelling with regard to case.

name
The name attribute provides the name of the attribute.

dt:type
The dt:type attribute dictates the data type of the attribute. The twenty three permitted values are:

binary	non-positive-integer
Boolean	positive-integer
byte	recurringInstant
date	short
decimal	string
double	time
float	timeDuration
int	timeInstant
integer	unsigned-byte
long	unsigned-int
negative-integer	unsigned-long
non-negative-integer	-

attribute
The attribute tag is used to associate a previously data typed attribute to a tag. This tag must be closed and please note the exact spelling with regard to case.

type
The type attribute provides the data type of the custom attribute.

ElementType
The ElementType tag is used to declare the data type for a custom XML tag. This tag must be closed and please note the exact spelling with regard to case.

content
The content attribute describes the intended content of the XML tag. There are four permitted values:

Type	Description
eltOnly	Contains only elements
empty	Contains no content
mixed	Contains both elements and text
textOnly	Contains only text

name
The name attribute provides the name of the tag (element).

dt:type
The dt:type attribute dictates the data type of the tag (element). The twenty three permitted values are:

binary	non-positive-integer
Boolean	positive-integer
byte	recurringInstant
date	short
decimal	string
double	time
float	timeDuration
int	timeInstant
integer	unsigned-byte
long	unsigned-int
negative-integer	unsigned-long
non-negative-integer	-

element
The element tag is used to associate a previously data typed tag to an element. This tag must be closed and please note the exact spelling with regard to case.

type
The type attribute provides the type of the custom XML element.

Schema Examples

For our first schema, we will use the simple aquarium example, but we will need to make two changes to the code. First, we add an XML version tag at the top line to designate that this code is an XML document. Second, we add a xmlns attribute to the aquarium tag that provides the name of the schema file associated with this XML document. We name our schema file: aquariumSchema.xml

Code for aquarium.xml:
<?xml version="1.0"?>
<aquarium xmlns="x-schema:aquariumSchema.xml">
   <fish>neon tetra</fish>
</aquarium>

We begin coding by delimiting the schema with an opening and closing Schema element which will contain the actual data type declarations. The order of declaring the data types is important. We must first declare the nested fish tag to have a data type of string before we can declare the aquarium tag. Next, when we declare the aquarium tag, we do not give it a data type. Rather, we set the value of the content attribute to be mixed. This will permit the aquarium tag to contain other elements (i.e., fish) and also text. (Note that there is currently no text in the aquarium tag in this example, but we could add text at any time we desired.) We also use the element tag to denote that the fish tag is nested inside the aquarium ... /aquarium element. Note how the element tag is nested inside the ElementType element that data types the aquarium tag. Also note the use of the /> to close the element tag.

Code for aquariumSchema.xml:
<Schema xmlns="urn:schemas-microsoft-com:xml-data" xmlns:dt="urn:schemas-microsoft-com:datatypes">


<ElementType name="fish" content="textOnly" dt:type="string" />


<ElementType name="aquarium" content="mixed">
   <element type="fish" />
</ElementType>
</Schema>

To view this actual schema document in a separate window, please click here.

For our second schema, we will use the DevGuru staff list. We name our schema file: devguru_staffSchema.xml

Code for devguru_staff.xml:
<?xml version="1.0"?>
<devguru_staff xmlns="x-schema:devguru_staffSchema.xml">
   <programmer empID="1">
      <name>Bugs Bunny</name>
      <dob age="30">03/21/1970</dob>
      <ssn>111-11-1111</ssn>
   </programmer>
   <programmer empID="2">
      <name>Daisy Duck</name>
      <dob age="51">08/09/1949</dob>
      <ssn>222-22-2222</ssn>
   </programmer>
   <programmer empID="4">
      <name>Minnie Mouse</name>
      <dob age="23">04/13/1977</dob>
      <ssn>333-33-3333</ssn>
   </programmer>
   <programmer empID="3">
      <name>Pluto</name>
      <dob age="21">07/04/1979</dob>
      <ssn>444-44-4444</ssn>
   </programmer>
   <programmer empID="6">
      <name>Porky Pig</name>
      <dob age="43">11/30/1956</dob>
      <ssn>555-55-5555</ssn>
   </programmer>
   <programmer empID="5">
      <name>Road Runner</name>
      <dob age="47">01/19/1953</dob>
      <ssn>666-66-6666</ssn>
   </programmer>
</devguru_staff>

In this example, we have five tags (devguru_staff, programmer, name, dob, ssn) and we also have two attributes (empID, age). Again we must declare our data types in a logical manner. We will have to data type the age attribute before we can data type the dob tag. Likewise for the empID attribute and the programmer tag. Further we must data type the nested name, dob, and ssn tags before we declare the programmer tag, and we must declare the programmer tag before we can declare the devguru_staff tag.

Code for devguru_staffSchema.xml:
<Schema xmlns="urn:schemas-microsoft-com:xml-data" xmlns:dt="urn:schemas-microsoft-com:datatypes">


<AttributeType name="age" dt:type="integer" />

<ElementType name="dob" content="textOnly" dt:type="date" >
   
   <attribute type="age" />
</ElementType>


<ElementType name="name" content="textOnly" dt:type="string" />
<ElementType name="ssn" content="textOnly" dt:type="string" />


<AttributeType name="empID" dt:type="integer" />

<ElementType name="programmer" content="eltOnly">
   
   <attribute type="empID" />
   <element type="name" />
   <element type="dob" />
   <element type="ssn" />
</ElementType>


<ElementType name="devguru_staff" content="eltOnly">
   <element type="programmer" />
</ElementType>


</Schema>

To view this actual schema document in a separate window, please click here.

At this point, we have shown how to create an XML document composed of custom tags and attributes and we have also shown how to create a schema document that allows us to declare the various data types for these tags and attributes and to also create a structured layout to contain these tags. The ability to create these two documents is the cornerstone of the XML technology.

The next step in our beginners guide is to introduce two more pieces of technology, data binding and the Extensible Stylesheet Language (XSL). In Part 2, we will use these technologies to display the data contained in an XML document.

Part 2: Displaying an XML document