From WikiEducator
< VirtualMV‎ | XML
Jump to: navigation, search


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="">
   <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)[1]


VmvIcon References.png References

  1. Cormia, R. (2011) COIN78 - XML Lesson 5: Using CSS with XML. Retrieved from
  2. Scalable Vector Graphics. (2010, March 20). In Wikipedia, The Free Encyclopedia. Retrieved 10:59, March 20, 2010, from

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/XML/XML+HTML. (2017). In WikiEducator/VirtualMV wiki. Retrieved October 22, 2017, from    (zotero)