Converting XML to HTML
6.1 Common code for HTML conversion
6.1.1 Creating pages
Converting XML to HTML is rather easy, compared to conversion into Pdf. The non-trivial point concerns the layout of the page, navigation buttons, meta data, etc. One question is: should we put navigation buttons on the top and bottom of the page? If a page is large, it can be interesting to have a ‘next’ button near the end, this avoids the need to scroll to the top, if you want to continue reading. Starting in 1995, the Raweb was produced by latex2html, which can conditionnaly insert navigation buttons1; but this depends on the number of characters in the page, and not the
effective size; as a consequence, the layout of the page seems to be random. The situation changed in 19992, the text is in a frame, and the navigation buttons are in an another frame, placed above
the text; the buttons appear only in the first frame. In 20033the situation changed again. There
are two possible views. By default, there are no frames, but a button (the ‘TOC’ button) that creates two frames: the TOC on the left, the text on the right. The text has navigation buttons on the top and the bottom (but there are fewer buttons on the bottom). The same idea is used in 2004 and explained in this document. See figure 6.2.
Here is a helper for producing an <img>. It takes two arguments $alt and $src. Icons are in a shared directory.
519 <xsl:template name="icon.image"> 520 <xsl:param name="alt" /> 521 <xsl:param name="src" />
522 <img align="bottom" border="0" alt="{$alt}" src="../icons/{$src}.gif"></img> 523 </xsl:template>
The next command takes three arguments, $nom, $position, and $accesskey. If $nom is empty, the result is a simple image (for instance named next_motif_gr.gif, where ‘gr’ stands for ‘grey’ instead of black and white). Otherwise, it is the name of a HTML file, and the result is an anchor <a>, whose href attribute is this file name. The image is different (for instance named next_motif.gif, the images are designed so that it is obvious that they have the same purpose, one of them being active, the other inactive), but the alt field is the same; the accesskey4attribute
is set only in this case. In any case, there is some white space after the button. Note: in certain case, a anchor has a target attribute. This can be _alt (this is a name not recognised by the standard; the effect is that the browser opens a new window); this can be _top or _parent (these names are defined by the standard); it can also be mainraweb2004 (this is needed for links from the toc to the main frame). The buttons created by this procedure are in the main frame and point to the main frame; they have no target attribute.
524 <xsl:template name="make.icon"> 525 <xsl:param name="nom" /> 526 <xsl:param name="position" /> 527 <xsl:param name="accesskey" /> 528 <xsl:choose> 529 <xsl:when test="$nom=’’"> 530 <xsl:call-template name="icon.image">
531 <xsl:with-param name="alt" select="$position" />
532 <xsl:with-param name="src" select="concat($position,’_motif_gr’)" /> 533 </xsl:call-template>
534 </xsl:when> 535 <xsl:otherwise>
536 <a href="{$nom}.html">
1See for instance http://www.inria.fr/rapportsactivite/RA96/algo/algo.html 2See for instance http://www.inria.fr/rapportsactivite/RA99/algo/algo.html.
3See for instance http://www.inria.fr/rapportsactivite/RA2003/algo2003/algo.html; this is the version without
the TOC.
4If the acceskey is, say N, pressing down the alt key together with the letter N has teh same effect as clicking on
Figure 6.1: The layout of a sample page for a Team without topics.
537 <xsl:attribute name="accesskey"><xsl:value-of select="$accesskey" />
538 </xsl:attribute>
539 <xsl:call-template name="icon.image">
540 <xsl:with-param name="alt" select="$position" />
541 <xsl:with-param name="src" select="concat($position,’_motif’)" /> 542 </xsl:call-template> 543 </a> 544 </xsl:otherwise> 545 </xsl:choose> 546 <xsl:text> 547 548 </xsl:text> 549 </xsl:template>
The next piece of code creates five buttons, and two other items, and puts them in a <div>. The first three are created by make.icon; this is something that takes three arguments; in order to make this document shorter, we have indicated only the value of the parameters, the names being $nom, $position and $accesskey in order. In the same fashion, icon.image is called with two parame- ters, named $alt and $src, we show only the value. The three quantities $precedent, $suivant and $haut are arguments to the procedure. They refer to the previous page, next page and top page, which may exist or not; if the page exists, the button is in an anchor, otherwise it is just an im- age. The following buttons are anchors to ‘../adage2004/adage.pdf’ and ‘../adage2004/adage.ps.gz’, assuming that $year contains 2004, and $LeProjet contains adage. The next item is an anchor, whose id is ‘toclink’, and whose href is something like ‘adage_tf.html?../adage2004/uid4.html’: after the question mark, there is the address of the current page, and before it is the name of the page with the frames. Then comes a javascript (it is defined in lib.js). The raweb.css file gives ‘display:none’ as property for the element identified by the toclink id. As a consequence, the button is invisible. However, if the name of the frame is ‘mainraweb2004’, the code on line 580 sets the ‘display’ style of elements with id ‘toclink’ to ‘inline’, so that the button is visible.
Assume that the button is visible, and you click on it. This will load the ‘adage_tf.html’ file; its content is explained later; all that you have to know is that the browser contructs a page with two frames, on the left the TOC, on the right is the current page (what follows the question mark); the name of this second frame is ‘mainraweb2004’, as a consequence the button is invisible.
The main Raweb location is http://www.inria.fr/rapportsactivite, this contains a subdirectory for each year, for instance RA2004. In this directory, we have some common files and directories (the css, the icons, etc.), and the teams, for instance adage2004. For a HTML page under adage2004, the next page can be foo.html or ../adage2004/foo.html, the style sheet is in ../raweb.css.
550 <xsl:template name="page.icons"> 551 <div class="NavigationIcones"> 552 <xsl:param name="precedent" /> 553 <xsl:param name="suivant" /> 554 <xsl:param name="haut" />
555 <xsl:call-template name="make.icon">("$precedent", "’previous’", "’P’") 556 </xsl:call-template> 557 <xsl:call-template name="make.icon">("$haut","’up’","’U’") 558 </xsl:call-template> 559 <xsl:call-template name="make.icon">("$suivant","’next’" ,"’N’") 560 </xsl:call-template> 561 <a href="../{$LeProjet}{$year}/{$LeProjet}.pdf">
562 <xsl:call-template name="icon.image"> ("’PDF’","’pdf_motif’") 563 </xsl:call-template>
564 </a>
565 <a href="../{$LeProjet}{$year}/{$LeProjet}.ps.gz">
567 </xsl:call-template> 568 </a> 569 <a id="toclink"> 570 <xsl:attribute name="href"> 571 <xsl:value-of select="$LeProjet"/>_tf.html?../<xsl:value-of 572 select="$LeProjet"/><xsl:value-of select="$year"/>/<xsl:value-of 573 select="@id"/>.html</xsl:attribute>
574 <img align="bottom" border="0" alt="Access to tdm" 575 src="../icons/contents_motif.gif" />
576 </a>
577 <script type="text/javascript">
578 <xsl:comment> var cible=this.location; 579 if (self.name != "mainraweb04")
580 changestyle(’toclink’,’inline’);</xsl:comment>
581 </script> 582 </div>
583 </xsl:template>
The bottom of the page contains only two buttons: previous and next. We have used the same conventions as above. The parameters $precedent and $suivant contain the locations of the previous and next pages. We insert another item, a javascript. These three items are each in a <div>, with an id attribute, the raweb.css file says that these should be flushed left or right, or centered. There is a <br> element before and after these three <div> elements. There is also an empty <p>.
584 <xsl:template name="pagedown.icons"> 585 <xsl:param name="precedent" /> 586 <xsl:param name="suivant" />
587 <xsl:comment>FIN du corps du module</xsl:comment> 588 <br/> 589 <div id="tail_agauche"> 590 <xsl:call-template name="make.icon">("$precedent","’previous’","’P’") 591 </xsl:call-template> 592 </div> 593 <div id="tail_adroite">
594 <xsl:call-template name="make.icon"> ("$suivant","’next’","’N’") 595 </xsl:call-template>
596 </div>
597 <div id="tail_aucentre"> <xsl:call-template name="classeurlink2" /> </div> 598 <br /><p/>
599 </xsl:template>
The bottom of the page contains, between the previous and next button, a javascript <div> that reads: “You are interested in this page Put in folder !”.
600 <xsl:template name="classeurlink2"> 601 <div class="folderLine">
602 <script type="text/javascript" src="../classeur/classeurInOut.js" /> 603 <noscript><p>Using javascript allows access to folder</p></noscript> 604 </div>
605 </xsl:template>
The top of the page contains, on the right, a <div> element (whose color is a kind of blue, the raweb.css file says it is BCBCF9), with an image and a pointer to the help page for the folder. There is also a <script>, that allows you to put the current page in the folder (same action as on the bottom of the page), or to view and manipulate the folder.
606 <xsl:template name="classeurlink1"> 607 <div class="folderButtons">
609 <img id="folderIcon" src="../icons/folder.gif" alt="icon of folder" border="0"/></a> 610 <script type="text/javascript" src="../classeur/classeurInOutShow.js" />
611 </div>
612 <noscript> Using JavaScript allows access to folder </noscript> 613 </xsl:template>
The middle part of the head of the page consists in two buttons vertically aligned (because of the <br>) in a <small> element. If you click on them, you get the help, and the index. On the right of these, you will find the search form.
614 <xsl:template name="head-middle"> 615 <div id="head_aucentre">
616 <xsl:call-template name="formRechercheExalead" /> 617 <small>
618 <a href="../aide.html" target="aide" class="notcd" onclick="displayHelp(this)">HELP</a> 619 <br /> <br />
620 <a href="../index/index.html" target="_alt">INDEX</a> 621 </small>
622 </div>
623 </xsl:template>
This constructs the search <form>. We do not indicate here all the attributes, and the hidden fields.
624 <xsl:template name="formRechercheExalead"> 625 <form ...>
626 Search in Activity Report, year <xsl:value-of select="$year" />:<br /> 627 <input name="_q" size="20" maxlength="800" value=""/>
628 </form> 629 </xsl:template>
Another form. Why are two forms required? The search engine was AltaVista until July 2005, and Exalead after that. The version of the style sheet we present here is dated 2005/03/01. Apparently, this form is used, rather then the preceding one. The difference is tiny (of course, the result of the search engine is completely different, but this has nothing to do with the HTML input).
630 <xsl:template name="formRecherche"> 631 <form id="recherche" ... >
632 <input NAME="q1" size="20" maxlength="800" VALUE=""/> 633 </form>
634 </xsl:template>
At the very bottom of the page, we have the Inria logo and a link to Inria’s home page. The <div> and <span> elements have an id that is interpreted by the raweb.css style sheet.
635 <xsl:template name="bandeau_inria"> 636 <div id="bandeau">
637 <div id="bandeau_filet"></div>
638 <a href="http://www.inria.fr"><span id="bandeau_logo" /></a> 639 </div>
640 </xsl:template>
This creates the top of the page. It takes four arguments, namely $precedent, $haut, $suivant, which are the names of the previous, up or next page, and $couleur. This last value is not a color, it is a symbolic name (it is ‘premiere’ or ‘autre’, French for ‘first’ and ‘other’) that will be added as class attribute to the main <div> element. This <div> element has three <div> children, that explain what should be put on the left, the middle, and the right of the page. We have already explained what is on the middle and the right. On the left, there are three lines, separated by <br>, using a <small> font. The first line contains something like “Inria / Raweb 2004”, with two links, the second line contains “Team: Adage”, with a link to the team’s home page (note that ‘Adage’
comes from <shortname>, and the link points to ‘adage’, that comes from $LeProjet). The last line contains the navigation buttons, created by page.icons (arguments are obvious, they are not indicated here, but replaced by a question mark).
641 <xsl:template name="bandeau-sup"> 642 <xsl:param name="couleur"/> 643 <xsl:param name="precedent" /> 644 <xsl:param name="haut" /> 645 <xsl:param name="suivant" /> 646 <div id="toplign">
647 <xsl:attribute name="class"><xsl:value-of select="$couleur" /></xsl:attribute> 648 <div id="head_agauche">
649 <small>
650 <a href="http://www.inria.fr" target="_top">Inria</a> / 651 <a href="../../index.html" target="_top">Raweb 652 <xsl:value-of select="$year" /></a>
653 <br />
654 <a href="http://www.inria.fr/recherche/equipes/{$LeProjet}.en.html" target="_alt"> 655 <xsl:value-of select="$LeTypeProjet" />:
656 <xsl:value-of select="/raweb/identification/shortname" /></a> 657 </small> 658 <br /> 659 <xsl:call-template name="page.icons"> (?,?,?) 660 </xsl:call-template> 661 </div> 662 <xsl:call-template name="head-middle" />
663 <div id="head_adroite"> <xsl:call-template name="classeurlink1" /> </div> 664 </div>
665 </xsl:template>
This piece of code constructs the start of a page. In order to make things easier to understand, we split the code in two parts. In the first part, we construct three variables. One contains the au- thors: for each <person>, we take the <firstname> and <lastname>. The second variable contains the toplevel keywords, from <keyword>. The last variable contains the title, from <bodyTitle>.
666 <xsl:template name="page.head"> 667 <xsl:variable name="MTAUT"> 668 <xsl:for-each select=".//person"> 669 <xsl:value-of select="firstname" /> 670 <xsl:text> </xsl:text> 671 <xsl:value-of select="lastname" /> 672 <xsl:text>/</xsl:text> 673 </xsl:for-each> 674 </xsl:variable> 675 <xsl:variable name="MTMCL"> 676 <xsl:for-each select="./keyword"> 677 <xsl:apply-templates /> <xsl:text>/</xsl:text> 678 </xsl:for-each> 679 </xsl:variable>
680 <xsl:variable name="MTDES"> <xsl:value-of select="./bodyTitle" /> </xsl:variable>
Action is trivial. The <title> will contain something like “Team-Adage”, while dc.title contains the title of the document.
681 <head> 682 <title>
683 <xsl:value-of select="$LeTypeProjet" />-<xsl:value-of 684 select="/raweb/identification/shortname" /> 685 </title>
686 <link rel="Stylesheet" href="../raweb.css" type="text/css" /> 687 <meta name="description" content="{$MTDES}" />
688 <meta name="dc.title" content="{$MTDES}" /> 689 <meta name="dc.creator" content="{$MTAUT}" /> 690 <meta name="dc.subject" content="{$MTMCL}" /> 691 <meta name="dc.publisher" content="INRIA" />
692 <meta name="dc.date" content="(SCHEME=ISO8601) 2002-01" /> 693 <meta name="dc.type" content="Report" />
694 <meta name="dc.language" content="(SCHEME=ISO639-1) en" /> 695 <xsl:call-template name="classeurDecl"/>
696 <xsl:call-template name="interrogationDecl"/> 697 </head>
698 </xsl:template>
This declares the three javascripts.
699 <xsl:template name="interrogationDecl">
700 <script type="text/javascript" src="../interro.js" /> 701 </xsl:template>
702 <xsl:template name="classeurDecl">
703 <script type="text/javascript" src="../classeur/classeur.js" /> 704 <script type="text/javascript" src="../lib.js" />
705 </xsl:template>
We generate a HTML page for each module, one for the composition of the team (that comes before the first module), and one for the bibliography that comes last. The first page (the title page) will contain the full table of contents. The page with the composition of the team is the second page, it is constructed here, by applying a template to the <team> element. The links to the top and previous pages are identical, they point to the title page (its name comes from the variable $LeProjet), and the link to the next page is to the first <subsection> (the name of the page is the id attribute, with a ‘.html’ extension). In order to reduce the size of this document, we do not show the parameters to bandeau-sup and pagedown.icons, the value is obvious, it is replaced by a question mark.
Assume that the id of the team is ‘uid1’, its name is ‘adage’ and the current year is 2004. Then the result is a HTML file, named adage2004/uid1.html, that contains a <html> element, that contains a <body> element5. We have explained above how page headers and footers are created,
let’s explain here how the body is constructed. First, we extract all <moreinfo> elements that come from this element or the <identification> part, they are output in a <blockquote> element. After that, we insert the title in a <h1> heading. This is followed by all the <participants>