xml to html - using xsl in html - xml xsl



  • The XSL and XML will work only in server side code. So, we should use web server to run this code.
  • To Know about XSL, XML to HTML we should know basics things these technical terms.

XSL:

  • The XSL (eXtensible Stylesheet Language) is used to describe the styles for displaying XML.
  • The XSL defines the styles for the XML file elements and data that could be viewed in web browser.
  • The styles can be reused, so describe the styles in a single file that will be used in many XML files.

XML:

  • The XML (eXtensible Markup Language) is used to describe collection of data.
  • The XML code is w3c recommended format.
  • The XML structure contains nested of elements. The outermost element is called root element.
  • Each element has starting and ending tags.

HTML:

  • The HTML (HyperText Markup Language) is used to show the webpage contents like text, images, video and others.
  • The HTML contents are displayed in Web browser.

Sample coding for tutorial.xsl:

<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
      <body>
      <xsl:for-each select="wikitechy_tutorial/tutorial">
         <div style="background-color:#71a6fc;padding:4px">
             <span style="font-weight:bold">
      <xsl:value-of select="topic"/>
               </span>
         </div>
         <p style="margin-left:20px;font-size:14pt">
      <xsl:value-of select="description"/>The one stop for all your learning's need.
         </p>
      </xsl:for-each>
      </body>
</html>


Code Explanation for tutorial.xsl :

xml to xsl

  1. Version of xml and its version declared.
  2. version of XSL and namespace from w3 has been declared.
  3. For each element inside the wikitechy_tutorial as tutorial will be called in a loop for formatting.
  4. Styles for design the heading will be declared in <div> tag.
  5. Value of tutorial topic will get from XML file.
  6. Value of tutorial description will get from XML file.
  7. We can add our own text for each data get from the XML file.


Sample coding for HTML Grid:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="tutorial.xsl"?>
<wikitechy_tutorial>
    <tutorial>
      <topic>HTML
      </topic>
      <description>A HTML Wikitechy Tutorials for learners
      </description>
    </tutorial>
    <tutorial>
      <topic>CSS
      </topic>
      <description>A CSS Wikitechy Tutorials for learners
      </description>
    </tutorial>
    <tutorial>
      <topic>PHP
      </topic>
      <description>A PHP Wikitechy Tutorials for learners
      </description>
    </tutorial>
</wikitechy_tutorial>

Code Explanation for HTML Grid:

xml xls

  1. The “wikitechy_tutorial” is Root element of the XML file all elements should be inside this element.
  2. Tag for HTML tutorial like topic and its description.
  3. Tag for CSS tutorial like topic and its description.
  4. Tag for PHP tutorial like topic and its description.


Output for HTML Grid:

    html xml
  1. Set of styles has been applied to the tutorial topics and its description.

Browser Support for XSL XML TO HTML

Yes Yes Yes Yes Yes

Related Searches to XSL XML TO HTML