How to Create a Web Page Using XML

XML, which stands for Extensible Markup Language, is the international standard (ISO) for data representation on the web. The primary difference between XML and XHTML is that XML was designed for data storage and transport while HTML was created for the display or representation of data. It is possible to use XML to store the data to be displayed on a web page and by using XML XSLT (Extensible Stylesheet Language Transformations), Javascript, or other web-based programming language to produce a web page from an XML document.

Instructions

1. Create a new web page in your web development program or text editor.

2. Start a script node in the XHTML document body and create an a XML document loader. Internet Explorer will require a new ActiveXObject to be created where all other browsers can use a XML document method called "createDocument" to load the example XML file. The following is the script node:
   <script type="text/javascript">
   var myXMLDoc=null;
   if (window.ActiveXObject)
   {// Internet Explorer is checked first.
   myXMLDoc=new ActiveXObject("Microsoft.XMLDOM");
   }

   else if (document.implementation.createDocument)
   {// Load using the Browser DOM definition if verified not to be Internet Explorer
   xmlDoc=document.implementation.createDocument("","",null);
   }
   else
   {
   alert('Your web browser may be out of date!!');
   }

3. Verify the XML document is valid, then load the XML file by using the load method that appears below.

   if (myXMLDoc!=null)
   {
   myXMLDoc.async=false;
   myXMLDoc.load("ArcadeUsers.xml");

4. Output the XHTML Table definition tag followed by getting a handle to the XMLdocument tag that has "User_Name" as the attribute value. For every "User_Name" in the XML document, there will be a corresponding XHTML Table entry made. For the next element in the XHTML Table Row, the value for the tag labeled "Email" will be output into the next XHTML table element. The coding appears below.

   document.write("<table border='1'>");

   var yDocument=myXMLDoc.getElementsByTagName("User_Name");
   for (i=0;i<yDocument.length;i++)
   {
   myXMLDoc.write("<tr>");
   myXMLDoct.write("<td>");
   myXMLDoc.write(
   yDocument[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue);
   myXMLDoc.write("</td>");

   myXMLDoc.write("<td>");
   myXMLDoc.write(
   yDocument[i].getElementsByTagName("Email")[0].childNodes[0].nodeValue);
   myXMLDoc.write("</td>");
   myXMLDoc.write("</tr>");
   }

5. Close the Table definition when no more XML tags meet the value's to be used for outputting the XHTML table. Use the following programming language.
   myXMLDoc.write("</table>");
   }
   </script>

6. View the XHTML page created from the example XML document.

Tips & Warnings

• Research the use of XSLT to dynamically create web pages from stored XML data.

Resources

• W3Schools.com for an introduction to XSLT
• Microsoft's ASP developer XML resource