|
|
| Ligne 1 : |
Ligne 1 : |
| − | == xHTML ==
| + | Le contenu de cette page a été placée sur le site web : |
| − | Le site de l'APRIL utilise de l'XHTML 1.0 STRICT (le x a son importance). | + | http://www.april.org/fr/quelques-explications-techniques-pour-le-site-de-lapril |
| − | Étant donnée que nous essayons de maintenir le site valide (validator.w3.org) mais aussi par ce qu'il est important de rester cohérent et claire dans le code, essayez de suivre les petites règles de base qui suivent :
| |
| − | | |
| − | * Fermez les balise correctement : au lieu de ''<br>'', ''<hr>'', ''<img>'' utilisez ''<br />'', ''<hr />'', ''<img />'' (dans mes souvenirs le W3C recommande l'espace entre ''br'' et ''/'').
| |
| − | * L'attribut alt (pour les images ''<img alt="" />'' est obligatoire !
| |
| − | ** Quand l'image est utile uniquement pour le design, mettez un ''alt=""'' (vide). Le mieux étant de mettre directement l'image dans le CSS, quand on en a la possibilité : Théoriquement tout ce qui est dans le XHTML est du contenu et tout le CSS de la forme. Si l'image fait partie du design, elle est supposée être définie dans le CSS, auquel cas l'attribut alt n'est pas nécessaire (il n'est pas nécessaire de savoir ce que l'image représente si on ne peux pas l'afficher vu que ce n'est que du décor).
| |
| − | ** Quand l'image contient du texte, recopiez le texte (''alt="Adhérez en tant qu'entreprise"'', par exemple).
| |
| − | ** Sinon, décrivez ce que contient l'image / photo (''Jérémie Zimmermann lors de sa conférence à la Cité des sciences et de l'industrie'', par exemple).
| |
| − | * Fermez toutes les balises. ''<ol> <li>aaa <li>bbb <li>ccc </ol>'' fonctionnera sans doute, mais utilisez : ''<ol> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol>''.
| |
| − | * Sautez de lignes dans le code.
| |
| − | * N'utilisez pas l'html pour le style mais le CSS (avec l'attribut ''style=""'' quand vous n'avez pas accès aux CSS).
| |
| − | ** pas de ''<center></center>'' pour centrer.
| |
| − | * ''Trop de div tue le div'', phrase lu je ne sais plus où.
| |
| − | ** Mais quand je vois <div style="blabla"><div><div style="bloblo">[...]</div></div></div>. Autant écrire <div style="blabla ; bloblo">[...]</div>
| |
| − | ** Ou encore <div style="blbla"><p>[...]</p></div> autant écrire : <p style="blbla">[...]</p>
| |
| − | * Pensez et respectez la sémantique des balises (<div> et <span> sont eux des balises génériques).
| |
| − | ** <p> est un paragraphe ! <br /> un saut de ligne.
| |
| − | ** On saute de ligne uniquement dans les paragraphes.
| |
| − | ** Il n'y a pas d'éléments de type ''block'' dans un paragraphe.
| |
| − | | |
| − | == CSS ==
| |
| − | Encore quelques conseils du coté CSS :
| |
| − | | |
| − | * Ne changez pas le comportement d'une balise sur l'ensemble du site mais localement (avec un ''id'' ou un ''class''). Exemple : mettre toutes les images en diplay : block - mauvaise idée !
| |
| − | * Essayer (quand vous avez le temps) de vérifier le comportement sur plusieurs navigateurs, plusieurs résolutions.
| |
| − | | |
| − | == Quelques class CSS ==
| |
| − | Pour ce simplifier la vie, voici quelques class CSS, à utilisez de la manière suivante <balise class="nom_class">
| |
| − | | |
| − | === fg - flottant gauche ===
| |
| − | '''CSS : '''<pre><nowiki>.fg
| |
| − | {
| |
| − | float: left;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemple : '''<pre><nowiki><img href="" alt="" class="fg" /></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Flottant à gauche.
| |
| − | | |
| − | === fd - flottant droit ===
| |
| − | '''CSS : '''<pre><nowiki>.fd
| |
| − | {
| |
| − | float: right;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><img href="" alt="" class="fd" /></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Flottant à droite.
| |
| − | | |
| − | === clear ===
| |
| − | '''CSS : '''<pre><nowiki>.clear
| |
| − | {
| |
| − | clear: both;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><div class="clear"></div></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite.
| |
| − | | |
| − | '''Remarque : '''Il est parfois intéressant de l'utiliser à la fin pour éviter que le flottant ait un effet avec le reste du site (hors contenu) comme le menu de droite ou le bas de page.
| |
| − | | |
| − | === fc - flottant centre ===
| |
| − | '''Remarque''' : ce n'est pas un flottant, mais cela centre un élément de type ''block'' en indiquant que les marges extérieurs des coté sont à régler automatiquement.
| |
| − | | |
| − | '''CSS : '''<pre><nowiki>.fc
| |
| − | {
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><div class="fc">[...]</div></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Centre un élément (de type ''block'').
| |
| − | | |
| − | === ag - alignement à gauche ===
| |
| − | '''CSS : '''<pre><nowiki>.ag
| |
| − | {
| |
| − | text-align: left;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><p class="ag">[...]</p></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Alignement à gauche.
| |
| − | | |
| − | === ad - alignement à droite ===
| |
| − | '''CSS : '''<pre><nowiki>.ad
| |
| − | {
| |
| − | text-align: right;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><p class="ad">[...]</p></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Alignement à droite.
| |
| − | | |
| − | === ac - alignement au centre ===
| |
| − | '''CSS : '''<pre><nowiki>.ac
| |
| − | {
| |
| − | text-align: center;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><p class="ac">[...]</p></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Alignement au centre.
| |
| − | | |
| − | === c1 - premier cadre ===
| |
| − | '''Remarque : '''à utiliser avec un fd, fg ou fc pour les mettre quelque part !
| |
| − | | |
| − | '''CSS : '''<pre><nowiki>.c1
| |
| − | {
| |
| − | margin: 0px 20px;
| |
| − | padding: 10px;
| |
| − | border: 1px solid #999;
| |
| − | width: 400px;
| |
| − | background-color: #EFEFF7;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><div class="c1 fd">
| |
| − | <p>
| |
| − | <img href="" alt="" class="fd" />
| |
| − | </p>
| |
| − | <p>[...]</p>
| |
| − | <p>[...]</p>
| |
| − | </div></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Transforme le div en cadre de type 1
| |
| − | | |
| − | '''Remarque : '''Dans ce cas, le cadre est à droite et à l'intérieur du cadre il y a 3 paragraphes dont un contient une image qui va être mise sur le coté droit par rapport au deux autres du fait du flottant droit (fd).
| |
| − | | |
| − | === c2 - second cadre ===
| |
| − | '''Remarque : '''à utiliser avec un fd, fg ou fc pour les mettre quelque part !
| |
| − | | |
| − | '''CSS : '''<pre><nowiki>
| |
| − | .c2
| |
| − | {
| |
| − | margin: 0px 20px;
| |
| − | padding: 20px;
| |
| − | border: 1px solid #999;
| |
| − | width: 300px;
| |
| − | background-color: #F0F3F4;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><div class="c2 fg ad">
| |
| − | <p>
| |
| − | <img href="" alt="" class="fd" />
| |
| − | </p>
| |
| − | <p>[...]</p>
| |
| − | <p>[...]</p>
| |
| − | </div></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Transforme le div en cadre de type 2
| |
| − | | |
| − | '''Remarque : '''Dans ce cas, le cadre est à gauche (fg) et à l'intérieur du cadre il y a 3 paragraphes dont un contient une image qui va être mise sur le coté droit par rapport au deux autres du fait du flottant droit (fd). Dans ce cas encore tout le texte va être aligné sur la droite (ad).
| |
| − | | |
| − | === c3 - troisième cadre ===
| |
| − | '''Remarque : '''à utiliser avec un fd, fg ou fc pour les mettre quelque part !
| |
| − | | |
| − | '''CSS : '''<pre><nowiki>
| |
| − | .c3
| |
| − | {
| |
| − | margin: 0px 20px;
| |
| − | padding: 20px;
| |
| − | border: 1px solid #999;
| |
| − | width: 70%;
| |
| − | min-height:225px;
| |
| − | background-color: #FEFEFE;
| |
| − | }</nowiki></pre>
| |
| − | | |
| − | '''Exemples : '''<pre><nowiki><div class="c3 fc ac">
| |
| − | <p>
| |
| − | <img href="" alt="" class="fg" />
| |
| − | </p>
| |
| − | <p>[...]</p>
| |
| − | <p>[...]</p>
| |
| − | </div></nowiki></pre>
| |
| − | | |
| − | '''Effet : '''Transforme le div en cadre de type 3
| |
| − | | |
| − | '''Remarque : '''Dans ce cas, le cadre est au centre (fc) et à l'intérieur du cadre il y a 3 paragraphes dont un contient une image qui va être mise sur le coté gauche par rapport au deux autres du fait du flottant gauche (fg). Dans ce cas encore tout le texte va être aligné au centre (ac).
| |
| − | | |
| − | '''Attention : '''Vous devez utilisez '''fc''' après les cadres ! Sinon, les "margin : auto" du fc seront remplacer par les "margin" des cadres.
| |
| − | | |
| − | === Pour attirer l'attention ===
| |
| − | '''Remarque : '''Pour attirer l'attention sur un point, vous pouvez mettre un texte en couleur orange
| |
| − | | |
| − | Vous pouvez utiliser la class "mandatory" pour signaler un contenu obligatoire par exemple.
| |
| − | | |
| − | '''Exemple de code : '''<pre><nowiki>
| |
| − | <strong class="mandatory">TEST</strong>
| |
| − | </nowiki></pre>
| |
| | | | |
| | [[Catégorie:SiteWeb]] | | [[Catégorie:SiteWeb]] |
