Home arrow XML arrow Page 4 - An Introduction to XML
XML

An Introduction to XML


If you need convincing as to why to use XML, Dan Wellman can tell you. He gives a little background, some details on its ease of use, and a basic example to demonstrate the qualities of XML.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 30
September 13, 2004
TABLE OF CONTENTS:
  1. · An Introduction to XML
  2. · Reasons to Use XML
  3. · A Basic XML Example
  4. · Create Items in the XML File

print this article
SEARCH DEVARTICLES

An Introduction to XML - Create Items in the XML File
(Page 4 of 4 )

Now you are ready to create a couple of news items to your XML file.  Add the following code:

<news>
 <article ArticleNumber="001">
  <headline>Squirrel Voted in As Mayor Of London!</headline>
  <story>In a shock landslide poll result, the new Mayor of London was announced yesterday to be, for the first time in history, a rodent.  The existing Mayor will serve out the rest of his term this week before standing down to one of a rare breed of red squirrel.  The new Mayor was reluctant to speak to us yesterday, but our sources confirm he is serious and committed to his new role.  Public opinion seems mixed at this point, one bystander said "This is nuts".</story>
 </article>
 </article ArticleNumber="002">
  <headline>Microsoft Announce New Super-Stable OS</headline>
  <story>Bill Gates yesterday announced the next realease of the popular Windows operating system will be the "most stable yet".  Extensive User Testing has been successful so far, with only 765489652554, hang-ups, freezes or crashes on the prototype OS since testing began yesterday.</story> </article>
</news>

You can add as many of these articles to your XML document as you like, there are no limits or boundaries.  For reference, the whole file should now look like this:

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE News [
<!ELEMENT News (article)>
<!ELEMENT  Article (Headline+, story+)>
<!ELEMENT Headline (#PCDATA)>
<!ELEMENT Story (#PCDATA)>
<!ATTLIST Article ArticleNumber ID #REQUIRED>
]>
<news>
 <article ArticleNumber="001">
  <headline></headline>
  <story></story>
 </article>
 <article ArticleNumber="002">
  <headline></headline>
  <story></story>
 </article>
</news>

Test it in a Browser

Save the file as news.xml, and once you have done this you can see how this file looks in a browser.  I've used Internet Explorer 5.5, which has an XML parser, if you are using a different browser, you need to ensure it offers support for XML. Once the document has loaded in your browser, you should see the xml declaration at the top, followed by the first line of the DTD, followed in turn by your news articles.  This indicates that it works! 

We now need to create an HTML file that makes use of this information and presents it in a slightly better way. There are several ways of reading an XML data source, some involving JavaScript. The easiest way by far however, can be achieved using just HTML.  But before this will work, you need to remove the DTD you have just spent some time perfecting.  DTD's are an integral part of XML, which is why I've chosen to show you how to create one, but for a simple document such as this it is not needed.  Reopen news.xml in Notepad and remove the DTD (everything from <!DOCTYPE to ]>) and save it as news2.xml.  You can still view this file in a browser, and it will still be classed as well-formed.
 
Now, back in Notepad, open a new file and fill it with the default HTML tags:

<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>

There are two stages to this part, we need to make the HTML page read the information from the XML file, and we need to format the information taken from the XML file and present it.  The data can be read using the <xml> tag in the body of the document

<xml id="news" src="news2.xml"></xml>

This will read the xml file. To present it, you need to create a table and a span data field for each of the bottom level child elements.  Add the following code directly below the <xml> tag:

<table border="0" datasrc="#news">
<tr>
<td><span datafld="headline"></span></td>
</tr>
<tr>
<td><span datafld="story"></span></td>
</tr>
</table>
 
Now save the file as news.htm and open it in a browser.  As if by magic, your two headlines and associated news stories should appear on the page.  You can add as many of these headline and story pairs to the xml file without modifying the HTML document, and they will be displayed as subsequent rows in the table.  This approach is called XML data islands and can be used in a separate file, as shown here, or embedded within the HTML document.  I find it better to use a separate file as you’re hardly serating content from format when using one file. 

Conclusion

You have some basic control over the formatting of the HTML document when adding CSS or formatting tags such as <b>, <I> or <font> to control the appearance of the content.  You can take this a little further with JavaScript, but for ultimate control, you need XSL or eXtensible Stylesheet Language, which is another article in itself.  I hope that this example has highlighted some of the power and usefulness as XML, the language that is reported to be the future of the Internet.  


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
XML ARTICLES

- Open XML Finally Supported by MS Office
- XML Features Added to Two Systems
- Using Regions with XSL Formatting Objects
- Using XSL Formatting Objects
- More Schematron Features
- Schematron Patterns and Validation
- Using Schematron
- Datatypes and More in RELAX NG
- Providing Options in RELAX NG
- An Introduction to RELAX NG
- Path, Predicates, and XQuery
- Using Predicates with XQuery
- Navigating Input Documents Using Paths
- XML Basics
- Introduction to XPath

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials