Ask the Web Pro 10-Minute Solutions

A Painless Introduction to the Wonderful
World of XML

By Charles C. Caison

Works in: Internet Explorer 5.x

Have you started adding XML-based documents to your Web sites? If you have not, then let me be the one to tell you that it is high time you learn how to do so. XML technology has quickly become the standard for defining data on The Net.

In this month's 10-Minute Solution, I will give you a very easy to understand introduction to XML. In the months to follow, I will present XML-based solutions of progressively higher levels of complexity, power and usefulness.

To start with, let me say that you should not be intimidated by XML in any way. If you know HTML, you will quickly understand how to create XML documents since both markup "languages" are based on the idea that you will surround text with tags, <my_tag>like this</my_tag>.

Let's start by introducing the <XML> tag. It looks harmless enough.


<XML ID=xmlEmployees SRC="Employees.xml">
</XML>
The keyword "XML" is used to identify this as an <XML> tag (not too difficult so far). A couple of attributes are part of the tag.

The attribute, "ID" is used to give a name to this <XML> tag. Whenever we want to reference the <XML> tag in any way, we will use the value of the "ID" attribute.

The "SRC" attribute identifies the file that contains the actual data. You have the option of putting the actual data inside of the <XML> tag (shown above) or putting the actual data in an external file. Putting the data in an external file is usually a bit more flexible since that approach separates the data (in the external .XML file) from the display of the data (the .HTML file). If you choose to put the data in an external .XML file, the "SRC" attribute is required, otherwise it can be omitted.

One of the ways you can use the XML data in your HTML page is to display that data in a standard HTML table. To do so, you should tell that table which set of XML data should be displayed. The DATASRC attribute of the <TABLE> tag provides that information quite nicely. The following example shows how.


<TABLE DATASRC=#xmlEmployees>
</TABLE>
In addition, you must also tell the table which XML data field should be shown in which table columns. The DATAFLD attribute of the <DIV> tag can handle it. A <DIV> tag, such as the one shown below will automatically display the appropriate data. If the above <DIV> tag is place within a <TABLE> that has a DATASRC attribute properly specified, the <DIV> will populate with data from the XML.

<DIV datafld="TheName"></DIV>
Let's turn our attention from the .HTML file to the .XML file to see how the data is formatted. The .XML file can be as simple or as complex as the data that it contains. The top of the page should include a tag to indicate that this is an XML document and it should be treated accordingly.

<?xml version="1.0" ?>
The XML standard allows us to define our own tags. If we needed to store employee data for our company, we might use the following structure.

<Employees>
	<Employee>
		<TheName>Bob</TheName>
		<TheAddress>123</TheAddress>
		<Tel>123-1234</Tel>
		<Fax>123-1235</Fax>
		<EMail>bob@bob.com</EMail>
	</Employee>
<Employees>
Each of the tags was created and interpreted by XML properly. One employee is shown here for simplicity, but we can repeat the structure of the <Employee> tags for as many employees as we have in the organization.

That's all there is to it. Creating an HTML document that contains information about an XML document, then using the data from the XML document, is easy and useful. Separating the data in the XML document from the display of that data in the HTML document is an intelligent way to partition your pages. Such a design allows for changing the data independently of the HTML. See the associated HTML and XML for the full example code.

 
Other 10-Minute Solutions
 Write Text Files to a Drive on a Web Server
 Create Clickable Image Hotspots
 Programmatically Convert Excel Spreadsheets to HTML
 Detecting Browser Type and Client Settings
 Create a Cool Color-Changing Rollover Effect
 Launch a Window From a Listbox Using JavaScript
 Add User-Interface Elements to Your Web Pages
 Provide Online Help Using Layers in Netscape
 Build an HTML-Based Color Picker
 Manipulate Browser Windows Using JavaScript
 Control Scriptlets With JavaScript
 Extract Data From a Web Site
 Create Lightning-Fast Tabbed Windows in IE
 Add Context-Sensitive Help to Your IE Applications
 Add Dramatic Transition Effects to Your Web Pages
 Create Cross-Browser Scrolling Hyperlinks
 Enable Users to Set Home Pages with a Single Click
 A Painless Introduction to the Wonderful World of XML


Ask the Web Pro | Who is the Pro? | Usage Policies | Search | Feedback


Sponsored Links


Advertising Info  |   Member Services  |   Contact Us  |   Help  |   Feedback  |   Site Map
Jupiterweb networks

internet.comearthweb.comDevx.comClickZ

Search Jupiterweb:

Jupitermedia Corporation has four divisions:
JupiterWeb, JupiterResearch, JupiterEvents, and JupiterImages

Copyright 2004 Jupitermedia Corporation All Rights Reserved.
Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Jupitermedia Corporate Info | Newsletters | Tech Jobs | E-mail Offers