Multimedia Publishing 3 MMP, groep A4

« InDesign Tagged Text File | Voorpagina | InDesign & Cacidi: Data terugkoppelen »

XML via XSLT omzetten naar HTML

Het bestaande XML-bestand kan door middel van XSLT omgezet worden naar HTML.

XSLT-bestand

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-public="-//W3C//DTD HTML 4.01//EN" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" />
<xsl:template match="/">
<html>
 <head>
  <title>Folder Colruyt</title>
  <link rel="stylesheet" type="text/css" href="opmaak.css" />
 </head>
 <body>
  <h1>Folder</h1>
  <xsl:for-each select="Dranken/Bier">
   <div class="artikel">
    <h2><xsl:value-of select="Naam" /></h2>
    <p class="afbeelding"><img src="../images/{translate(translate(translate(translate(translate(translate(Naam, ' ', ''), '(', ''), ')', ''), '-', ''), 'Ã©', 'e'), 'Ã¨', 'e')}.jpg" alt="Foto van {Naam}" /></p>
    <p class="beschrijving"><xsl:value-of select="Beschrijving" /></p>
    <ul>
     <li class="temperatuur">Schenken op <xsl:value-of select="Temperatuur" />Â° <abbr title="Celsius">C</abbr></li>
     <li class="graden"><abbr title="Alcohol">Alc.</abbr><xsl:text> </xsl:text><xsl:value-of select="Graden" />% <abbr title="volume">vol</abbr></li>
     <li class="hoeveelheid"><xsl:value-of select="Hoeveelheid" /></li>
    </ul>
   </div>
  </xsl:for-each>
 </body>
</html>
</xsl:template>
</xsl:stylesheet>

Dit resulteert in de volgende HTML-code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Folder Colruyt</title>
  <link rel="stylesheet" type="text/css" href="opmaak.css">
 </head>
 <body>
  <h1>Folder</h1>
  <div class="artikel">
   <h2>Brigand</h2>
   <p class="afbeelding">
    <img src="../images/Brigand.jpg" alt="Foto van Brigand">
   </p>
   <p class="beschrijving">Een amberkleurig bier met een karaktervolle smaak. Licht bitter dankzij de fijne hop.</p>
   <ul>
    <li class="temperatuur">Schenken op 8 - 10°
     <abbr title="Celsius">C</abbr>
    </li>
    <li class="graden">
     <abbr title="Alcohol">Alc.</abbr> 9%
     <abbr title="volume">vol</abbr>
    </li>
    <li class="hoeveelheid">6 × 33 cl</li>
   </ul>
  </div>
</body>
</html>

In dit voorbeeld wordt er slechts één artikel weergegeven, in werkelijkheid zijn het meer artikels.
Deze HTML-code wordt dan opgemaakt aan de hand van een CSS-bestand.

* {
 margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11pt;
 }

.artikel {
 border: 1px dashed #600;
 width: 400px;
 height: 200px;
 padding: 15px;
 margin: 10px;
 float: left;
 list-style: none;
 }

.artikel ul {
 list-style: none;
 margin-top: 20px;
 }

.artikel ul li {
 color: #999;
 font-size: 10pt;
 text-align: right;
 }

abbr {
 border: 0;
 }

h1 {
 display: none;
 }

h2 {
 font-family: Georgia, serif;
 font-weight: normal;
 border-bottom: 2px solid #f90;
 font-size: 18pt;
 margin-bottom: 10px;
 margin-left: 110px;
 color: #f90;
 }

.beschrijving {
 font-style: italic;
 height: 95px;
 }

.afbeelding {
 margin-top: -40px;
 border: 1px solid #f90;
 float: left;
 margin-right: 10px;
 }

.afbeelding img {
 width: 74px;
 height: 198px;
 }

Reacties

Luc Berth zegt:

Mooi. Keep up the good work.
Geplaatst 1 year ago

Laat een reactie achter