Ce paragraphe sert juste de memo pour prendre de bonnes habitudes dans le codage.
Il existe en gros 2 façons de faire une page web : taper le code HTML à la main dans un bloc note ou alors utiliser un éditeur où l'on met ce que l'on veut et le logiciel se débrouille pour le mettre en HTML (ce sont les logiciels WYSIWYG).
Les éditeurs donnent un code qui s'affiche correctement mais niveau propreté du code, c'est moche. Si vous tapez votre code à la main, ne faites pas comme eux !
Voyez ceci :
| <html><head><title>ma page web</title></head><body><p>Ceci est le premier paragraphe de ma page : <span style="color:red">elle sera écrite en rouge !</span></p><p>Le seconde paragraphe sera <b>en gras</b> ou en <i>italique</i></p></body></html> | <html> <head> <title>ma page web</title> </head> <body> <p>Ceci est le premier paragraphe de ma page : <span style="color:red">elle sera écrite en rouge !</span></p> <p>Le seconde paragraphe sera <b>en gras</b> ou en <i>italique</i></p> </body> </html> |
Vous voyez la différence ? Le premier code est incompréhensible, même si c'est un code simple (il afficherais 2 lignes de texte dans un navigateur). Certains font le code ainsi. Moi je ne pourrais pas.
Le second code est déjà plus clair. On distingue parfaitement les différentes parties et le niveau d'imbrication des balises (on parle d'indentation). C'est plus facile pour s'y retrouver et donc plus simple pour le mettre à jour ou pour corriger une erreur.
Si vous faites vos pages à la main, je recommande la mise en page de la source. Certains langages comme le Python obligent que le code soit mis en forme avec l'imbrication des balises,et je pense que c'est bien d'avoir un truc rangé et propre.
L'indentation du code ci dessus est très bien faite par les logiciels, mais ces derniers (certains) ont un gros défaut : le code est mal fait ! Voici une ligne de texte.
« le mot bonjour est en gras, en italique et en rouge »
On peut faire comme ça :
le mot <span style="color: red;"><span style="font-weight: bold;"><span style="font-style: italic">bonjour</span></span></span> est en gras, en italique et en rouge.
Ou bien comme ça :
le mot <span style="color: red; font-weight: bold; font-style: italic;">bonjour</span> est en gras, en italique et en rouge.
Le seconde solution est meilleure : le code est moins grand (page plus légère) et c'est plus compréhensible. On n'a pas besoin de faire 3 balises, une pour chaque changement. C'est comme si pour prendre rendez-vous avec quelqu'un vous faisiez une lettre pour le lieu, une autre pour demander l'heure et la dernière pour lui dire au revoir. C'est idiot.
Et pourtant, ça se voit…
L'exemple ci dessus est déjà un exemple d'optimisation. On fait en sorte qu'il soit mieux utilisé et moins lourd. par exemple, on voit parfois ça :
<p><span style="color: blue; font-family: 'times new roman', times, serif; font-weight: bold">bonjour !</span></p>
C'est idiot. Pourquoi mette un <span> alors que les styles peuvent se mettre sur le <p> ? Bien sûr, cela implique que tout le contenu du paragraphe (<p>) soit concerné par le style :
<p style="color: blue; font-family: 'times new roman', times, serif; font-weight: bold">bonjour !</p>
Un autre exemple, c'est l'utilisation débile des CSS. Les CSS, ce sont les styles. Ils sont là pour faciliter le code, pas le compliquer !
Imaginons que nous ayons une page avec 5 paragraphes. Rien d'autre s'affiche (pas d'images, etc.) et on voit ceci dans le code :
<p style="color: blue; font-family: 'times new roman',
times, serif; font-weight: bold">bonjour !</p>
<p style="color: blue; font-family: 'times new roman',
times, serif; font-weight: bold">Comment tu vas ?</p>
<p style="color: blue; font-family: 'times new roman',
times, serif; font-weight: bold">Je vais bien et toi ?</p>
<p style="color: blue; font-family: 'times new roman',
times, serif; font-weight: bold">Parfait, je te remercie !</p>
<p style="color: blue; font-family: 'times new roman',
times, serif; font-weight: bold">…</p>
C'est un peu envahissant non ? Et bien, les CSS permettent ceci : dans votre fichier CSS, vous placez ceci :
p { color: blue; font-family: 'times new roman', times, serif; font-weight: bold }
et dans les HTML :
<p>bonjour !</p>
<p>Comment tu vas ?</p>
<p>Je vais bien et toi ?</p>
<p>Parfait, je te remercie !</p>
<p>…</p>
Le CSS indique au navigateur que tous les <p> de la page auront le style indiqué. Si vous avez d'autres <p> dans la page qui ne doivent pas avoir ces styles, mettez simplement une classe aux <p> intéressés et c'est parti !
Pareil pour les CSS d'un <table>. Inutile et idiot de mettre du CSS sur chaque cellule du tableau pour mettre tout en gras, une bonne fois pour toutes sur le tableau en entier donne le même résultat.
Bon, ces choses que je vais dire sont dites des millions de fois sur le web, mais bon…
Deux codes :
p { color: blue; font-family: 'times new roman', times, serif; font-weight: bold }
div.fg { font-family: 'times new roman', times, serif; float:left; boder: 1px solid red; }
table td.red { color: red; font-weight: normal; text-decoration: underline; border-left: red dashed 2px; border-bottom: 1px groove orange; }
et
p {
color: blue;
font-family: 'times new roman', times, serif;
font-weight: bold
}
div.fg {
font-family: 'times new roman', times, serif;
float:left;
border: 1px solid red;
}
table td.red {
color: red;
font-weight: normal;
text-decoration: underline;
border-left: red dashed 2px;
border-bottom: 1px groove orange;
}
Le second est un peu plus clair. Les lignes ne sont pas longues et denses mais courtes et aérés. Il existe de nombreuses façons de disposer ses CSS, et toutes fonctionnent, mais la mienne est celle ci-dessus, que je trouve lisible.
Il s'agit surtout de regrouper ce qui peut l'être.
Par exemple, les marges, bords et autre :
p {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
on peut, et on devrait, mettre :
p {
margin: 5px 10px 5px 10px;
}
ou même :
p {
margin: 5px 10px;
}
Une autre optimisation :
p {
margin: 5px 10px;
}
div {
margin: 5px 10px;
}
table {
margin: 5px 10px;
}
peut devenir :
p, div, table {
margin: 5px 10px;
}
Une petite remarque pour les marges : il existe les marges à l'intérieur d'une « boîte » et à l'extérieur. C'est par rapport au bord qu'il faut le voir.
Si on ajoute une bordure, son épaisseur vient s'ajouter autour de la boite : la surface interne reste la même, et la largeur de la bordure n'empiète pas sur le margin.
Bah, cette page a été faite rapidement mais je pense que ça peut aider… Il est loin d'être complet mais voila…
Page créée le vendredi 16 avril 2010
Dernière mise à jour le samedi 16 avril 2011