<?xml version="1.0" encoding="ISO-8859-1"?>

<!--XML créé via le KitOOoDVP 4.1-->
<document>
  <!--En-tête d'article-->
  <entete>
		<rubrique>24</rubrique>
		<meta>
			<description>Article DVP avec le nouveau look</description>
			<keywords>look</keywords>
		</meta>
		<titre>
			<page>Article DVP avec le nouveau look</page>
			<article>Article DVP avec le nouveau look</article>
		</titre>
		<date>2012-05-13</date>
		<miseajour>2012-11-27</miseajour>
		<google-analytics>UA-6600376-1</google-analytics>
		<licauteur>djibril</licauteur>
		<lictype>7</lictype>
		<licannee>2010</licannee>
		<serveur>Nono40</serveur>
		<chemin>temp/test</chemin>
		<urlhttp>http://nono40.developpez.com/temp/test/</urlhttp>
		<nopdf/>
		<nozip/>
		<noebook/>
		<pdffilename>fichiers/autre-pdf.pdf</pdffilename>
		<pdf>
			<sautDePageAvantSection>0</sautDePageAvantSection>
			<notesBasPage>FinDocument</notesBasPage>
		</pdf>
	</entete>
	<lecteur>
	  <niveau type="1"/>
	  <duree>30 minutes</duree>
	</lecteur>
  <!--Descriptions des auteurs-->
  <authorDescriptions>
	<authorDescription name="identifient">
			<fullname>Nom Prénom</fullname>
			<url>http://www.developpez.net/forums/member.php?u=11111</url>
			<homepage>
				<title>Site personel</title>
				<url>http://www.developpez.com/</url>
			</homepage>
			<blog>http://blog.developpez.com/</blog>
			<google-plus>https://plus.google.com/up/start/?continue=https://plus.google.com/?hl%3Dfr&amp;type=st&amp;gpcaz=13b96c84&amp;hl=fr</google-plus>
            <liens>
    			<lien type="perso" icone="http://www.developpez.net/forums/images/smilies/ccool.gif">
    				<title>Titre perso</title>
    				<url>http://www.developpez.com/</url>
    			</lien>
            </liens>
		</authorDescription>
    <authorDescription name="djibril" traducteur="1">
      <fullname>djibril</fullname>
      <url>http://www.developpez.net/forums/u35657/djibril/</url>
      <homepage>
        <title>Site personnel</title>
        <url>http://djibril.developpez.com/</url>
      </homepage>
      <liens>
	  	<lien type="perso" icone="http://www.developpez.net/forums/avatars/239428-regis1512.gif?dateline=1240233746">
			<title>lien test</title>
			<url>http://djibril.developpez.com/</url>
		</lien>
	  </liens>
      <blog>http://blog.developpez.com/</blog>
      <google-plus>https://plus.google.com/up/start/?continue=https://plus.google.com/?hl%3Dfr&amp;type=st&amp;gpcaz=13b96c84&amp;hl=fr</google-plus>
    </authorDescription>
    
  </authorDescriptions>
  <!--Résumé très bref de l'article affiché dans le cadre bleu en tête de page-->
  <synopsis>
    <paragraph>Portion de texte<br/> servant de synopsis ou édito pour un article developpez.com. Il vous permet de faire un résumé assez bref de votre article. Ce synopsis peut contenir du texte en <b>gras</b>, <i>italique</i> ou <u>souligné</u>. </paragraph>
    <paragraph>Penser également à y mettre un lien pointant vers la discussion du forum : <lien-forum avecnote="1" id="1191686"/></paragraph>
  </synopsis>
  <!--Licence personnelle si vous ne souhaitez pas celle de developpez.com-->
  <licence>Licence de remplacement</licence>
  <reference>http://djibril.developpez.com/tutoriels/club/dvp-html5/reference/xmltestref-html5.inc</reference>

  <soustitre>Projet d'affichage<br/><image src="./images/HTML5-logo.svg.png"/></soustitre>

  <summary>
    <section id="I">
      <title>Les chapitres ou sections</title>
      <paragraph>Les chapitres ou sections permettent d'organiser votre article. Les sections sont automatiquement ajoutées à la table des matières lors de la génération de l'article. Vous pouvez très bien imbriquer les balises sections pour créer des sous-parties.</paragraph>
    </section>
    <section id="II">
      <title>La notion de paragraphe</title>
      <section id="II-A">
        <title>Balises situées dans une zone &lt;paragraph></title>
        <paragraph>Cette balise permet d'insérer du texte. On peut la retrouver à l'intérieur d'une section, d'un synopsis... <br/></paragraph>
        <section id="II-A-1">
          <title>Mise en forme</title>
          <paragraph>Voici un exemple de contenu avec la mise en forme du texte.<br/></paragraph>
          <paragraph>Voici un paragraphe utilisant du texte en <b>gras</b>, <i>italique</i>, <u>souligné</u>, avec des mots en exposant comme E=MC<sup>2</sup> ou en indice (texte <sub>en indice</sub>). On peut aussi avoir du texte <inline>inline</inline>.</paragraph>
          <paragraph>Texte avant <important>Ce texte est important</important> Texte après !</paragraph>
          <paragraph>Voici une citation récupérée sur Internet.</paragraph>
          <citation>Décrocher un Oscar, c'est aussi difficile que d'embrasser ses propres <b>fesses</b>... </citation>
          <paragraph>L'auteur de cette citation devait être inspiré ce jour là !</paragraph>
          <paragraph>Il est également possible de mettre du texte en couleur : <font color="#ff0000">rouge</font>, <font color="#008000">vert</font>, <b><font color="#000080">bleu</font></b>...<br/>
		 Sans oublier la possibilité de mettre des caractères spéciaux : ÀÂÆÇÉÈÈÊËÎÏÔÔŒÛÜÙ€ àâæçéèêëîïôœûüù</paragraph>
        </section>
        <section id="II-A-2">
          <title>Images dans le texte</title>
          <paragraph>Voici une image dans le texte : <image src="./images/nono.jpg" titre="texte de survol"/> avec la balise image : <image src="./images/thumb_image1.jpg" zoom="./images/image1.jpg"/>.<br/></paragraph>
        </section>
        <section id="II-A-3">
          <title>Liens</title>
          <paragraph>Voici une liste de type de liens autorisés : <br/>
		 - Relatif : <link href="../../odt/article-nouveau-design.odt/images/nono.jpg" title="Exemple de titre">./images/nono.jpg</link><br/>
		 - Absolu : <link href="http://nono40.developpez.com/nono.jpg" title="Exemple de titre">http://nono40.developpez.com/nono.jpg</link><br/>
		 - FTP : <link href="ftp://nono40.developpez.com/nono.jpg" title="Exemple de titre">ftp://nono40.developpez.com/nono.jpg</link><br/>
		 - News : <link href="news://borland.public.delphi" title="Exemple de titre">news://borland.public.delphi</link><br/>
		 - HTTPS : <link href="https://nono40.developpez.com/nono.jpg" title="Exemple de titre">https://nono40.developpez.com/nono.jpg</link><br/>
		 - MAILTO : <link href="mailto:nono40@fr.st" title="Exemple de titre">mailto:nono40@fr.st</link><br/></paragraph>
          <paragraph>Nouvelle balise de lien vers un message du forum :<br/>
		 - Liens vers le forum avec note affichée : <lien-forum avecnote="1" id="1191686"/><br/>
		 - Liens vers le forum sans note affichée : <lien-forum avecnote="0" id="1191686"/><br/>
		 Nous pouvons mettre un lien-forum (<lien-forum avecnote="1" id="1191686"/>) au milieu du texte </paragraph>
          <paragraph>Voici une liste de type de liens avec image autorisés :</paragraph>
          <paragraph>Lien avec texte : <link href="http://www.developpez.ne/">Site developpez.com</link><br/>
		Lien utilisant l'attribut target : <link href="http://www.developpez.ne/" target="_blank">Site developpez.com</link><br/>
		Lien avec l'attribut langue : <link href="http://developpez.net" langue="fr">Site developpez.com</link><br/>
		Lien avec le tag faq : <link href="http://general.developpez.com/faq/" langue="faq">FAQ developpez.com</link><br/>
		Lien avec le tag source au singulier : <link href="http://www.developpez.net" langue="src">Site de developpez.com</link><br/>
		Lien avec le tag sources au pluriel : <link href="http://www.developpez.net" langue="srcs">Site de developpez.com</link><br/>
		Lien avec le tag dico : <link href="http://dico.developpez.com/html/" langue="dico">Site de developpez.com</link><br/>
		Lien avec l'image ZIP : <link href="ftp://ftp-developpez.com/perl/faq/perl/faqperl.zip" langue="icozip">FAQ Perl de developpez.com</link><br/>
		Lien avec l'image PDF : <link href="ftp://ftp-developpez.com/perl/faq/perl/faqperl.pdf" langue="icopdf">FAQ Perl de developpez.com</link><br/>
		Lien avec une mise en en forme à l'intérieur : <link href="http://www.developpez.com/" target="_blank"><i>Site de</i> developpez.<b>com</b></link></paragraph>
          <paragraph>Renvoi : lien à l'intérieur du document : 
		  <renvoi id="MonSignet">Renvoi vers la section tableaux</renvoi></paragraph>
          
        </section>
        <section id="II-A-4">
          <title>Mettre du Latex dans le texte</title>
          <paragraph>Vous pouvez mettre du latex dans le texte d'un paragraphe via la balise &lt;latex></paragraph>
          <paragraph>
            <latex id="id0">\forall 1 \leq j \leq p ,
a_{j} = g(in_{j}) = g(\sum_{i = 0}^{n}w_{i,j} \times x_{i}) = g((\sum_{i = 1}^{n}w_{i,j} \times x_{i}) - w_{0,j})</latex>
            <br/>
            <br/>
            <br/>
            <latex id="id1">\forall 1 \leq j \leq p ,
a_{j} = g(in_{j}) = g(\sum_{i = 0}^{n}w_{i,j} \times x_{i}) = g((\sum_{i = 1}^{n}w_{i,j} \times x_{i}) - w_{0,j})</latex>
          </paragraph>
          <paragraph>Vous pouvez aussi mettre du LaTeX en dehors d'un paragraphe, les formules seront alors centrées comme des images : </paragraph>
          <paragraph>
            <latex id="id2">P(x) = \frac{1}{\sigma.\sqrt{2\pi}} . exp(- \frac{x^2}{2.\sigma^2})</latex>
          </paragraph>
          <paragraph>
            <latex id="id3">U(t+\mathrm{d}t)-U(t)=\iiint_\tau \rho c (T(t+\mathrm{d}t)-T(t)) \mathrm{d}\tau = \iiint_\tau \rho c \frac{\partial T}{\partial t} \mathrm{d}t \mathrm{d}\tau</latex>
          </paragraph>
          <paragraph>
            <latex id="id4">\frac{\partial\mathbf{F}} {\partial\mathbf{X}}=
\begin{bmatrix}
\frac{\partial\mathbf F_{1,1}}{\partial \mathbf X} &amp; \cdots &amp; \frac{\partial \mathbf F_{n,1}}{\partial \mathbf X}\\
\vdots &amp; \ddots &amp; \vdots\\
\frac{\partial\mathbf F_{1,m}}{\partial \mathbf X} &amp; \cdots &amp; \frac{\partial \mathbf F_{n,m}}{\partial \mathbf X}\\
\end{bmatrix}</latex>
			<br/>
			Voici la racine carré de 25 (<latex id="racine-carre">	\sqrt 25 </latex>) égale à 5.
          </paragraph>
        </section>
		<section id="II-A-5">
			<title>Note de bas de page</title>
			<paragraph>
				Pour insérer une note de bas de page<noteBasPage>Ceci est un exemple de 
				note de bas de page : <link langue="Fr" target="_blank" href="http://www.developpez.com">http://www.developpez.com</link> ou <link langue="ang" target="_blank" href="http://www.developpez.com">http://www.developpez.com</link></noteBasPage>, 
					
				vous devez utiliser la balise<noteBasPage>
						<b>balise</b>, nom féminin<br/>
						
<i>Sens 1</i> Objet, dispositif qui permet de guider, de faire suivre un tracé précis. <i>Synonyme</i> clignotant 
Anglais (aviation) light, (marine) beacon, (route) raod sign, ski (marker)<br/>
						
<i>Sens 2</i> Marque qui permet d'identifier un élément d'un fichier, sa fonction, son emplacement [<i>Informatique</i>]. Anglais tag<br/>
						
<i>Sens 3 </i>Fruit du balisier [<i>Botanique</i>].

					</noteBasPage>  &lt;noteBasPage&gt;. La note doit être écrite dans le paragraphe qui y fait référence.
			</paragraph>
			
		</section>
		<section id="II-A-6">
			<title>Acronyme</title>
			<paragraph>
				<acronyme title="Comprehensive Perl Archive Network">CPAN</acronyme>, 		
				<acronyme title="Asymetric Digital Subscriber Line">A.D.S.L.</acronyme>, 		
				<acronyme title="Application Programming Interface">A.P.I.</acronyme>, 		
				<acronyme title="Random Acces Memory"><b>R.A.M.</b></acronyme>.	
			</paragraph>
			
		</section>
      </section>
      <section id="II-B">
        <title>Balises situées en dehors d'une zone &lt;paragraph></title>
        <section id="II-B-1">
          <title>Images en dehors du texte</title>
          <paragraph>Image centrée et située en dehors d'un paragraphe.</paragraph>
          <image align="center" src="./images/nono.jpg"/>
          <paragraph>Images contenant un alignement et une légende.</paragraph>
          <image align="left" legende="Gauche" src="./images/nono.jpg"/>
          <image align="center" legende="Centre" src="./images/nono.jpg"/>
          <image align="right" legende="Droite" src="./images/nono.jpg"/>
          <paragraph>Il est possible de mettre un lien hypertexte dans une image : </paragraph>
          <paragraph>
            <image align="center" href="http://www.developpez.net/forums/u35657/djibril/" src="./images/djibril.jpg"/>
          </paragraph>
					<paragraph>
						Images avec affichage de miniatures :
					</paragraph>
					<image src="./images/thumb_image1.jpg" zoom="./images/image1.jpg"/>
					<image src="./images/thumb_image2.jpg" zoom="./images/image2.jpg"/>
					<image src="./images/thumb_image3.jpg" zoom="./images/image3.jpg"/>
					<image src="./images/thumb_image4.jpg" zoom="./images/image4.jpg"/>
					<image src="./images/thumb_image5.jpg" zoom="./images/image5.jpg"/>
        </section>
        <section id="II-B-2">
          <title>Balise imgtext</title>
          <paragraph>La balise <b>&lt;imgtext></b>, à placer au même niveau qu'une balise <b>&lt;paragraph></b>, permet de mettre une image d'agrément sur le côté du texte. On peut mettre une image personnelle ou utiliser le code faisant référence à une idée, une attention ou une information.</paragraph>
          <imgtext type="idea"> 
          	La balise <b>&lt;imgtext&gt;</b>, à placer au même niveau qu'une balise &lt;paragraph&gt;, 
			  permet de mettre une image d'agrément sur le côté du texte. 
		  </imgtext>

          <imgtext type="idea"> : <b>&lt;imgtext type="idea"&gt;</b> J'ai une idée !<br/>
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
		  </imgtext>

          <imgtext type="info"> <b>&lt;imgtext type="info"&gt;</b>J'ai une information !<br/>
						<br/>
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
		</imgtext>
          <imgtext type="warning"> <b>&lt;imgtext type="warning"&gt;</b> Attention, message important !<br/>
						<br/>
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
						
		  </imgtext>
          <imgtext type="error"> <b>&lt;imgtext type="error"&gt;</b> Attention, message important !<br/>
						<br/>
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
						
		  </imgtext>
          <imgtext src="./images/djibril.jpg"> <b>&lt;imgtext src="image.jpg"&gt;</b> Image personnelle de mon profil.<br/>
						<br/>
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
		  
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
		  
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
		  
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
		  
		  	HTML5 (HyperText Markup Language 5) est la prochaine révision majeure d'HTML (format de données conçu 
			pour représenter les pages web). Cette version HTML5 est en développement en 2012. 
			HTML5 spécifie deux syntaxes d'un modèle abstrait défini en termes de DOM : HTML5 et XHTML5. 
			Le langage comprend également une couche application avec de nombreuses API, ainsi qu'un algorithme 
			afin de pouvoir traiter les documents à la syntaxe non conforme. Le travail a été repris par le W3C 
			en mars 2007 après avoir été lancé par le WHATWG. Les deux organisations travaillent en parallèle sur 
			le même document afin de maintenir une version unique de la technologie. 
			Le W3C vise la clôture des ajouts de fonctionnalités le 22 mai 2011 et une finalisation de 
			la spécification en 20141, et encourage les développeurs Web à utiliser HTML 5 dès maintenant.
		  
		  </imgtext>
        </section>
        <section id="II-B-3">
          <title>Balise rich-imgtext</title>
          <paragraph>La balise rich-imgtext est une variante de la balise imgtext vous permettant d'insérer 
		  autre chose que du texte : des tableaux, du code, des listes... </paragraph>
					<rich-imgtext src="./images/nono.jpg" border="1"> 
						<paragraph>
							Du <b>coup</b> on <i>peut</i> <u>aussi</u> y remettre des imgtext...
						</paragraph>
						<tableau width="80%" border="1" sautDePagePdf="0">
							<entete>
								<colonne colspan="3" width="80px">Avec un tablau !</colonne>
							</entete>
							<ligne>
								<colonne>AAA</colonne>
								<colonne>BBB</colonne>
								<colonne>CCC</colonne>
							</ligne>
						</tableau>
						<imgtext type="warning">
							<b>Attention !</b><br/> 
							... un petit warning
						</imgtext> 
						<imgtext type="idea"> 
							<b>Mais bon sang c'est bien ça !</b><br/> 
							... 
						</imgtext> 
						<imgtext type="info"> 
							<b>Et voila !</b><br/> 
							... 
						</imgtext> 
					</rich-imgtext>
          <rich-imgtext type="info">
		  	Mettons un tableau.
		    
			  <tableau>
			  	<ligne><colonne>Cellule1,1</colonne><colonne>Celulle1,2</colonne></ligne>
			    <ligne><colonne>Cellule2,1</colonne><colonne>Cellule2,2</colonne></ligne>
			  </tableau>
			  
					<paragraph>
						Voici du code Perl :
					</paragraph>
					
<code langage="perl"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).]]></code>

					<liste titre="Résultat :" sautDePagePdf="0">
						<element>Bonjour</element>
					</liste>		  
		  
		  </rich-imgtext>
		  
          <rich-imgtext type="error">
<code langage="perl"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Ce code est dangereux.
system 'rm -rf /']]></code>						
		</rich-imgtext>
		  
        </section>
		<section id="II-B-4">
          <title>Les tableaux</title>
          <paragraph>Tableau sans entête</paragraph>
          <signet id="MonSignet"/>
          <tableau>
            <ligne>
              <colonne>Texte à gauche</colonne>
              <colonne align="right">Texte à droite</colonne>
            </ligne>
            <ligne>
              <colonne align="center">Texte centré</colonne>
              <colonne>Texte avec une image : <image src="./images/nono.jpg"/></colonne>
            </ligne>
          </tableau>
          <paragraph>Tableau avec légende et cellules groupées.</paragraph>
          <tableau legende="Légende du tableau.">
            <entete>
              <colonne align="center">
                <b>Entête</b>
              </colonne>
              <colonne align="center">
                <b>Entête</b>
              </colonne>
            </entete>
            <ligne>
              <colonne>Cellule 1</colonne>
              <colonne rowspan="2">Cellules fusionnées</colonne>
            </ligne>
            <ligne>
              <colonne color="#ffff00">Cellule 2 avec couleur</colonne>
            </ligne>
          </tableau>
          <paragraph>Il est possible de fixer les tailles des colonnes dans un tableau à l'aide de l'attribut <b>width</b>. </paragraph>
          <tableau width="80%">
            <entete>
              <colonne align="center" color="#a6a5c2">
                <b>Col1</b>
              </colonne>
              <colonne align="center" color="#a6a5c2">
                <b>Col2</b>
              </colonne>
              <colonne align="center" color="#a6a5c2">
                <b>Col3</b>
              </colonne>
            </entete>
            <ligne>
              <colonne>20 %</colonne>
              <colonne>taille libre</colonne>
              <colonne>120 px</colonne>
            </ligne>
          </tableau>
          <tableau width="80%">
            <entete>
              <colonne align="center" color="#a6a5c2">
                <b>Tableau</b>
              </colonne>
              <colonne align="center" color="#a6a5c2">
                <b>Code</b>
              </colonne>
              <colonne align="center" color="#a6a5c2">
                <b>Liste</b>
              </colonne>
            </entete>
            <ligne>
              <colonne useText="0"><image legende="Nono !" src="./images/nono.jpg"/> <tableau width="80%"><entete><colonne align="center" color="#a6a5c2"><b>AA</b></colonne><colonne align="center" color="#a6a5c2"><b>BB</b></colonne></entete><ligne><colonne>CC</colonne><colonne>DD</colonne></ligne></tableau></colonne>
              <colonne useText="0">
                <code langage="xml"><![CDATA[<balise>data</balise>]]></code>
              </colonne>
              <colonne useText="0">Une liste :<liste><element>numéro 1 ;</element><element>numéro 2.</element></liste></colonne>
            </ligne>
          </tableau>
        </section>
        <section id="II-B-5">
          <title>Les listes</title>
          <paragraph>La balise <b>&lt;liste></b> permet d'afficher une liste d'éléments. </paragraph>
          <paragraph>Il est possible de modifier les puces en ajoutant un tag type à la balise liste. Vous devez utiliser dans la balise &lt;liste> l'attribut « type ». Il peut prendre les valeurs : 1, a, A, i, I. En fonction du type choisi, vous obtiendrez, à la place des puces classiques, une numérotation avec des chiffres ou des lettres. </paragraph>
          <liste>
            <element>Liste simple</element>
            <element>liste simple</element>
          </liste>
          <paragraph>Liste avec différents types :</paragraph>
          <liste type="1">
            <element>chiffre</element>
            <element useText="0">chiffre<liste type="I"><element>lettre</element><element>lettre</element></liste></element>
          </liste>
          <liste type="A">
            <element>Liste avec des lettres</element>
            <element>Suite des lettre</element>
          </liste>
          <liste type="a">
            <element>Liste avec des lettres</element>
            <element>Suite des lettre</element>
          </liste>
          <liste type="i">
            <element>Liste avec des lettres</element>
            <element>Suite des lettre</element>
          </liste>
        </section>
        <section id="II-B-6">
          <title>Zones de code</title>
          <paragraph>Code avec titre</paragraph>
          <code langage="perl" titre="Titre de mon code"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).]]></code>
          <paragraph>Code sans titre</paragraph>
          <code langage="perl"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).]]></code>
          <paragraph>Code avec des numéros de lignes</paragraph>
          <code langage="perl" showLines="1" startLine="1"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).]]></code>
          <paragraph>Code avec des numéros de lignes commençant à 3</paragraph>
          <code langage="perl" showLines="1" startLine="3"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).]]></code>
          <paragraph>Code accordéon (montrer/cacher)</paragraph>
          <code dissimulable="0" langage="perl" showLines="1" startLine="1" titre="Code avec accordéon"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).]]></code>
          <paragraph>Code avec lien vers un fichier</paragraph>
          <code dissimulable="1" fichier="./fichiers/test.pl" langage="perl" showLines="1" startLine="1" titre="code à télécharger"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).]]></code>
        
					<paragraph>
						Code Brute copié dans la page web via la balise <b>&lt;html-brut&gt;</b>
					</paragraph>
<code langage="html"><![CDATA[
<canvas id="canvas" width="150" height="150">
    <p>This example requires a browser that supports the
    <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
    &lt;canvas&gt; feature.</p>
</canvas>
  <script>
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
  </script>
]]></code>
<html-brut><![CDATA[
<canvas id="canvas" width="150" height="150">
    <p>This example requires a browser that supports the
    <a href="http://www.w3.org/html/wg/html5/">HTML5</a> 
    &lt;canvas&gt; feature.</p>
</canvas>
  <script>
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
 
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
  </script>
]]></html-brut>
					
		
		</section>
        
        <section id="II-B-7">
          <title>Les animations ou vidéos</title>
          <paragraph>Cette balise permet d'ajouter une vidéo de type flash <b>swf</b>, <b>flv</b>, <b>mp4</b> dans votre article ou même un lien <b>YouTube</b>, <b>Dailymotion</b> ou <b>vimeo</b>. Vous pouvez également insérer un son <b>mp3</b>. Voici comment insérer les différents types de vidéos ou sons. </paragraph>
          <paragraph>
            <b>Lien Youtube</b>
          </paragraph>
          <animation type="flash">
            <width>640</width>
            <height>390</height>
            <param-movie>http://www.youtube.com/v/D6YYhquEVNQ</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>

          <animation type="flash">
            <width>640</width>
            <height>390</height>
            <param-movie>http://www.youtube.com/watch?v=oeghXnAGJV4</param-movie>
            <title>Perl Vs Python</title>
          </animation>

          <paragraph>
            <b>Lien Dailymotion</b>
          </paragraph>
          <animation type="flash">
            <width>480</width>
            <height>270</height>
            <param-movie>http://www.dailymotion.com/swf/4MAVXvsefFIcEboPg</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>

          <paragraph>
            <b>Lien Vimeo</b>
          </paragraph>
          <animation type="vimeo">
            <title>Cliquez sur ma vidéo vimeo : The Mountain</title>
            <width>400</width>
            <height>225</height>
            <param-movie>http://player.vimeo.com/video/22439234</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>

          <paragraph>
            <b>vidéos SWF</b>
          </paragraph>
          <animation type="flash">
            <title>Asa 360°</title>
            <width>480</width>
            <height>270</height>
            <param-movie>http://djibril.developpez.com/videos/asa-360.swf</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>
          <paragraph>
            <b>vidéos FLV</b>
          </paragraph>
          <animation type="flv">
            <title>Asa - 360°</title>
            <width>480</width>
            <height>270</height>
            <param-movie>http://djibril.developpez.com/videos/asa-360.flv</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>
          <paragraph>
            <b>vidéos MP3</b>
          </paragraph>
          <animation type="mp3">
            <title>Asa - 360°</title>
            <width>480</width>
            <height>270</height>
            <param-movie>http://djibril.developpez.com/videos/asa-360.mp3</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>
          <paragraph>
            <b>Lecture d'une playlist mp3</b>
          </paragraph>
          <animation type="mp3">
            <width>480</width>
            <height>270</height>
            <config>http://djibril.developpez.com/video/configuration-audio.ini</config>
            <param-movie>http://djibril.developpez.com/temp/test/affichage-video/configuration-audio.ini</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>
          <paragraph>
            <b>vidéos MP4</b>
          </paragraph>
          <animation type="mp4">
            <title>Océan</title>
            <width>640</width>
            <height>390</height>
            <param-movie>http://video-js.zencoder.com/oceans-clip.mp4</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>

          <paragraph>
            <b>vidéos M4V</b>
          </paragraph>
          <animation type="m4v">
            <title>TEST</title>
            <width>480</width>
            <height>360</height>
            <param-movie>http://www.robwalshonline.com//demos/html5_video_demo/bubbles/bubbles.m4v</param-movie>
            <param-quality>high</param-quality>
            <param-loop>false</param-loop>
          </animation>

        </section>
        
        
		<section id="II-B-8">
			<title>Latex hors paragraphe </title>
			<latex id="gaussian" taille="20">P(x) = \frac{1}{\sigma.\sqrt{2\pi}} . exp(- \frac{x^2}{2.\sigma^2})</latex>
		</section>
        
      </section>
    </section>
    <section id="III">
      <title>Exemple de coloration des codes</title>
      <section id="III-A">
        <title>CSS</title>
        <code langage="css"><![CDATA[/* définition du style de la police, et largeur du select */
select {
font-family : Courier ;
font-size : 10px ;
width : 200px;
}

/* élément de couleur bleu */
option.bl_eu 
{
color : #0000FF ;
background-color :#00CCFF ;

background : blue url(img.png) ; 
background-color : blue ; 
background-image : url(img.png) ; 

}]]></code>
      </section>
      <section id="III-B">
        <title>Delphi et Delphi pour .NET</title>
        <code langage="delphi"><![CDATA[// commentaire
{
Un commentaire sur
plusieurs lignes }
{$ une directive }
Var i:Integer;
<a href="lien.html?parametre1=valeur1&amp;parametre2=valeur2">test</a>

(*
Et un autre
*)
begin
  For i:=Onglet.PageCount-1 DownTo 0 Do
  Begin
    Onglet.ActivePageIndex:=i;
    // En commentaire d ON ' euuuuuu
    ShowMessage('Truc muche !'kqjhsd'jhkjh''''''hghg''''hg'); // c'est un comment !
    { et un autre }
    FileName:= 'Document.doc'; // ou 'Document.rtf'
    URL ='http://toto.com';
  End;
end;]]></code>
      </section>
      <section id="III-C">
        <title>JAVA</title>
        <code langage="java"><![CDATA[// un comment en deb
public class MaClasse{
   public static Map uneVariableStatique = new HashMap();
   static{
/*      uneVariableStatique.put("une clef","une valeur");
      uneVariableStatique.put("une autre clef","une autre http:// jshdjshd");*/
      //etc un comment et import
      uneVariableStatique.put("une clef","une http://valeur");
      uneVariableStatique.put("une autre clef","une autr\"e valeur\\\"");
   qal.declareImports("import com.unilog.data.Track"); 
   import toto;
   }

}]]></code>
      </section>
      <section id="III-D">
        <title>Perl</title>
        <code langage="perl"><![CDATA[#!/usr/bin/perl
use strict;
use warnings;

# Voici une ligne de commentaire.
print "Bonjour\n"; # Affichage du mot bonjour (autre commentaire).]]></code>
				
      </section>
      
	  <section id="III-E">
		<title>PHP</title>
<code langage="php"><![CDATA[function creationPanier(){
	if (!isset($_SESSION['panier'])){
		$_SESSION['panier']=array();
		$_SESSION['panier']['libelleProduit'] = array();
		$_SESSION['panier']['qteProduit'] = array();
		$_SESSION['panier']['prixProduit'] = array();
		$_SESSION['panier']['verrou'] = false;
	}
	return true;
}

]]></code>
					
				</section>
      <section id="III-F">
        <title>XML</title>
        <code langage="xml"><![CDATA[<?xml version="1.0" encoding="ISO-8859-1"?>
<document>
    <xiti>
        <!-- compteur Dotnet-->
        <alias>Dotnet</alias>
        <logg_er>logv99</logg_er>
        <id>12345</id>
    </xiti>
</document>]]></code>
      </section>

      <section id="III-G">
        <title>HTML</title>
        <code langage="html"><![CDATA[<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
    </head>

    <body>
    
    </body>
</html>]]></code>
      </section>

      <section id="III-H">
        <title>PYTHON</title>
        <code langage="python"><![CDATA[class Personne:
   def __init__(self, nom, prenom):
       self.nom = nom
       self.prenom = prenom
   def presenter(self) :
       return self.nom + " " + self.prenom
 
class Etudiant(Personne):
   def __init__(self, niveau, nom, prenom):
       Personne.__init__(self, nom, prenom)
       self.niveau = niveau
   def presenter(self):
       return self.niveau + " " + Personne.presenter(self)
 
e = Etudiant("Licence INFO", "Dupontel", "Albert")
assert e.nom == "Dupontel"]]></code>
      </section>
				<section id="III-I">
					<title>DELPHI</title>
<code langage="delphi"><![CDATA[unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs;

type
  TForm1 = class(TForm)
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

end.]]></code>
				</section>
				<section id="III-J">
					<title>PASCAL</title>
<code langage="pascal"><![CDATA[unit Unit1;
 
    {$mode objfpc}{$H+}
 
interface
 
uses
    Classes, SysUtils, LResources, Forms, Controls, Graphics, Dialogs, StdCtrls;
 
type
    { TForm1 }
 
    TForm1 = class (TForm)
         Label1: TLabel; { le label "Hello world!" posé sur la fenêtre }
    private
         { private declarations }
    public
         { public declarations }
    end;
 
var
    Form1: TForm1; 
 
implementation
 
initialization
    {$I unit1.lrs}
 
end.]]></code>
				</section>
				<section id="III-K">
					<title>Perl again</title>
<code langage="perl" titre="Perl/Tk"><![CDATA[#!/usr/bin/perl
use warnings;
use strict;

use Tk;
use Tk::TableMatrix;
use utf8;

my $mw = MainWindow->new(
  -title      => 'Tableau TableMatrix',
  -background => 'snow',
);
$mw->Label(
  -text       => "Tableau redimensionnable à l'aide de TableMatrix",
  -background => 'snow',
  -font       => '{arial} 12 bold'
)->pack( -pady => 5 );

my $data = {};

# Création du tableau avec une ligne et une colonne
my $table = $mw->Scrolled(
  'TableMatrix',
  -rows          => 1,
  -cols          => 1,
  -width         => 500,
  -height        => 500,
  -variable      => $data,
  -rowtagcommand => \&type_row,
  -background    => "#454545",
  -titlerows     => 1,
  -titlecols     => 1,
  -drawmode      => 'single',
  -selectmode    => 'extended',
  -scrollbars    => 'osoe',
);

# Insertion de données dans le tableau
for my $row ( 0 .. 20 ) {

  # Calcul du nombre de lignes dans le tableau
  my $number_rows = $table->cget( -rows );

  # Insertion d'une ligne si nécessaire
  $table->insertRows( 'end', 1 ) if ( $number_rows < $row + 1 );

  for my $col ( 0 .. 10 ) {

    # Calcul du nombre de lignes dans le tableau
    my $number_cols = $table->cget( -cols );

    # Insertion d'une colonne si nécessaire
    $table->insertCols( 'end', 1 ) if ( $number_cols < $col + 1 );

    # Ligne de titre
    if ( $row == 0 and $col != 0 ) {
      $data->{"$row,$col"} = "Colonne $col";
    }

    # Colonne de titre
    elsif ( $col == 0 and $row != 0 ) {
      $data->{"$row,$col"} = "Ligne $row";
    }
    elsif ( $col == 0 and $row == 0 ) {

      # rien ne se passe;
    }

    # Données
    else {
      $data->{"$row,$col"} = "($row,$col)";
    }
  }
}

# Configuration des lignes paires et impaires
$table->tagConfigure(
  'pair_row',
  -bg     => 'white',
  -fg     => 'black',
  -relief => 'sunken',
  -state  => 'disabled'
);
$table->tagConfigure(
  'impair_row',
  -bg     => '#00C0E0',
  -fg     => 'black',
  -relief => 'sunken',
  -state  => 'disabled'
);
$table->tagConfigure( 'title', -bg => '#F0E0FF', -fg => 'black', -relief => 'sunken' );
# Fusion des cellules 1,1 à 1,4
$table->spans( '1,1' => '0,3' );
$table->pack(qw/ -fill both -expand 1 -padx 10 -pady 10 /);

MainLoop;

# Permet d'assigner un tag aux lignes paires et impaires
sub type_row {
  my $row = shift;
  my $tag_row = ( $row > 0 && $row % 2 == 0 ) ? "pair_row" : "impair_row";

  return $tag_row;]]></code>
				</section>
      
			<section id="III-L">
				<title>SQL - code long</title>
			            <code langage="sql" titre="Création des tables"><![CDATA[//on supprime les tables si elles existent déjà
DROP TABLE POSITION ;
DROP TABLE FICHIER;
DROP TABLE VERSION;

//on crée les tables en ajoutant des contraintes de colonnes et de tables afin d'être sûr de garder une table valide quoi qu'il se passe.
CREATE TABLE VERSION (id MEDIUMINT PRIMARY KEY AUTO_INCREMENT, Version VARCHAR(20) NOT NULL, Active CHAR(1) NOT NULL CHECK Active IN ('O', 'N'), CHECK(Version <> '0')) ;

CREATE TABLE FICHIER (id MEDIUMINT PRIMARY KEY AUTO_INCREMENT, Version_creation MEDIUMINT NOT NULL REFERENCES VERSION.id, Version_suppression MEDIUMINT REFERENCES VERSION.id, Version_maj MEDIUMINT REFERENCES VERSION.id, Version_futur_maj MEDIUMINT REFERENCES VERSION.id, Source  VARCHAR(200), CHECK(Version_suppression IS NULL OR Version_suppression > Version_creation), CHECK((Version_suppression IS NOT NULL AND Version_maj IS NULL) OR Version_suppression IS NULL), CHECK (Version_maj IS NULL OR Version_maj > Version_creation), CHECK((Source IS NULL AND Version_maj IS NULL AND Version_futur_maj IS NULL) OR Source IS NOT NULL)) ;

CREATE TABLE POSITION (id_Fichier MEDIUMINT NOT NULL REFERENCES FICHIER.id, id_Version MEDIUMINT NOT NULL REFERENCES VERSION.id, Nom VARCHAR(100) NOT NULL, id_dossier MEDIUMINT REFERENCES FICHIER.id, Derniere_position CHAR(1) NOT NULL CHECK Derniere_position IN ('O', 'N', 'T', 'P'), PRIMARY KEY(id_Fichier, id_Version), CHECK(id_Fichier <> id_dossier));

//on crée la version 0 (version vide)
INSERT INTO VERSION VALUES('', '0', 'O');]]></code>
</section>
    </section>
					<section id="V">
						<title>En savoir plus</title>
					<paragraph>
						Pour en savoir plus, merci de lire la documentation officielle 
						du <link langue="Fr" target="_blank" href="http://club.developpez.com/outils/wiki/KitGeneration" title="Kit de génération">Kit de génération</link>.
					</paragraph>
						
					</section>
    
  </summary>
  <!-- footer personnalisé -->
 <footer-personnalise>
   <!-- visible en local -->
   <offline>
       <paragraph><font color="#0000FF">Test d'ajout de paragraphe seulement dans la version <b>HTML du document</b></font> (OFFLINE)</paragraph>
          <tableau width="50%" border="1" sautDePagePdf="1">
              <entete>
                   <colonne>AAA</colonne>
                   <colonne colspan="2">BBB</colonne>
               </entete>
               <ligne>
                   <colonne>111</colonne>
                   <colonne>222</colonne>
                   <colonne>333</colonne>
               </ligne>
           </tableau>
       </offline>
       <pdf>
           <paragraph>QUIO PDF</paragraph>
       </pdf>
       
       <!-- visible en ligne -->
       <online>
       <paragraph><font color="#0000FF">Test d'ajout de paragraphe seulement dans la version <b>HTML du document</b></font> (ONLINE)</paragraph>
          <tableau width="50%" border="1" sautDePagePdf="1">
              <entete>
                   <colonne>AAA</colonne>
                   <colonne colspan="2">BBB</colonne>
               </entete>
               <ligne>
                   <colonne>111</colonne>
                   <colonne>222</colonne>
                   <colonne>333</colonne>
               </ligne>
           </tableau>
       </online>
   </footer-personnalise>
</document>
