Quelques explications techniques pour le site de l'APRIL

xHTML

Le site de l'APRIL utilise de l'XHTML 1.0 STRICT (le x a son importance). É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 :

.fg
{
	float: left;
}

Exemple :

<img href="" alt="" class="fg" />

Effet : Flottant à gauche.

fd - flottant droit

CSS :

.fd
{
	float: right;
}

Exemples :

<img href="" alt="" class="fd" />

Effet : Flottant à droite.

clear

CSS :

.clear
{
	clear: both;
}

Exemples :

<div class="clear"></div>

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 :

.fc
{
	margin-left: auto;
	margin-right: auto;
}

Exemples :

<div class="fc">[...]</div>

Effet : Centre un élément (de type block).

ag - alignement à gauche

CSS :

.ag
{
	text-align: left;
}

Exemples :

<p class="ag">[...]</p>

Effet : Alignement à gauche.

ad - alignement à droite

CSS :

.ad
{
	text-align: right;
}

Exemples :

<p class="ad">[...]</p>

Effet : Alignement à droite.

ac - alignement au centre

CSS :

.ac
{
	text-align: center;
}

Exemples :

<p class="ac">[...]</p>

Effet : Alignement au centre.

c1 - premier cadre

Remarque : à utiliser avec un fd, fg ou fc pour les mettre quelque part !

CSS :

.c1
{
    margin: 0px 20px;
    padding: 10px;
    border: 1px solid #999;
    width: 400px;
    background-color: #EFEFF7;
}

Exemples :

<div class="c1 fd">
    <p>
        <img href="" alt="" class="fd" />
    </p>
    <p>[...]</p>
    <p>[...]</p>
</div>

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 :

.c2
{
	margin: 0px 20px;
	padding: 20px;
	border: 1px solid #999;
	width: 300px;
	background-color: #F0F3F4;
}

Exemples :

<div class="c2 fg ad">
    <p>
        <img href="" alt="" class="fd" />
    </p>
    <p>[...]</p>
    <p>[...]</p>
</div>

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 :

.c3
{
	margin: 0px 20px;
	padding: 20px;
	border: 1px solid #999;
	width: 70%;
	min-height:225px;
	background-color: #FEFEFE;
}

Exemples :

<div class="c3 fc ac">
    <p>
        <img href="" alt="" class="fg" />
    </p>
    <p>[...]</p>
    <p>[...]</p>
</div>

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 :

<strong class="mandatory">TEST</strong>