Untitled Document

XML Introduction

A markup language is a mechanism to identify structures in a document. XML (Extensible Markup language) is a markup language for documents containing structured information. As a meta-language, XML is about to describe data and its structure; while HTML is about to display the data.

XML is not to replace HTML, but compliment it by allowing writers to create and format their own document markups. For HTML, The tags used to mark up HTML documents and the structure of HTML documents are predefined. For XML, there is no predefined tag set, so there is no any preconceived semantics. Writers are provided a facility to define tags and the structural relationships. That is the extensible feature of XML.

To be valid, XML documents should be well-formed. That means XML documents follow some strict rules. For example, every opening tag in XML documents must have a matching closing tag. While in HTML, pairing is optional for some of the tags, and only the opening tag is required.

Before providing some examples of setting up XML documents, let’s take a look of some rules for composing XML documents.

Go to top

Some Rules

1. Closing Tags
An element in XML must have a closing tag.
For example:

<firstname>James</firstname>

2. Overlapping Elements
An element must be nested properly by closing all child elements before closing the parent elements.
For example:

<student>
<firstname>James</firstname>
<lastname>Smith</lastname>
</student>

It would be incorrectly nested if the student element was closed before forename element.

3. Single Root Element
An XML document only can have a single root element. All other elements should be within this root element.
For example:

<mec>
<student>
<firstname>James</firstname>
<lastname>Smith</lastname>
</student>
</mec>

As above, mec is the root element, and student is its descendant.

4. Case Sensitive
XML is case sensitive, and care should be taken to ensure that Opening and closing tags are in the same case. An element name of "MEC" is not the same as "mec".

5. Quoted Attribute Values
In XML, attributes must be specified a value, and the values must be in quotes, regardless of the data type. Single and double quotes are both acceptable.
For example:
Correct: <input type="checkbox" checked="checked"/>
Wrong: <input type="checkbox" checked>

6. Naming Conventions
In XML, since there is no any pre-defined tag, there are no reserved words needed to be avoided when naming elements. The following are some simple rules when naming an element.

a. Elements must start with a character or an underscore but not a number or punctuation. After the first character, numbers, hyphens and periods are allowed.
b. Names must not contain spaces.
c. A colon is reserved for namespaces

Go to top

Tutorial Examples

1. Create a XML file
Now we use XML to create a student record database for the student information management.
Each student record includes student’s name and address. The name has two parts: First name and last name. The address has four parts: Street, City, Email and Phone Number. So the structure of the student record can be presented as:

Using notepad.exe as our editor tool, we can create the xml file students1.xml. In this file, we input two students’ information.

<?xml version = "1.0"?>

<students>
<student>
<name>
<firstname> James </firstname>
<lastname> Smith </lastname>
</name>
<address>
<street> 101 South Street</street>
<city> Halifax </city>
<email> james@dal.ca </email>
<phone> 4940001 </phone>
</address>
</student>

<student>
<name>
<firstname> Tom </firstname>
<lastname> White </lastname>
</name>
<address>
<street> 202 Victoria Road </street>
<city> Dartmouth </city>
<email> tom@dal.ca</email>
<phone> 4940002 </phone>
</address>
</student>
</students>

When you save this file, you should use the “Save As” menu of the notepad.exe. You must change the “Save As Type:” to “All Files”. And the suffix of file name must be “.xml” Just as below figure shows:

When the file is finished, we can use IE to browse it.

Until now, the process for create a xml file is completed.

Go to top

2.Create a DTD file for the XML file
A DTD (Document Type Definition) is a set of rules that defines what tags appear in a XML document, how and where these tags appear, what the relationship the tags have with each other. Be brief, a DTD defines the legal elements and their structure in an XML document.

When an XML document is processed, it is compared within the DTD to be sure the structure is valid and all tags are used in the proper manner. Independent developers can agree to use a common DTD for exchanging XML data, which makes data be shared easily.

We create the students.dtd file as below:

<?xml version = "1.0"?>

<!ELEMENT students (student+)>
<!ELEMENT student (name,address)>
<!ELEMENT name (firstname,lastname)>
<!ELEMENT firstname (#PCDATA)>
<!ELEMENT lastname (#PCDATA)>
<!ELEMENT address (street,city,email,phone)>
<!ELEMENT street (#PCDATA)>
<!ELEMENT city (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT lastname (#PCDATA)>

To use the DTD file, we must add this code into the XML file.
<!DOCTYPE students SYSTEM "students.dtd">

students2.xml is completed XML file.

<?xml version = "1.0"?>

<!DOCTYPE students SYSTEM "students.dtd">
<students>
<student>
<name>
<firstname> James </firstname>
<lastname> Smith </lastname>
</name>
<address>
<street> 101 South Street</street>
<city> Halifax </city>
<email> james@dal.ca </email>
<phone> 4940001 </phone>
</address>
</student>

Go to top

3.Display the XML file in HTML by CSS and XSLT

Browsers are not particularly good at formatting XML. It is true that most of the time XML will be used to define data instead of displaying it. But for viewing, we have to format the XML data. CSS and XSL could be used to do this.

CSS

CSS (Cascading Style Sheets) is a markup language with the purpose of styling online content. It is used extensively for formatting standard HTML pages and also used to format XML documents. CSS can define how XML tags are displayed, allowing them to be presented in different ways.

student{display: block; margin-top: 15px; color: blue;}
name{display: block; margin-left:40px;margin-top: 30pt;color:red}
firstname{font-size: 28pt;}
lastname{font-size: 28pt;}
address{display: block; margin-left:40px;color:green}
street{display: block;font-size: 18pt;}
city{display: block;font-size: 18pt;}
email{display: block;font-size: 18pt;color:blue}
phone{display: block;font-size: 18pt;}

To use the CSS file, the XML must add the following sentence:
<?xml-stylesheet type="text/css" href= "students.css"?>

complete student3.xml is:

<?xml version = "1.0"?>

<?xml-stylesheet type="text/css" href= "students.css"?>
<students>
<student>
<name>
<firstname> James </firstname>
<lastname> Smith </lastname>
</name>
<address>
<street> 101 South Street</street>
<city> Halifax </city>
<email> james@dal.ca </email>
<phone> 4940001 </phone>
</address>
</student>

Open the students3.xml by IE, we will see:

XSLT

XSL (eXstensible Stylesheet Language) is XSL (eXstensible Stylesheet Language) is a new language developed to format XML documents. With the appearance of XML, in many cases the original data, not the HTML representation of it, will be exchanged. This gives the users a richer data-set to work with and data transformations are necessary. To perform these transformations, XSL could be used. XSLT is used to format a XML file into a HTML document. It maps the XML elements to XSL templates. So XSLT provides a powerful presentation for XML.

<?xml version ="1.0"?>

<xsl:stylesheet version = "1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/TR/xhtml1/strict">
<xsl:template match = "/">
<h2> Student Record </h2>
<xsl:for-each select="students/student">
<br/>
<span style="font-weight:bold;color:red"> FirstName: </span>
<xsl:value-of select="name/firstname" />
<span style="font-weight:bold;color:red"> LastName: </span>
<xsl:value-of select="name/lastname" /> <br/>
<span style="font-weight:bold;color:green"> Street: </span>
<xsl:value-of select="address/street" /> <br/>
<span style="font-weight:bold;color:green"> City: </span>
<xsl:value-of select="address/city" /> <br/>
<span style="font-weight:bold;color:blue"> Email: </span>
<xsl:value-of select="address/email" /> <br/>
<span style="font-weight:bold;color:green"> Phone: </span>
<xsl:value-of select="address/phone" /> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

To use the XSLT file, we must add the following sentence into XML file.
<?xml-stylesheet type = "text/xsl" href = "students.xsl"?>

The complete file students4.xml is :

<?xml version = "1.0"?>

<?xml-stylesheet type = "text/xsl" href = "students.xsl"?>
<students>
<student>
<name>
<firstname> James </firstname>
<lastname> Smith </lastname>
</name>
<address>
<street> 101 South Street</street>
<city> Halifax </city>
<email> james@dal.ca </email>
<phone> 4940001 </phone>
</address>
</student>

Now open the students4.xml by IE, we will get the following result:

Go to top

Useful Links

XML School
This is a concise introduction to the basic issues of XML, including its syntax, elements, Cascading Style Sheets, and 'behaviours'. It's also a model of site design for clarity and usability.
http://www.w3schools.com/xml/default.asp

O'Reily xml.com
The information about xml and useful books published by O'Reilly. Online reading is enabled. http://www.xml.com/

The XML Elements of Style
O'Reilly author Steve Muench presents his own succinct and lucid list of rules for creating a well-formed XML document.
http://oracle.oreilly.com/news/oraclexml_1000.html

Video Tutorial from the University of Texas

http://cobra.ischool.utexas.edu:8080/ramgen/Content2/labstaff/2003/xml/IntroXMLbb.rm

Go to top