produces an HTML file from XML

I have a XML file with Rectangle elements that contains sub-elements - RGBcolor,ID, height and width. Now i need to draw the rectangles into a HTML web page with the mentioned sizes, color and name into several DIVs. how do i do it? I'm new in the business so please try to detail as much as you can. here's my xml:

 <?xml version="1.0"?>
 <ArrayOfRectangle xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"      xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<Rectangle开发者_如何学JAVA>
 <Id>First one</Id>
 <TopLeft>
  <X>0.06</X>
  <Y>0.4</Y>
 </TopLeft>
 <BottomRight>
  <X>0.12</X>
  <Y>0.13</Y>
 </BottomRight>
 <Color>
  <Red>205</Red>
  <Green>60</Green>
  <Blue>5</Blue>
 </Color>
</Rectangle>
<Rectangle>
 <Id>Second One</Id>

The XML is fine and i even deserialized it back, but i dont know how to do the parsing into HTML.. Thank you all

The short answer is that you can't. HTML is a text markup language, not a graphics language.

You could convert all your rules to CSS and apply them to divs (generic block elements), although that would be a hack.

SVG is a graphics language which is going to be better supported than your made up one, but still has limitations. If you convert your rules into JavaScript then Raphaël can generate SVG or VML as required by different browsers. This would give wider support at a cost of depending on JS.

For widest support, you could convert the XML document into a PNG image on the server.

The specifics of how you convert from your format to another are open to several options. You'll need an XML parser. Then you need to read the document and output whatever format you like. You could use DOM for this, and XSLT is a popular option (especially for XML to other XML translations).

It's not clear to me whether your problem is designing the HTML (and/or SVG) that you want to generate, or in deciding what technology to use for the transformation. For simple rectangles, it's certainly possible to us HTML DIV elements with appropriate CSS properties, but SVG gives you more flexibility. Either way, I would use XSLT for the transformation; but allow some time to read up about the language and become familiar with it, because it's probably unlike anything you have used before.