From virtualMV2015wiki
Jump to: navigation, search
 Home  Main Page <

Introduction: Extensible Markup Language (XML)

The basic outline for these notes is based on a presentation by Daniel Rutten, from Clockwise Smart Software Solutions, to the Napier, (New Zealand) Microsoft Dot net user group in 2009.Based on a presentation by Daniel Rutten (2009)[1].

Icon Objective.png

Objective XML

By the end of this page you will be able to:

  • Describe XML
  • Style an XML file using CSS

Basic XML file

 <?xml version="1.0" encoding="ISO-8859-1"?>
    <comment>Requires a very large grey coat</comment>

Note how <comment> is not mandatory

XML and Related Technologies

  • XPath, XSL-FO, XLink, XPointer, DTD
  • XSD, XForms, XQuery, SOAP, WSDL

Brief history


  • 1960’s
  • Standard Generalized Markup Language
  • Manage large documents
  • Subject to frequent revisions
  • Printed in different formats
  • Specifies rules for tagging elements
  • SGML ISO-8879, 1986


  • Derived from SGML
  • eXtensible Markup Language
  • Easier to implement but less flexible
  • No need for a Document Type Definition
  • W3C Recommendation in 1998

EXI (Efficient XML Interchange)

The World Wide Web Consortium (W3C) has issued a standard for a compact form of XML for use on smartphones and devices with memory or bandwidth constraints. The Efficient XML Interchange (EXI) standard will reduce XML processing's demands for network utilization, power, and energy. Work is already underway to support the standard for the compact representation of XML information in development toolkits. "[EXI is] an optimization of the XML exchange," says John Schneider, editor of the EXI specification. EXI could be used in sensor networks, cameras, automobiles, real-time trading systems, and wireless phones. "Even though [XML is] used everywhere, it's not used in some places because [of] constraints like giant documents or battery consumption or limited bandwidth," says W3C's Liam Quin. EXI could potentially displace XML at some user sites, say W3C officials. (Krill, 2011, March 10)[2]

HTML versus XML

  • HTML
    • Designed to display data
    • Focus on how data looks
    • Fixed tag set and semantics
  • XML
    • Designed to describe data
    • Focus on what data is
    • Extensible(!) tag set and semantics

Six golden rules of XML

1. All XML documents begin with

<?xml version="1.0" encoding="…"?>

2. All XML documents must have one(and only one) root element

3. All XML elements must have a closing tag

 <p>This is a paragraph</p>
 <emptytag /><emptytag></emptytag>

4. XML tags are case sensitive

<name> and <NAME> are not the same

5. All XML elements must be properly nested

Your <b><i>yuck</b></i> days are over

6. Attribute values must always be quoted

<note date="25 may 2006"></note>

Well-formed versus Valid

  • A "Well Formed" XML document has correct XML syntax
  • A "Valid" XML document also conforms to a DTD or XSD

Some features

  • Comments
  <!– This is a comment -->
  • Adding data that is not to be parsed (e.g. inserting HTML into an XML file
  <![CDATA[ no parsing here ]]>
  • White space
  • Namespaces: Allow you to cope with merging two XML files which have the same tags but for different purposes (e.g. Merging a Staff file with a student file.
  • Escape Characters
    &lt; < less than
    &gt; > greater than
    &amp; & ampersand
    &apos; ' apostrophe
    &quot; " quotation mark

Applying a CSS to an XML file


If we create an XML file as

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="sample.css"?><people>
    <comment>Trunk line stomp</comment>


We can build a CSS to style the XML file as follows:

people     /* styles for xml definitions  */ 
{ background-color: #ffffff; width: 100%; }
{ display: block; color: #FF0000; font-size: 15pt; }
{ color: #3333CC; font-size: 12pt; }
{ color: #33CC33; font-size: 20pt; }
{display: block; color: #000000; font-size: 10pt; margin-left: 20pt; }

Note: The display:block style forces the next element to be on a newline.


Now if we create a container page, where we include an iFrame we can display the xml file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<title>Assessment 1</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css" media="all">@import "sample.css";</style>
Sample of XML and CSS
<div id="bodyarea">
	<iframe src="sample.xml" width=800 height=200 frameborder=0 scrolling=yes></iframe></div>

Example :Click here to run sample.html. The diagram following shows the result in Google's chrome.

XML/CSS sample)


Html can be included in an xml file by adding


to the root element Using this technique allows us to for example display an image within an xml file.

So if we have an XML file (xmlImage.xml) as

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="xmlImage.css" type="text/css"?>
<data xmlns:html="http://www.w3.org/1999/xhtml">
   <html:img src="fern.png" width="48" height="36"></html:img>
<heading>Fern</heading> <name>NZ Silver Fern</name> 
<description>The Silver fern is used by many New Zaland sports teams ...
   <html:img src="Kowhai.png" width="48" height="48" />
<heading>Kowhai</heading> <name>NZ Kowhai flower</name> 
<description> The Kowhai is a yellow flower that ...

And an associated style sheet (xmlImage.css)

/* CSS Document */
#contents { padding: 24px; background: #EBF5FC;	min-height: 300px; }
body      { font-family: verdana,sans-serif; background: #EDEBE3; color: #333;
	    padding: 16px 20px 48px 20px; margin: 0;}
h1        { font-family: trebuchet ms; 	font-weight: bold; color: #333; margin:0; }
/* CSS for XML */
heading      { font-size: 24pt; color: #FF0000; }
name         { color: #0000FF; font-size: 12pt; }
description  { display: block; color: #000; margin-left: 12pt; margin-left: 60px; }

If we put this into an iframe page for display (xmlImage.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<title>XML Image Example</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" type="text/css" href="xmlImage.css">
  <h1>XML Image Example</h1>
  <div id="main">
	<div id="contents">
  	  <p class="note">XML Generated information using an XML File and CSS</p>
      <iframe src="xmlImage.xml" width="100%" height="440px" scrolling="no" frameborder="0">

Assuming the images are available, this would render in the web browser ...

Example :Click here to run xmlImage.htm. The diagram following shows the result in Google's chrome.

XML/CSS image example)

For more information refer to (Cormia, 2011)[3]



Icon References.png References

  1. Rutten, D. (2009) An introduction to XML and XSLT. Clickwise Smart Software Solutions. To Dot Net User Group, Napier, New Zealand [PPT]
  2. Krill, P. (2011, March 10) W3C Issues Compact XML Standard. InfoWorld. Retrieved from http://www.infoworld.com/d/application-development/w3c-issues-compact-xml-standard-198
  3. Cormia, R. (2011) COIN78 - XML Lesson 5: Using CSS with XML. Retrieved from http://fgamedia.org/faculty/rdcormia/COIN78/lesson05.htm
  4. Scalable Vector Graphics. (2010, March 20). In Wikipedia, The Free Encyclopedia. Retrieved 10:59, March 20, 2010, from http://en.wikipedia.org/w/index.php?title=Scalable_Vector_Graphics
  5. XML Course Tutorials and Reference Guide (2011). Retrieved from http://www.developphp.com/list_xml.php

XML. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved March 29, 2017, from http://www.virtualmv.com/wiki/index.php?title=XML    (zotero)