Code de la page : «Conseils et astuces pour vos sites WEB»

Retour

Ceci est le code php du fichier :


<?php
$titre='Conseils et astuces pour vos sites WEB';
$head['css'][0]['filename']='stylemotcle';
require'autres/source-haut.php';
?>
<h1>Conseils et astuces pour vos sites</h1>
    <hr />
    <h2>
      <a id="divers"></a>divers
    </h2>
    <h4>
      <a  id="sitemap"></a>faire une sitemap (Plan du
      site)
    </h4>

    <div style="text-align: center;">
      <span style="font-style: italic;">Attention : ce tutoriel
      vous apprendra a faire une sitemap, pas une googlemap. Si
      c'est ce que vous voulez, il existe le logiciel gratuit
      YoodaMAP.</span><br />
      <span style="font-style: italic;">Vous pouvez voir aussi :
      <a href=
      "http://www.commentcamarche.net/faq/sujet-3649-plan-du-site-sitemap-consultable-avec-navibar-pour-firefox">
      http://www.commentcamarche.net/faq/sujet-3649-plan-du-site-sitemap-consultable-avec-navibar-pour-firefox</a></span>
    </div>
    <p>
      sur certains sites, (dont le mien) si vous
      utilisez&nbsp;<span class="motcle">Firefox muni de
      l'extension Navibar</span>, vous avez déja vu un <span class=
      "motcle">plan du site dans le panneau latéral</span>. Vous
      trouvez ceci très pratique et vous aimeriez en faire profiter
      les visiteurs de votre site mais vous ne savez pas comment
      faire ? Ce n'est pas très compliqué. Il existe des logiciels
      qui font ceci en quelques clics, mais ils sont payants. Ne
      vous fiez pas non plus aux versions d'évaluation de ces
      logiciels, la plupart ont des restrictions assz
      contraignantes(ex: sitemap pro : seulement 6 urls!!).
      Toutefois si vous trouvez un logiciel gratuit qui fait ca
      bien, vous pouvez <a href="mail/">me contacter</a>

    </p>
    <p>
      vous devrez faire un fichier que vous nommerez "<span class=
      "motcle">sitemap.rdf</span>" et que vous deposerez a la
      racine de votre site. Vous pouvez faire ce fichier avec le
      bloc-notes mais cest plus pratique d'avoir un logiciel qui
      <span class="motcle">colore et range le code</span>, comme
      <a href="logiciels/pspad.php">PSPad editor</a>. Si vous
      n'avez pas ce logiciel ou un logiciel similaire je vous
      invite à le télécharger. En plus il fait aussi xslt, rss,
      html... et une multitude d'autres formats. Si vous voulez
      vous pouvez également regarder la <span class=
      "motcle">sitemap de mon site</span> : <a href=
      "sitemap.rdf">sitemap.rdf</a>. Appuyez sur Ctrl+U dans
      Firefox pour voir son code source.
    </p>

    <p>
      quand vous avez téléchargé et installé le logiciel, crééz un
      nouveau fichier texte que vous nommerez "sitemap.rdf", puis
      ouvrez le avec votre éditeur. Vous voyez une page vide. C'est
      normal pour le moment. Nous allons maintenant remplir cette
      page. Tout d'abord il faut indiquer la version de votre
      fichier, c'est à dire la première version. Vous devez écrire
      sur la première ligne de votre fichier le code
    </p>
    <div class="codexml">
      <span class="xml1">&lt;?xml version="1.0"?&gt;</span>
    </div>
    <p>
      qui indique que la version du fichier xml est la version
      numéro 1.<br />

    </p>
    <p>
      vous devez ensuite indiquer le code qui suit : ce sont
      diverses adresses en rapport avec la validité de votre
      fichier.
    </p>
    <div class="codexml">
      <span class="xml2">&lt;rdf:RDF</span> <span class=
      "xml3">xmlns</span><span class="xml2">="</span><span class=
      "xml4">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span><span class="xml2">"</span><br />

      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span class=
      "xml3">xmlns:rdf</span><span class=
      "xml2">="</span><span class=
      "xml4">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span><span class="xml2">"</span><br />

      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span class=
      "xml3">xmlns:map</span><span class=
      "xml2">="</span><span class=
      "xml4">http://www.oaklett.org/map/1.0#</span><span class=
      "xml2">"</span><br />

      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span class=
      "xml3">xmlns:dc</span><span class=
      "xml2">="</span><span class="xml4">http://purl.org/dc/elements/1.1/</span><span class="xml2">"&gt;</span>
    </div>
    <p>
      vous avez terminé la première partie. Maintenant nous allons
      faire votre sitemap. Une sitemap est présentée sous forme
      d'<span class="motcle">arborescence</span> : des dossiers
      contenant des fichiers ou d'autres dossiers.
    </p>

    <p>
      nous allons indiquer le <span class="motcle">contenu</span>
      de votre sitemap. Vous n'êtes pas obligé d'indiquer tout le
      contenu de votre site dans la sitemap, c'est vous qui
      choisissez ce que les visiteurs pourront voir ou pas. Vous
      pouvez aussi&nbsp;y mettre des <span class="motcle">liens
      externes</span> (vers d'autres sites).Vous choisissez
      également <span class="motcle">l'organisation des dossiers et
      des fichiers</span> de votre sitemap : elle ne dépend pas de
      celle de votre site.
    </p>
    <p>

      la première partie de ma sitemap est :
    </p>
    <div class="codexml">
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml4">urn:sitemap:root</span><span class=
      "xml2">"&gt;</span><br />
      <span class="xml2">&lt;map:container&gt;</span><br />
      <span class="xml2">&lt;rdf:Seq&gt;</span><br />

      <span class="xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:home</span><span class="xml2">"/&gt;</span><br />
      <span class="xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:cestquoi</span><span class=
      "xml2">"/&gt;</span><br />
      <span class="xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:configurer</span><span class=
      "xml2">"/&gt;</span><br />

      <span class="xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:logiciels</span><span class=
      "xml2">"/&gt;</span><br />
      <span class="xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:temp</span><span class="xml2">"/&gt;</span><br />
      [...]<span style="font-style: italic;">etc</span><br />

      <span class="xml2">&lt;/rdf:Seq&gt;</span><br class="xml2" />
      <span class="xml2">&lt;/map:container&gt;</span><br class=
      "xml2" />
      <span class="xml2">&lt;/rdf:Description&gt;</span>
    </div>
    <p>
      ? Ca veut dire quoi tout ce <span class=
      "motcle">charabia</span> ?<br />

      Ne vous inquiétez pas. Ceci vous paraitra beaucoup plus clair
      une fois que vous aurez fini de lire ce tutoriel. Je vous
      explique ce code :
    </p>
    <div class="codexml">
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml4">urn:sitemap:root</span><span class="xml2">"&gt;</span>
    </div>
    <p>

      Cette ligne est&nbsp;<span class="motcle">obligatoire</span>
      pour une sitemap. Elle indique le <span class="motcle">début
      de l'arborescence</span> et les éléments qui seront au
      "premier niveau"(disons ca comme ca).<br />
      <br />
    </p>
    <div class="codexml">
      <span class="xml2">&lt;map:container&gt;</span><br />

      <span class="xml2">&lt;rdf:Seq&gt;</span>
    </div>
    <p>
      Indique le <span class="motcle">début du contenu</span> de la
      sitemap, de ce que les visiteurs de votre site verront.
      Obligatoire également.<br />
      <br />
    </p>

    <div class="codexml">
      <span class="xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:home</span><span class="xml2">"/&gt;</span><span class="xml2"><br />

      &lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:cestquoi</span><span class=
      "xml2">"/&gt;</span><br />

      <span class="xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:configurer</span><span class="xml2">"/&gt;</span>
    </div>
    <p>
      Veut dire :&nbsp;l'élément "syl:home" sera affiché en
      premier, puis celui "syl:cestquoi", etc...<br />
      Obligatoire aussi, a moins de ne rien vouloir mettre dans sa
      sitemap...<br />

      <br />
    </p>
    <div class="codexml">
      <span class="xml2">&lt;/rdf:Seq&gt;</span><br class="xml2" />
      <span class="xml2">&lt;/map:container&gt;</span><br class=
      "xml2" />
      <span class="xml2">&lt;/rdf:Description&gt;</span>
    </div>

    <p>
      Indique la fin du contenu de votre sitemap.
      Obligatoire.<br />
    </p>
    <p>
      c'est maintenant que cela devient intéressant. Je vous ai
      parlé "d'éléments", nous allons maintenant les rajouter dans
      votre sitemap. Nous allons par exemple indiquer le contenu de
      l'élément
    </p>
    <div class="codexml">
      <span class="xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:home</span><span class="xml2">"/&gt;</span>

    </div>
    <p>
      il faut mettre du code qui donnera le titre du contenu ainsi
      qu'un lien vers la page correspondante. Le code
    </p>
    <div class="codexml">
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">syl:home</span><span class=
      "xml2">"&gt;</span><br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Ssylvainsab -
      Accueil<span class="xml2">&lt;/dc:title&gt;</span><br />
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://ssylvainsab.free.fr/index.html<span class="xml2">&lt;/dc:identifier&gt;</span><br />

      <span class="xml2">&lt;/rdf:Description&gt;</span>
    </div>

    <p>
      Indique le contenu de l'élément "syl:home"<br />
    </p>
    <p>
      que veut dire ce code?
    </p>
    <div class="codexml">
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class="xml2">="<span class=
      "xml4">syl:home</span></span><span class="xml2">"&gt;</span>

    </div>
    <p>
      Indique le début d'un élément et dit : Cet élément est
      l'élément "syl:home".<br />
    </p>
    <div class="codexml">
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Ssylvainsab -
      Accueil<span class="xml2">&lt;/dc:title&gt;</span>

    </div>
    <p>
      Veut dire : Le titre de cet élément est "Ssylvainsab -
      Accueil"<br />
      <br />
    </p>
    <div class="codexml">
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://ssylvainsab.free.fr/index.html<span class="xml2">&lt;/dc:identifier&gt;</span>

    </div>
    <p>
      Indique la page vers laquelle dirige l'élément.<br />
      <br />
    </p>
    <div class="codexml">
      <span class="xml2">&lt;/rdf:Description&gt;</span>
    </div>

    <p>
      Indique la fin du contenu de l'élément.
    </p>
    <p>
      donc le code :
    </p>
    <div class="codexml">
      <span class="xml1">&lt;?xml version="1.0"?&gt;</span><br />
      <br />

      <span class="xml2">&lt;rdf:RDF</span> <span class=
      "xml3">xmlns</span><span class="xml2">="</span><span class=
      "xml4">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span><span class="xml2">"</span><br />

      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span class=
      "xml3">xmlns:rdf</span><span class=
      "xml2">="</span><span class=
      "xml4">http://www.w3.org/1999/02/22-rdf-syntax-ns#</span><span class="xml2">"</span><br />

      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span class=
      "xml3">xmlns:map</span><span class=
      "xml2">="</span><span class=
      "xml4">http://www.oaklett.org/map/1.0#</span><span class=
      "xml2">"</span><br />
      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span class=
      "xml3">xmlns:dc</span><span class=
      "xml2">="</span><span class="xml4">http://purl.org/dc/elements/1.1/</span><span class="xml2">"&gt;</span>

      <span class="xml2">&nbsp;&nbsp;&nbsp;
      &lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml4">urn:sitemap:root</span><span class=
      "xml2">"&gt;</span><br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;map:container&gt;</span><br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

      &nbsp;&nbsp;&nbsp; &lt;rdf:Seq&gt;</span><br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;rdf:li</span>
      <span class="xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">syl:home</span><span class="xml2">"/&gt;</span><br />

      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp; &lt;/rdf:Seq&gt;</span><br class="xml2" />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;/map:container&gt;</span><br class="xml2" />
      <span class="xml2">&nbsp;&nbsp;&nbsp;
      &lt;/rdf:Description&gt;</span> <span class=
      "xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">syl:home</span><span class=
      "xml2">"&gt;</span><br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Ssylvainsab -
      Accueil<span class="xml2">&lt;/dc:title&gt;</span><br />
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://ssylvainsab.free.fr/index.html<span class="xml2">&lt;/dc:identifier&gt;</span><br />

      <span class="xml2">&lt;/rdf:Description&gt;<br />
      <br />

      &lt;/rdf:RDF&gt;</span>
    </div>
    <p>
      Veut dire : La version de ce fichier est la version 1.<br />
      Le contenu de la sitemap sera l'élément "syl:home".<br />
      Le titre de l'élément "syl:home" est Ssylvainsab - Accueil et
      c'est un lien vers la page
      http://ssylvainsab.free.fr/index.html.
    </p>
    <p>

      evidemment une sitemap avec seulement la page d'accueil
      n'aurait pratiquement aucun intêret. Il vous faut donc
      rajouter des éléments.
    </p>
    <p>
      nous allons voir ici comment faire pour ajouter des dossiers
      a votre sitemap. Par exemple, nous voulons que la sitemap
      contienne la page d'accueil et un dossier de photos. il
      faudra entrer le code :
    </p>
    <div class="codexml">
      [...]<br />
      <br />
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml4">urn:sitemap:root</span><span class=
      "xml2">"&gt;</span>&lt;!--Le début de la sitemap--&gt;<br />

      <span class="xml2">&nbsp;&nbsp;&nbsp;
      &lt;map:container&gt;</span>&lt;!--Le contenu de la
      sitemap--&gt;<br />
      <span class="xml2">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
      &lt;rdf:Seq&gt;</span><br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
      &nbsp;&nbsp; &nbsp; &lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class=
      "xml4">pagedaccueil</span><span class=
      "xml2">"/&gt;</span>&lt;!--On affichera en premier l'element
      "pagedaccueil"--&gt;<br />

      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp; &lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photos</span><span class=
      "xml2">"/&gt;</span>&lt;!--On affiche ensuite l'element
      "photos"--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;/rdf:Seq&gt;</span><br class="xml2" />

      <span class="xml2">&nbsp;&nbsp;&nbsp;
      &lt;/map:container&gt;</span>&lt;!--On ferme le contenu de la
      sitemap--&gt;<br class="xml2" />
      <span class="xml2">&lt;/rdf:Description&gt;</span>
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">pagedaccueil</span><span class=
      "xml2">"&gt;</span>&lt;!--Ceci est l'element
      "pagedaccueil"--&gt;<br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Accueil<span class=
      "xml2">&lt;/dc:title&gt;</span>&lt;!--Le titre de cet element
      est "Accueil"--&gt;<br />
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://www.monsite.com/index.html<span class="xml2">&lt;/dc:identifier&gt;</span>&lt;!--Il
      y a un lien vers ma page d'accueil sur cet
      element--&gt;<br />
      <span class="xml2">&lt;/rdf:Description&gt;</span>&lt;!--On
      ferme l'element "pagedaccueil"--&gt;<br />

      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">photos</span><span class=
      "xml2">"&gt;</span>&lt;!--Ceci est l'element "photos". C'est
      un dossier avec mes photos--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp;
      &lt;dc:title&gt;</span>Les Photos de Mes Vacances<span class=
      "xml2">&lt;/dc:title&gt;</span>&lt;!--Le titre du dossier est
      "Les Photos de Mes Vacances--&gt;<br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://www.monsite.com/photos/index.html<span class="xml2">&lt;/dc:identifier&gt;</span>&lt;!--Il
      y a un lien vers la page de mes photos sur cet element
      --&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;map:container&gt;</span>&lt;!--Le contenu de
      l'element "photos"--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;rdf:Seq&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

      &nbsp;&nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo1</span><span class=
      "xml2">"/&gt;</span>&lt;!--On affiche d'abord la premiere
      photo--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo2</span><span class=
      "xml2">"/&gt;</span>&lt;!--Puis la deuxieme--&gt;<br />

      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo3</span><span class=
      "xml2">"/&gt;</span>&lt;!--puis la troisieme--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo4</span><span class=
      "xml2">"/&gt;</span>&lt;!--...etc--&gt;<br />

      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo5</span><span class=
      "xml2">"/&gt;</span>&lt;!--etc--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;/rdf:Seq&gt;<br />

      &nbsp;&nbsp;&nbsp; &lt;/map:container&gt;</span>&lt;!--On
      ferme le contenu du dossier--&gt;<span class="xml2"><br />
      &lt;/rdf:Description&gt;</span><br />
      <span class="xml2"><br />
      &lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">photo1</span><span class=
      "xml2">"&gt;</span>&lt;!--Ceci est le contenu de l'element
      "photo1"--&gt;<br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Moi a la plage<span class=
      "xml2">&lt;/dc:title&gt;</span>&lt;!--Le titre de cet element
      est "Moi a la plage"--&gt;<br />
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://www.monsite.com/photos/premierephoto.jpg<span class="xml2">&lt;/dc:identifier&gt;</span>&lt;!--Il
      y a un lien vers la photo de moi a la plage dans cet
      element--&gt;<br />
      <span class="xml2">&lt;/rdf:Description&gt;</span>&lt;!--On
      ferme l'element "photo1"--&gt;<br />

      <br />
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">photo2</span><span class=
      "xml2">"&gt;</span>&lt;!--Ceci est le contenu de l'element
      "photo2"--&gt;<br />
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Moi a la montagne<span class=
      "xml2">&lt;/dc:title&gt;</span>&lt;!--Le titre de cet element
      est "Moi a la montagne"--&gt;<br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://www.monsite.com/photos/deuxiemephoto.jpg<span class="xml2">&lt;/dc:identifier&gt;</span>&lt;!--Il
      y a un lien vers la photo de moi a la montagne dans cet
      element--&gt;<br />
      <span class="xml2">&lt;/rdf:Description&gt;</span>&lt;!--On
      ferme l'element "photo2"--&gt;<br />
      <br />
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">photo3</span><span class=
      "xml2">"&gt;</span>&lt;!--On ouvre l'element--&gt;<br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Moi et mes amis<span class=
      "xml2">&lt;/dc:title&gt;</span>&lt;!--Le titre est "Moi et
      mes amis"--&gt;<br />
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://www.monsite.com/photos/troisiemephoto.jpg<span class="xml2">&lt;/dc:identifier&gt;</span>&lt;!--Il
      y a un lien vers la photo de moi et mes amis--&gt;<br />
      <span class="xml2">&lt;/rdf:Description&gt;</span>&lt;!--On
      ferme l'element--&gt;<br />

      <br />
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">photo4</span><span class=
      "xml2">"&gt;</span>&lt;!--On ouvre l'element--&gt;<br />
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Mon chien<span class=
      "xml2">&lt;/dc:title&gt;</span><br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://www.monsite.com/photos/monchien.jpg<span class="xml2">&lt;/dc:identifier&gt;</span>&lt;!--photo
      de mon chien--&gt;<br />
      <span class="xml2">&lt;/rdf:Description&gt;</span>&lt;!--On
      ferme l'element--&gt;<br />
      <br />
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">photo5</span><span class=
      "xml2">"&gt;</span>&lt;!--...etc--&gt;<br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:title&gt;</span>Moi<span class=
      "xml2">&lt;/dc:title&gt;</span><br />
      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>http://www.monsite.com/photos/photo.jpg<span class="xml2">&lt;/dc:identifier&gt;</span>&lt;!--...etc--&gt;<br />

      <span class=
      "xml2">&lt;/rdf:Description&gt;</span>&lt;!--etc--&gt;<br />

      <span class="xml2"><br />
      &lt;/rdf:RDF&gt;</span> [...]
    </div>
    <p>
      voici ce que le visiteur verra lorsqu'il visitera votre site
      :<br />
      <img style="border: 1px solid ; width: 297px; height: 253px;"
      alt="ACCUEIL | PHOTOS&gt; 1 2 3 4 5" src=
      "img/autres/navibarexemple.jpg" />
    </p>
    <p>

      Si vous ne voulez pas mettre de lien sur un dossier, il
      suffit de mettre une ancre (un dièze) à la place. Exemple :
    </p>
    <div class="codexml">
      <span class="xml2">&lt;rdf:Description</span> <span class=
      "xml3">rdf:about</span><span class=
      "xml2">="</span><span class=
      "xml3 xml4">photos</span><span class=
      "xml2">"&gt;</span>&lt;!--Ceci est l'element "photos". C'est
      un dossier avec mes photos--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp;
      &lt;dc:title&gt;</span>Les Photos de Mes Vacances<span class=
      "xml2">&lt;/dc:title&gt;</span>&lt;!--Le titre du dossier est
      "Les Photos de Mes Vacances--&gt;<br />

      &nbsp;&nbsp; &nbsp;<span class=
      "xml2">&lt;dc:identifier&gt;</span>#<span class=
      "xml2">&lt;</span><span class=
      "xml2">/dc:identifier&gt;</span>&lt;!--J'AI MIS UN DIEZE DONC
      IL N'Y A PAS DE LIENS ATTRIBUE A CE DOSSIER--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;map:container&gt;</span>&lt;!--Le contenu de
      l'element "photos"--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;rdf:Seq&gt; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

      &nbsp;&nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo1</span><span class=
      "xml2">"/&gt;</span>&lt;!--On affiche d'abord la premiere
      photo--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo2</span><span class=
      "xml2">"/&gt;</span>&lt;!--Puis la deuxieme--&gt;<br />

      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo3</span><span class=
      "xml2">"/&gt;</span>&lt;!--puis la troisieme--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo4</span><span class=
      "xml2">"/&gt;</span>&lt;!--...etc--&gt;<br />

      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;</span> <span class=
      "xml2">&lt;rdf:li</span> <span class=
      "xml3">rdf:resource</span><span class=
      "xml2">="</span><span class="xml4">photo5</span><span class=
      "xml2">"/&gt;</span>&lt;!--etc--&gt;<br />
      <span class="xml2">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;/rdf:Seq&gt;<br />

      &nbsp;&nbsp;&nbsp; &lt;/map:container&gt;</span>&lt;!--On
      ferme le contenu du dossier--&gt;<span class="xml2"><br />
      &lt;/rdf:Description&gt;</span>
    </div>
    <p>
      vous pouvez faire autant de dossiers et de fichiers que vous
      voulez à l'interieur d'autant de dossiers que vous voulez.
      Par contre attention, il ne faut pas mettre d'accent ou
      d'autre caractere à part "-" ou "_" dans votre fichier, sinon
      il y aura à la place un point d'interrogation.
    </p>
    <p>

      voila, vous savez maintenant comment faire une sitemap. Notez
      qu'il existe un validateur pour ce type de documents :
      <a href=
      "http://www.w3.org/RDF/Validator/">http://www.w3.org/RDF/Validator/</a>
    </p>
    <p>
      Si votre document n'est pas valide, vérifiez :
    </p>
    <ul>
      <li>Que toutes les balises sont bien fermées dans le bon
      ordre
      </li>
      <li>Que vous n'avez pas oublié de guillemets
      </li>

      <li>Que vous n'avez pas mi un caractère invalide
      </li>
    </ul>
    <h2>
      <a  id="tableaux"></a>les tableaux
    </h2>
    <h4>
      <a  id="summary"></a>attribut summary
    </h4>
    <p>

      Utilisez <span class="motcle">toujours</span> l'attribut
      "<span class="motcle">summary</span>" dans vos tableaux.
      C'est une règle pour <span class="motcle">respecter les
      normes</span> (<a href=
      "http://www.w3.org/">http://www.w3.org/</a>)
      d'internet.<br />
      Cet attribut est une sorte de "alt" pour un tableau.
    </p>
    <p>

      L'attribut "<span class="motcle">alt</span>" est le
      <span class="motcle">texte</span> qui s'affiche <span class=
      "motcle">à la place d'une image</span> lorqu'elle n'est pas
      chargée. Par exemple le code html :
    </p>
    <div class="code">
      <span class="code1">&lt;img</span>&nbsp; style="<span class=
      "code2">width: 150px; height: 35px;</span>" alt="<span class=
      "code2">html</span>"&nbsp;src="<span class=
      "code2">http://ssylvainsab.free.fr/img/boutons/btlogiciels.gif</span>"<span class="code1">&gt;</span><br />

      </div>
    <p>
      affichera : <img style="width: 110px; height: 36px;" alt=
      "html" src="img/boutons/btlogiciels.gif" />
    </p>
    <p>
      Cependant <span class="motcle">si la source est
      éronnée</span> (par exemple en se trompant on met .png au
      lieu de .gif) :
    </p>

    <div class="code">
      <span class="code1">&lt;img</span> style="<span class=
      "code2">width: 150px; height: 35px;</span>" alt="<span class=
      "code2">logiciels</span>" src="<span class=
      "code2">http://ssylvainsab.free.fr/img/boutons/btlogiciels.png</span>"<span class="code1">&gt;</span>
    </div>
    <p>

      ce qui sera affiché à l'écran sera : <img style=
      "width: 150px; height: 35px;" alt="logiciels" src=
      "img/autres/imgalt.png" /> car le lien vers l'image est
      erronné.<br />
      Mais avec l'attribut "alt" on sait quand même de quoi va
      parler la page. <span class="motcle">Très utile</span>.
    </p>
    <p>
      Si on n'avait <span class="motcle">pas mis d'attribut
      "alt"</span> ce qui aurait été affiché serait :<br />

      <img alt="pas de alt" style="width: 150px; height: 35px;"
      src="img/autres/imgssalt.png" />.<br />
      La, aucun idée du thème de la page. Beaucoup moins pratique.
    </p>
    <p>
      eh bien c'est un peu pareil pour un tableau. Par exemple
      l'attribut <span class="motcle">"summary" du tableau</span>
      de la page <span class="motcle"><a href=
      "temp/">Temp</a></span> de mon site est <span class=
      "motcle">"Videos et fichiers"</span>.<br />

      De cette façon le visiteur de mes pages sait de quoi va
      parler le tableau.
    </p>
    <p>
      En fait cet attribut et l'attribut "alt" servent plutot dans
      les <span class="motcle">navigateurs en mode texte</span>,
      comme Lynx,<br />
      ou pour les personnes qui ont <span class="motcle">désactivé
      les images</span> sur leur navigateur.
    </p>
    <hr style="width: 100%; height: 2px;" />

    <h4>
      <a  id="thead"></a>"Thead" et "Tfoot"
    </h4>
    <p>
      dans vos tableaux, vous avez sans doute déja voulu
      mettre&nbsp;<span class="motcle">un en-tête ou un
      pied</span>, mais vous ne savez pas comment faire?<br />
      C'est <span class="motcle">très simple</span>.
    </p>

    <p>
      habituellement votre tableau est en une partie : le corps
      (tbody) : regardez ce&nbsp;<span class="motcle">tableau de
      base</span> :
    </p>
    <table summary="exemple de tableau simple" style=
    "text-align: center; width: 400px;" border="2" cellpadding="2"
    cellspacing="2">
      <tbody>
        <tr>
          <td>
            liens.html
          </td>

          <td>
            <img style="width: 110px; height: 36px;" alt="Liens"
            src="img/boutons/btliens.gif" />
          </td>
        </tr>
        <tr>
          <td>
            news.html
          </td>
          <td>

            <img style="width: 110px; height: 36px;" alt="News"
            src="img/boutons/btnews.gif" />
          </td>
        </tr>
        <tr>
          <td>
            index.html
          </td>
          <td>
            <img style="width: 110px; height: 36px;" alt="Accueil"
            src="img/boutons/btaccueil.gif" />

          </td>
        </tr>
      </tbody>
    </table>
    <p>
      <br />
      ...et son code html (que j'ai coloré pour qu'il soit plus
      "lisible") :<br />
      <br />

    </p>
    <div class="code">
      <span class="code1">&lt;table</span> summary="<span class=
      "code2">exemple de tableau simple</span>" style="<span class=
      "code2">text-align: center; width: 400px;</span>"
      border="<span class="code2">2</span>"
      cellpadding="<span class="code2">2</span>"
      cellspacing="<span class="code2">2</span>"<span class=
      "code1">&gt;</span><br />

      <span class="code1">&lt;tbody&gt;</span><br />
      <br />
      <span class="code1">&lt;tr&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span>liens.html<span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;

      &lt;td&gt;&lt;img</span> style="<span class="code2">width:
      150px; height: 35px;</span>" alt="<span class=
      "code2">Liens</span>" src="<span class=
      "code2">http://ssylvainsab.free.fr/img/boutons/btliens.gif</span>"&gt;<span class="code1">&lt;/td&gt;</span><br />

      <span class="code1">&lt;/tr&gt;</span><br />

      <br />
      &nbsp;<span class="code1">&lt;tr&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span>news.html<span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;&lt;img</span> style="<span class="code2">width:
      150px; height: 35px;</span>" alt="<span class=
      "code2">News</span>" src="<span class=
      "code2">http://ssylvainsab.free.fr/img/boutons/btnews.gif</span>"<span class="code1">&gt;&lt;/td&gt;</span><br />

      <span class="code1">&lt;/tr&gt;</span> &nbsp;<span class=
      "code1">&lt;tr&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span>index.html<span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;&lt;img</span> style="<span class="code2">width:
      150px; height: 35px;</span>" alt="<span class=
      "code2">Accueil</span>" src="<span class=
      "code2">http://ssylvainsab.free.fr/img/boutons/btaccueil.gif</span>"<span class="code1">&gt;&lt;/td&gt;</span><br />

      <span class="code1">&lt;/tr&gt;</span><br />
      <br class="code1" />
      <span class="code1">&lt;/tbody&gt;</span><br class="code1" />
      <span class="code1">&lt;/table&gt;</span>
    </div>
    <p>
      <a  id=
      "decortictableau"></a>décortiquons-le :
    </p>

    <div class="code">
      <span class="code1">&lt;table</span> [...] <span class=
      "code1">&gt;</span>
    </div>
    <p>
      Indique le début du tableau<br />
      <br />
    </p>

    <div class="code">
      summary="<span class="code2">exemple de tableau
      simple</span>"
    </div>
    <p>
      Est l'attribut "summary". Si vous ne savez pas ce que c'est
      voyez&nbsp;plus haut : <a href="#summary">^</a>
    </p>
    <div class="code">

      <span class="code2">text-align: center; width: 400px;</span>"
    </div>
    <p>
      Est le "style" (comme son nom l'indique) du tableau. Il est
      indiqué ici que le texte est aligné au centre des cellules
      (les "cases") et que mon tableau fait 400 pixels&nbsp;de
      large.
    </p>
    <div class="code">
      border="<span class="code2">2</span>"
      cellpadding="<span class="code2">2</span>"
      cellspacing="<span class="code2">2</span>"
    </div>

    <p>
      Indique que la bordure fera 2 pixels, qu'il y aura 2 pixels
      entre la bordure et le contenu de chaque cellule et qu'il y
      aura une marge de 2 pixels entre chacune des cellules.<br />
      <br />
      <br />
    </p>
    <div class="code">
      <span class="code1">&lt;tbody&gt;</span>
    </div>

    <p>
      Tout ce qui va suivre dans cette balise sera <span class=
      "motcle">le corps</span> du tableau.
    </p>
    <div class="code">
      <span class="code1">&lt;tr&gt;</span>
    </div>
    <p>

      Tout ce qui va suivre dans cette balise sera <span class=
      "motcle">une ligne</span> du tableau (une balise <span class=
      "code1">&lt;tr&gt;</span> = une ligne avec un nombre x de
      colonnes)
    </p>
    <div class="code">
      <span class="code1">&lt;td&gt;</span>
    </div>
    <p>

      Ceci indique <span class="motcle">une cellule</span>. Ce qui
      va suivre sera son contenu. Il y a autant de balises
      <span class="code1">&lt;td&gt;</span> par ligne&nbsp;que de
      colonnes dans votre tableau.
    </p>
    <p>
      Donc :
    </p>
    <div class="code">
      <span class="code1">&lt;tbody&gt;</span><br />

      <span class="code1"><br />
      &lt;tr&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span>liens.html<span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;&lt;img</span> style="<span class="code2">width:
      150px; height: 35px;</span>" alt="<span class=
      "code2">Liens</span>" src="<span class=
      "code2">http://ssylvainsab.free.fr/img/boutons/btliens.gif</span>"&gt;<span class="code1">&lt;/td&gt;</span><br />

      <span class="code1">&lt;/tr&gt;</span>
    </div>
    <p>
      <br />
      Veut dire : Dans le <span class="motcle">corps du
      tableau</span> (<span class="code1">&lt;tbody&gt;</span>), il
      y a <span class="motcle">une ligne</span> (<span class=
      "code1">&lt;tr&gt;</span>[...]<span class=
      "code1">&lt;/tr&gt;</span>) qui comporte <span class=
      "motcle">deux cellules</span> (<span class=
      "code1">&lt;td&gt;</span>liens.html<span class=
      "code1">&lt;/td&gt;&lt;td&gt;</span>[...]<span class=
      "code1">&lt;/td&gt;</span>).<br />

      Le contenu de la première&nbsp;cellule est "liens.html" et
      celui de la deuxième est
    </p>
    <div class="code">
      <span class="code1">&lt;img</span> style="<span class=
      "code2">width: 150px; height: 35px;</span>" alt="<span class=
      "code2">Liens</span>" src="<span class=
      "code2">liens.gif</span>"&gt;

    </div>
    <p>
      qui veut dire : Il y a ici un image de largeur 150 pixels et
      de hauteur 35 pixels.<br />
      Cette image se nomme : liens.gif<br />
      Si elle ne s'affiche pas, il faut afficher à la place le
      texte "Liens".
    </p>
    <p>
      donc un tableau est formé comme ceci :
    </p>

    <div class="code">
      <span class="code1">&lt;table</span> summary="<span style=
      "font-style: italic;">Le "thème" de votre tableau</span>"
      style="<span style="font-style: italic;">La "présentation" de
      votre tableau(taille...)</span>" [ce que nous avons vu
      <a href="#decortictableau">plus haut</a>]<span class=
      "code1">&gt;</span> <span style="font-style: italic;">On
      ouvre le tableau</span> <span class=
      "code1">&lt;tbody&gt;</span><br />

      <span style="font-style: italic;">Le contenu du corps de
      votre tableau</span><span class="code1"><br />
      <br />
      &lt;tr&gt;</span><span style="font-style: italic;">Le contenu
      de la première ligne</span><br />
      &nbsp;&nbsp;&nbsp; <span class=
      "code1">&lt;td&gt;</span><span style="font-style: italic;">Le
      contenu de la première cellule</span><span class=
      "code1">&lt;/td&gt;</span><br />
      &nbsp;&nbsp;&nbsp; <span class=
      "code1">&lt;td&gt;</span><span style="font-style: italic;">Le
      contenu de la deuxième cellule</span><span class=
      "code1">&lt;/td&gt;</span><br />

      <span class="code1">&lt;/tr&gt;</span><span style=
      "font-style: italic;">On ferme la première ligne</span><br />
      <p>
        <br />
        <br />
        <span class="code1">&lt;tr&gt;</span><span style=
        "font-style: italic;">Le contenu de la deuxième
        ligne</span><br />
        <span class="code1">&nbsp;&nbsp;&nbsp;
        &lt;td&gt;</span><span style="font-style: italic;">Le
        contenu de la première cellule</span><span class=
        "code1">&lt;/td&gt;</span><br />

        <span class="code1">&nbsp;&nbsp;&nbsp;
        &lt;td&gt;</span><span style="font-style: italic;">Le
        contenu de la deuxième cellule</span><span class=
        "code1">&lt;/td&gt;</span><span class="code1"><br />
        &lt;/tr&gt;</span><span style="font-style: italic;">On
        ferme la deuxième ligne</span>
      </p>
      <p>
        <br />

        <span class="code1">&lt;tr&gt;</span><span style=
        "font-style: italic;">etc...</span><br />
        &nbsp;&nbsp;&nbsp; <span class=
        "code1">&lt;td&gt;</span><span style=
        "font-style: italic;">etc...</span><span class=
        "code1">&lt;/td&gt;</span><br />
        <span class="code1">&nbsp;&nbsp;&nbsp;
        &lt;td&gt;</span><span style=
        "font-style: italic;">etc...</span><span class=
        "code1">&lt;/td&gt;</span><br />

        <span class="code1">&lt;/tr&gt;</span><span style=
        "font-style: italic;">etc...</span><br />
        <br class="code1" />
        <span class="code1">&lt;/tbody&gt;</span> <span style=
        "font-style: italic;">On ferme le corps du
        tableau</span><span class="code1"><br />
        &lt;/table&gt;</span><br />
        <span style="font-style: italic;">On ferme le
        tableau</span><br />

      </p>
    </div>
    <p>
      <span class="motcle">Vous pouvez ajouter autant de lignes, de
      colonnes et de celulles que vous voulez :</span> exemple : un
      tableau à quatre colonnes et deux lignes :
    </p>
    <div class="code">
      <span class="code1">&lt;table</span> [...]<span class=
      "code1">&gt;</span> <span style="font-style: italic;">On
      ouvre le tableau</span><span class=
      "code1">&lt;tbody&gt;</span><span style=
      "font-style: italic;"><br />

      Le contenu du corps de votre tableau</span><br />
      <br />
      <span class="code1">&lt;tr&gt;</span><span style=
      "font-style: italic;">Le contenu de la première
      ligne</span><br />
      &nbsp;&nbsp;&nbsp; <span class=
      "code1">&lt;td&gt;</span><span style="font-style: italic;">Le
      contenu de la première cellule</span><span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;

      &lt;td&gt;</span><span style="font-style: italic;">Le contenu
      de la deuxième cellule</span><span class=
      "code1">&lt;/td&gt;</span> <span class=
      "code1">&nbsp;&nbsp;&nbsp; &lt;td&gt;</span><span style=
      "font-style: italic;">Le contenu de la troisième
      cellule</span><span class="code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span><span style="font-style: italic;">Le contenu
      de la quatrième cellule</span><span class=
      "code1">&lt;/td&gt;</span><br />

      <span class="code1">&lt;/tr&gt;</span><span style=
      "font-style: italic;">On ferme la première ligne</span><br />
      <br />
      <span class="code1">&lt;tr&gt;</span><span style=
      "font-style: italic;">Le contenu de la deuxième
      ligne</span><br />
      &nbsp;&nbsp;&nbsp; <span class=
      "code1">&lt;td&gt;</span><span style="font-style: italic;">Le
      contenu de la première cellule</span><span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;

      &lt;td&gt;</span><span style="font-style: italic;">Le contenu
      de la deuxième cellule</span><span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span><span style="font-style: italic;">Le contenu
      de la troisième cellule</span><span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span><span style="font-style: italic;">Le contenu
      de la quatrième cellule</span><span class=
      "code1">&lt;/td&gt;</span><br />

      <span class="code1">&lt;/tr&gt;</span><span style=
      "font-style: italic;">On ferme la deuxième ligne</span><br />
      <br class="code1" />
      <span class="code1">&lt;/tbody&gt;</span> <span style=
      "font-style: italic;">On ferme le corps du
      tableau</span><span class="code1">&lt;/table&gt;</span><br />
      <span style="font-style: italic;">On ferme le tableau</span>
    </div>

    <p>
      cela donne :&nbsp;
    </p>
    <table summary="exemple de tableau" style=
    "text-align: left; height: 30%;" border="2" cellpadding="2"
    cellspacing="2">
      <tbody style=
      "font-style: italic; text-transform: capitalize;">
        <tr>
          <td>
            le contenu de la première cellule
          </td>

          <td>
            le contenu de la deuxième cellule
          </td>
          <td>
            le contenu de la troisième cellule
          </td>
          <td>
            le contenu de la quatrième cellule
          </td>
        </tr>

        <tr>
          <td>
            le contenu de la première cellule
          </td>
          <td>
            le contenu de la deuxième cellule
          </td>
          <td>
            le contenu de la triosième cellule
          </td>

          <td>
            le contenu de la quatrième cellule
          </td>
        </tr>
      </tbody>
    </table>
    <p>
      <br />
      maintenant je vais vous montrer comment faire un en-tête et
      un pied à votre tableau (si vous avez bien compris ce que
      j'ai expliqué avant, ce sera facile) :
    </p>

    <p>
      Vous vous souvenez, je vous ai dit :<br />
      <cite>"</cite>
    </p>
    <div class="code">
      <span class="code1">&lt;tbody&gt;</span>
    </div>

    <p>
      <cite>Tout ce qui va suivre dans cette balise sera
      <span class="motcle">le corps</span> du tableau."</cite>
    </p>
    <p>
      eh bien c'est très simple, les en-têtes et les pieds se
      forment de la même manière que le corps du tableau :<br />
      il suffit de mettre des balises <span class=
      "code1">&lt;thead&gt;</span>[...]<span class=
      "code1">&lt;/thead&gt;</span> (pour l'en-tête) ou
      <span class="code1">&lt;tfoot&gt;</span>[...]<span class=
      "code1">&lt;/tfoot&gt;</span> (pour le pied) <span class=
      "motcle">avant</span> les balises <span class=
      "code1">&lt;tbody&gt;</span>[...]<span class=
      "code1">&lt;/tbody&gt;</span>.<br />

      <br />
      <span style="text-decoration: underline;">La seule chose qui
      peut paraître illogique, c'est que le pied est placé</span>
      <span class="motcle">avant le corps dans le code html</span>,
      mais il apparait <span style="text-decoration: underline;"
      class="motcle">après dans le tableau</span>. Retenez bien
      ceci pour ne pas vous tromper.<br />
      &nbsp;<br />
      Par exemple, pour le tableau que vous avez vu avant cela
      donne :
    </p>
    <table summary="exemple de tableau simple" style=
    "text-align: center; width: 400px;" border="2" cellpadding="2"
    cellspacing="2">

      <thead>
        <tr>
          <td>
            page
          </td>
          <td>
            image
          </td>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            liens.html
          </td>
          <td>
            <img style="width: 110px; height: 36px;" alt="Liens"
            src="img/boutons/btliens.gif" />
          </td>
        </tr>

        <tr>
          <td>
            news.html
          </td>
          <td>
            <img style="width: 110px; height: 36px;" alt="News"
            src="img/boutons/btnews.gif" />
          </td>
        </tr>
        <tr>

          <td>
            index.html
          </td>
          <td>
            <img style="width: 110px; height: 36px;" alt="Accueil"
            src="img/boutons/btaccueil.gif" />
          </td>
        </tr>
      </tbody>
    </table>

    <p>
      <br />
      Et le code html est :<br />
      <br />
    </p>
    <div class="code">
      <span class="code1">&lt;table</span> summary="<span class=
      "code2">exemple de tableau simple</span>" style="<span class=
      "code2">text-align: center; width: 400px;</span>"
      border="<span class="code2">2</span>"
      cellpadding="<span class="code2">2</span>"
      cellspacing="<span class="code2">2</span>"&gt;<br />

      <span class="code1"><br />
      &lt;thead&gt;<br />
      &nbsp;&nbsp;&nbsp; &lt;tr&gt;</span><br class="code1" />
      <span class="code1">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span>page<span class=
      "code1">&lt;/td&gt;</span><br class="code1" />

      <span class="code1">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span>image<span class=
      "code1">&lt;/td&gt;</span><br class="code1" />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;/tr&gt;</span><span class="code1"><br />
      &lt;/thead&gt;<br />
      <br />

      &lt;tbody&gt;</span><br />
      <span style="font-style: italic;">Contenu du
      tableau</span><br />
      <span class="code1">&lt;/tbody&gt;</span><br class="code1" />
      <span class="code1"><br />
      &lt;/table&gt;</span>
    </div>
    <p>

      <br />
      <br />
      Vous pouvez choisir ce que vous voulez faire : avec/sans
      &nbsp;: &nbsp; pied/en-tête.<br />
      avec un pied le code aurait été :<br />
      <br />
    </p>

    <div class="code">
      <span class="code1">&lt;table</span> [...]&gt;<br />
      <span class="code1"><br />
      &lt;tfoot&gt;<br />
      &nbsp;&nbsp;&nbsp; &lt;tr&gt;</span><br class="code1" />
      <span class="code1">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

      &lt;td&gt;</span>page<span class=
      "code1">&lt;/td&gt;</span><br class="code1" />
      <span class="code1">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      &lt;td&gt;</span>image<span class=
      "code1">&lt;/td&gt;</span><br />
      <span class="code1">&nbsp;&nbsp;&nbsp;
      &lt;/tr&gt;</span><span class="code1"><br />

      &lt;/tfoot&gt;<br />
      <br />
      &lt;tbody&gt;</span><br />
      <span style="font-style: italic;">Contenu du
      tableau</span><br />
      <span class="code1">&lt;/tbody&gt;</span><br class="code1" />
      <span class="code1"><br />
      &lt;/table&gt;</span><br />

    </div>
    <table summary="exemple de tableau simple" style=
    "text-align: center; width: 400px;" border="2" cellpadding="2"
    cellspacing="2">
      <tfoot>
        <tr>
          <td>
            page
          </td>
          <td>
            image
          </td>

        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>
            liens.html
          </td>
          <td>
            <img style="width: 110px; height: 36px;" alt="Liens"
            src="img/boutons/btliens.gif" />

          </td>
        </tr>
        <tr>
          <td>
            news.html
          </td>
          <td>
            <img style="width: 110px; height: 36px;" alt="News"
            src="img/boutons/btnews.gif" />
          </td>

        </tr>
        <tr>
          <td>
            index.html
          </td>
          <td>
            <img style="width: 110px; height: 36px;" alt="Accueil"
            src="img/boutons/btaccueil.gif" />
          </td>
        </tr>

      </tbody>
    </table>
    <p>
      <br />
      Ca ne sert pratiquement à rien, mais je vous le dis quand
      même : vous pouvez mettre autant de pied/en-tête que vous
      voulez. Par contre, seul le premier "pied" sera considéré
      comme tel(sera placé en bas du tableau). Les autres seront
      considérés comme des en-têtes(en haut du tableau).
    </p>
    <p>
      ah mais au fait, a quoi ca sert d'utiliser des en-têtes et
      des pieds, on aurait pu utiliser des lignes normales,
      c'aurait été pareil!<br />
      <br />

      Pas tout à fait : avec les balises "thead" et "tfoot" :
    </p>
    <ul>
      <li>Votre code est mieux organisé, c'est plus facile de s'y
      retrouver
      </li>
      <li>Si vous mettez des lignes à la place, si vous voulez
      ajouter une ligne à votre tableau, vous devrez faire bien
      attention à ne pas l'ajouter avant les en-têtes ou pieds de
      page, alors qu'avec ceci, la ligne se mettra au bon endroit.
      </li>
      <li>Avec le CSS, vous pouvez faire un style différent aux
      en-tête, pieds de pages et corps du tableau.
      </li>
    </ul>
    <h2>

      <a  id="astuces"></a>astuces
    </h2>
    <h4>
      <a  id="favicon"></a>mettre une favicône sur
      son site
    </h4>
    <p>
      Sur certains sites, peut-être avez vous remarqué
      une&nbsp;<span class="motcle">petite image</span> à gauche de
      l'url(et de l'onglet dans firefox) :
    </p>
    <table style="margin: 2.5%;" border="0" cellpadding="2"
    cellspacing="2">

      <tbody>
        <tr>
          <td>
            favicône :
          </td>
          <td>
            <img style="width: 262px; height: 22px;" alt=
            "S http://ssylvainsab.free.fr/index.html .\" src=
            "img/autres/bafavrss.jpg" />
          </td>
        </tr>

      </tbody>
    </table>
    <p>
      Par exemple quand vous surfez sur les pages de mon site, vous
      voyez : <img class='16' alt="::" title="C'est la favicône de mon site" src="/img/mini/favicon.png" />.
      Cette image s'apelle une "<em>favicône</em>". C'est pratique pour repérer quel
      onglet correspond à quel site.<br />
      Vous en voulez une sur votre site?
    </p>
    <p>
      Voici les étapes à suivre pour mettre un favicône sur votre site :
    </p>
    <ol>
      <li>Créez une image aux dimensions 16 pixels sur 16 pixels
      (environ) (avec paint : menu image puis attributs)
      </li>
      <li>Enregistrez-la sous le nom "favicon.ico"
      </li>
      <li>Deposez-la à la racine de votre site
      </li>
      <li>C'est tout ! Dorénavant les visiteurs qui iront sur votre
      site verront cette favicône.
      </li>

    </ol>
    <p>
      Notez que si vous ne déposez pas la favicone a la racine de
      votre site, vous devrez indiquer son emplacement dans chaque
      page pour qu'elle s'affiche, en faisant de cette facon
      :<br />
      Dans les balises <span class="code1">&lt;head&gt;</span> de
      votre page, mettez le code suivant : &lt;<span class=
      "code1">link</span> rel="<span class="code2">shortcut
      icon</span>" href="<span class="code2">emplacement de votre
      favicone</span>"&gt;.
    </p>

    <p>
      Vous pouvez également utiliser plusieurs favicones sur des
      pages différentes pour votre site, en changeant l'emplacement
      de la favicone.
    </p>
    <p>
      Il existe un validateur pour les favicones : <a href=
      "http://www.html-kit.com/favicon/validator/">http://www.html-kit.com/favicon/validator/</a>
    </p>
    <p>
      voyez aussi : <a href=
      "http://www.commentcamarche.net/faq/sujet-332">http://www.commentcamarche.net/faq/sujet-332</a>&nbsp;&nbsp;

      &nbsp;<a href=
      "http://www.xhtml.net/xhtmlcss/favicon">http://www.xhtml.net/xhtmlcss/favicon</a>
    </p>
    <hr />
    <h4>
      <a  id="iconrss"></a>mettre une icône signalant
      la préscence d'un flux RSS sur son site
    </h4>
    <p>
      sur certains sites, vous avez sans doute remarqué la présence
      de <span class="motcle">l'image</span>&nbsp;<img style=
      "width: 16px; height: 16px;" alt="RSS" title=
      "Cette image a droite de l'url signale un flux RSS." src=
      "img/mini/minirss.png" />, située à droite de l'url et
      signalant un <span class="motcle">flux RSS</span> sur le
      site. Vous aimeriez bien faire pareil ?
    </p>

    <table style="margin: 2.5%;" border="0" cellpadding="2"
    cellspacing="2">
      <tbody>
        <tr>
          <td>
            <img style="width: 262px; height: 22px;" alt=
            "S http://ssylvainsab.free.fr/index.html .\" src=
            "img/autres/bafavrss.jpg" />
          </td>
          <td>
            Icône signalant un flux RSS
          </td>

        </tr>
      </tbody>
    </table>
    <p>
      C'est très simple :<br />
      Une fois que vous avez <span class="motcle">créé votre flux
      RSS</span>, mettez le <span class="motcle">code html</span>

    </p>
    <div class="code">
      <span class="code1">&lt;link</span> rel="<span class=
      "code2">alternate</span>" type="<span class=
      "code2">application/rss+xml</span>" title="<span style=
      "font-style: italic;" class="code2">Titre de votre
      flux</span>" href="<span style="font-style: italic;" class=
      "code2">Emplacement de votre flux</span>"&gt;

    </div>
    <p>
      <br />
      entre les balises <span class="code1">&lt;head&gt;</span> et
      <span class="code1">&lt;head&gt;</span> de la page/des pages
      ou vous souhaitez voir cette image.
    </p>
    <p>

      exemple&nbsp;: sur ma page d'accueil, j'ai indiqué le code
      suivant :&nbsp;
    </p>
    <div class="code">
      <span class="code1">&lt;link</span> rel="<span class=
      "code2">alternate</span>" type="<span class=
      "code2">application/rss+xml</span>" title="<span class=
      "code2">Les news de Ssylvainsab par flux RSS</span>"
      href="<span class="code2">rss/rss.xml</span>"<span class=
      "code1">&gt;</span>

    </div>
    <p>
      cependant attention : il faut <span class="motcle">mettre ce
      code sur chaque page ou vous voulez voir cette image.</span>
      Sur ce site je l'ai mis sur la <span class="motcle">page
      d'acccueil, les news et la page du flux.</span>
    </p>
    <h2>
      <a  id="retenir"></a>a retenir pour vos pages :
    </h2>

    <p>
      vous pouvez regarder le code sources des pages des autres
      sites. C'est assez instructif.
    </p>
    <p>
      Pour les images sur internet, n'utilisez que les formats
      .gif,(pour les dessins sans trop de nuances) .png(pour les
      dessins) ou .jpg(pour les photos). Les autres formats sont
      trop lourds ou pas adaptés.
    </p>
    <p>
      Utilisez les attributs "alt" pour vos images et "summary"
      pour vos tableaux. Sinon vos pages ne seront pas
      valides(<a href="http://www.w3.org/">http://www.w3.org/</a>).
    </p>

    <p>
      respectez les standards du WEB (<a href=
      "http://www.w3.org/">http://www.w3.org/</a>)
    </p>
    <p>
      si vous le pouvez, utilisez le logiciel <a href=
      "logiciels/tidy.php">TidyGUI</a> pour vérifier vos pages
      avant de les mettre en ligne.
    </p>
    <p>

      L'extension <a href=
      "logiciels/firefox.php#webdeveloper">WebDeveloper</a> pour
      Firefox est très pratique : elle vous permet de vérifier vos
      fichiers CSS, html, rss.... et bien d'autres choses.
    </p>
    <p>
      validez vos pages avant de les mettre en ligne :
    </p>
    <p>
      les validateurs :
    </p>
    <ul>

      <li>html : <a href=
      "http://validator.w3.org">http://validator.w3.org/</a>
      </li>
      <li>css : <a href=
      "http://jigsaw.w3.org/css-validator/">http://jigsaw.w3.org/css-validator/</a>
      </li>
      <li>rss : <a href=
      "http://validator.w3.org/feed/">http://validator.w3.org/feed/</a>
      </li>

      <li>xml, rdf, sitemap : <a href=
      "http://www.w3.org/RDF/Validator/">http://www.w3.org/RDF/Validator/</a>
      </li>
      <li>favicône : <a href=
      "http://www.html-kit.com/favicon/validator/">http://www.html-kit.com/favicon/validator/</a>
      </li>
    </ul>
<?php require'autres/source-bas.php'?>

Retour