Adding / Storing Images in XML and including Html tags in the XML file.
If, we can include Html tags inside XML Nodes, then we can surely include images in XML Nodes using the html tag, <img>.
To include Html tags in XML, we can use CDATA
General format for CDATA :-
<xml_node> <![CDATA[datas_with_html_tags]]> </xml_node>
for eg the line,
<tiger> <![CDATA[<h1>Tiger</h1>]]> </tiger>
in a xml file will turn the data Tiger into <h1> size while appear in a webpage.
So what we are waiting for? Lets go back to our pages.xml file and do necessary modifications.
BLACK indicates codes from previous tutorial section.
RED indicates newly added code.
<?xml version="1.0" encoding="ISO-8859-1"?>
<![CDATA[<h3>Tiger</h3><img src=tiger.jpg><p>Many argue lion is the king of forest. But, as a tiger all I got to say to you is that lions are cowards. On the fight for territorial dominance between two lions the weaker one fails and ran away showing his back, but we tigers fight to the death. We never run away showing our back.
<p>Next time when you come to forest, I will make sure, that I will bite your throat and suck the blood of your heart. Haaeerrrrrrr !!!!!!!!!!!!!!!!</p>]]>
<![CDATA[<h3>Lion</h3><img src=lion.jpg><p>Ok, u guys heard the tiger? Huh? Well we lions are very romantic. Indeed the most romantic in the whole forest, we rule the forest, and we have lots of lioness girl friends. In my territory I don’t allow any other male lions and I make love with all the lioness in my territory.</p> <p>So who is the best? Me or crack head tigers?. Aaaaaaaaummm !!!!!!!! </p>]]>
<![CDATA[<h3>Bear</h3><img src=bear.jpg><p><p>Well, both tiger and lions claims they are the best. Because they are spineless creatures. I never claim I am the best like them, because I am the best.</p> <p>Come to me, I will get you lots of honey from forest. Baaeerrr !!!!!!!!!</p></p>]]>
<![CDATA[<h3>Ostrich</h3><img src=ostrich.jpg><p>Hey people, me ostrich never claims to be the best but u guys know me well. I am the best of the best. Come to me I will make a Big hole in your head and suck your brain in no time. Cuk Cuk Cuk Cuk !!!!!!!!!</p>]]>
<![CDATA[<h3>Contact Me</h3><img src=eagle.jpg></br></br>Satheesh .S</br>No : 54,</br>Main Rd, Podanur(PO),</br>Coimbatore - 641023.</br>India.</p>]]>
we can clearly see in the above pages.xml file, lots of Html tags are used within XML nodes with the help of CDATA.
Final Output of index.html after including html tags inside xml tags in pages.xml using CDATA
In the above output, we can see a image is displayed in the webpage index.html from a XML Node and also other parameters like heading, line breaks etc have the effect in the webpage.
And, that’s the end of this simple AJAX website tutorial.
Thank you :)