Préambule

Écumant les forums de codage et autres coins de geeks, je me rends compte que les mêmes erreurs reviennent très souvent dans le code des débutants (et même de moins débutants). Alors, faute de pouvoir traquer et éradiquer les sources qui propagent du html écrit à la truelle et du javascript de 12 ans d'âge, je tente — vaille que vaille — d'éduquer les jeunes délinquants du markup dont je croise la prose.

Lexique

Le premier problème récurrent, c'est de ne pas connaître les noms des différents éléments qui composent le code. C'est bien plus compliqué d'exposer un problème quand on ne sait pas comment s'appelle quelque chose. Aussi, voici un schéma explicatif très simple de la terminologie HTML/CSS.

Code:

<balise attribut="valeur">

Code:

déclaration {
   propriété: valeur;
}

Voilà ; dorénavant, interdiction de parler de "propriétés html" ou de "balises css".

HTML

Tout d'abord, si vous voulez en apprendre plus sur le HTML, vous pouvez suivre le cursus d'apprentissage du site : Étape 1 : Mise en forme d'éléments de message

La balise <br />

Une erreur courante (Mais où avez-vous trouvé ça ?!) consiste à écrire la balise <br /> en inversant le sens d'auto-fermeture : </br>. Ça n'existe pas. C'est soit <br /> (xhtml ou html) soit <br> (html seulement) ; pas </br> ni <br/> (l'espace n'est pas facultatif).

Et cette balise ne sert qu'à revenir à la ligne au sein d'un bloc de texte. Elle ne sert pas à sauter des lignes, ni à faire des marges : Pour ça, il y a le CSS (voir plus bas).

Attribut alt sur les images

L'attribut alt="" est obligatoire sur les balises <img />, pour une question d'accessibilité. En effet, si pour une raison X ou Y, votre image n'est pas chargée, le contenu de l'attribut alt sera affiché. Veillez donc à écrire une description très courte mais explicite de votre image (par exemple : "Portrait de Léonard de Vinci"). de la même façon, cet attribut sera interprété par les lecteurs d'écrans pour personnes malvoyantes ou non-voyantes; en lieue et place de l'image.

Ouverture et fermeture des balises

Les balises doivent être imbriquées proprement. C'est à dire que lorsque vous ouvrez une balise puis une seconde, il faut refermer la seconde avant la première.

Bon :

Code:

<div>
   <span>
   </span>
</div>

Mauvais :

Code:

<div>
   <span>
   </div>
</span>

Balises dépréciées

On est en 2015 au moment de la rédaction de cet article, et je vois encore régulièrement du code obsolète depuis l'arrivée du xhtml (2001). Il est important de noter que désormais (et depuis longtemps maintenant), on sépare la structure et le contenu (html) de la mise en forme (css).

Il est primordial de comprendre ce principe de sémantique du HTML. Lorsque qu'on utilise une balise <em>, ce n'est pas pour mettre du texte en italique, c'est pour créer une emphase ; or, il se trouve que dans les règles d'écriture occidentale, l'emphase est exprimée en italique. Exemple : "Tu es vraiment sûr de ton coup ?".

De fait, toutes les balises et attributs à but esthétique doivent être définitivement supprimées de vos pages : <center>, <font>, <basefont>, <strike>.

À noter que plusieurs balises dépréciées en xhtml ont fait leur retour en html5 avec un nouveau sens sémantique (tout relatif, personnellement j'ai surtout l'impression qu'ils savaient pas quoi en foutre). Leurs spécifications sont assez peu claires, voire franchement brouillons. Je vous les liste quand même : <b>, <i>, <s>, <u>.

De la même façon, les attributs liés au style doivent dégager : alink, background, bgcolor, link, vlink, align, valing, hspace, vspace, border, height, width, nowrap, star, clear, noshade...

Il est à noter cependant que phpBB est vieux (2001 pour la version2, 2006 pour la version 3), et les templates comportent donc de nombreuses "erreurs" de vieux code, encore davantage dans les modifications apportées par Forumactif. Les limitations techniques apportées par la plate-forme, ainsi que son code de base, vous obligeront probablement à faire fi de cette règle. Essayez néanmoins de toujours garder à l'esprit que vos codes doivent, eux, être toujours le plus propre possible.

marquee

La balise <marquee> n'est pas une balise standard, n'a jamais fait partie des spécifications HTML et n'en fera jamais partie. Un navigateur peut parfaitement décider de ne pas en tenir compte et donc de ne pas la faire fonctionner, voire ne pas l'afficher du tout. Ne l'utilisez pas, préférez l'animation via CSS ou le javascript.

• Étape 8 - Les transitions CSS
• Étape 1 - Introduction au Javascript

Les tableaux

Les tableaux sont utilisés pour mettre des données tabulaires, comme des résultats sportifs ou des notes.

En aucun cas il n'est permis de s'en servir pour mettre en page son site. Là encore, phpBB2 en est bourré, dû à l'ancienneté de la plate-forme. Cela reste une mauvaise pratique, et vous avez bien d'autres outils pour mettre en page votre forum.

Tout ceci est expliqué dans le cursus : Étape 7 ; Disposer ses éléments : Les tableaux.

Attributs d'événements

Les attributs d'événements, utilisés auparavant pour faire des appels aux fonctions javascript, sont à proscrire. Utilisez les gestionnaires d'événements directement dans un code javascript.

Parmi ces attributs, on trouve notamment onclick, onblur, onmouseover, onmouseout.

Il est recommandé d'utiliser plutôt directement le Javascript (Étape 1 - Introduction au Javascript). jQuery est également d'une grande aide pour les débutants.

Les mots à rallonge

Très souvent, on tombe sur des sujets rapportant des comportements étranges de texte qui dépasse de leur contenu. Et le texte en question, est une ligne infinie de caractères, soit du "aaaaaaaaaaaaaaaaaaaaaaaaa" (beaucoup plus long, entendons-nous), soit du "oihoihgopizeagjae". Le fait est qu'aucun mot n'est aussi long, et que le texte se met en forme aux espaces qui le composent. Donc sans espace, il n'ira jamais à la ligne sans une propriété pour l'y forcer. Alors avant de songer à l'y forcer, utilisez du vrai texte factice avec un générateur de lipsum, qui sert justement à ça.

La balise <p>

La balise <p> est utilisée pour mettre en forme des paragraphes. Si vous n'avez pas besoin de faire des paragraphes (C'est à dire plusieurs blocs de textes espacés entre eux), rien ne vous force à utiliser cette balise. Et contrairement à ce que j'ai pu lire, rien n'oblige les images à être contenues dans un paragraphe.

L'attribut style

Évitez d'utiliser l'attribut style="" pour mettre du CSS directement dans votre html. Outre le fait que ça rende le code difficile à maintenir (principalement à cause du problème de poids, cf. l'article sur le poids des déclarations), ça brise la séparation contenu / mise en forme.

CSS

Tout d'abord, si vous voulez en apprendre plus sur le CSS, vous pouvez suivre le cursus d'apprentissage du site : Étape 1 : Fonctionnement de la feuille de style CSS

Position

L'erreur la plus répandue est de croire qu'utiliser la propriété position est une bonne idée pour mettre en forme son site. C'est FAUX. C'est une très mauvaise idée, ce n'est pas fait pour ça, et ça ne vous apportera que des problèmes. Le positionnement est un système particulier qui demande d'être absolument maîtrisé avant de l'utiliser, sous peine de voir son site faire n'importe quoi.

Pour en apprendre davantage sur la propriété position et ses différentes utilisations, référez-vous au cursus : Étape 7 : Les positions et le z-index.

Les pourcentages

Une autre croyance qui a la vie dure : Mettre toutes les valeurs en % serait mieux. Ce n'est pas le cas. Il n'y a que de rares cas où l'utilisation des % se justifie (notamment les grilles CSS, comme 960.gz ou celles utilisé par Bootstrap ou Foundation).

Vous pouvez très bien faire un site extensible en n'utilisant qu'un minimum de valeurs en % (un exemple : Aligner trois colonnes proprement. Et même dans ces cas-là, n'utilisez pas les % pour des marges, elles n'ont pas à être extensibles !

Et pensez aux propriétés min-width et max-width.

Et width: 100%;, n'y pensez même pas.

Pour en savoir plus sur les tailles : Étape 5 - Définir et limiter les tailles

Les hauteurs

Une erreur courante : Vouloir à tout prix contrôler la hauteur des éléments de son site. C'est une mauvaise idée. Une page s'adapte en hauteur en fonction de son contenu. La hauteur que vous définissez par rapport à ce que vous voyez sur votre écran ne correspond pas à ce que verront les autres. Si quelqu'un zoome le texte pour des questions de visibilités, si un écran est trop petit et réduis l'espace, alors le contenu va dépasser le contenant, et ce sera à la fois moche et illisible. Sauf cas très spécifiques, ne touchez pas à la hauteur des éléments, laissez-les prendre la hauteur qu'ils veulent. Pour décoller le contenu des bords d'un conteneur, pensez au padding !

Pour en savoir plus sur les tailles : Étape 5 - Définir et limiter les tailles

Float et display

Il est parfaitement inutile d'essayer de donner à un élément flottant une propriété display. Un flottant est TOUJOURS de type block, et il est IMPOSSIBLE de changer ça.

Pour en savoir plus sur la propriété float :

• Étape 6 - Disposer ses éléments : Le "float"
• Étape 6b - Annexe : Bien comprendre le float & clear

Conclusion

Difficile d'être exhaustif, aussi cette petite liste sera complétée au fur et à mesure. Bref, maintenant que vous avez lu ça, vous avez de bonnes cartes en main. Alors faites du bon code !

Re-hello Manumanu!
C'est très gentil ce tuto mais euhm.... Tu sais qu'il y a le cursus codage? Où tout ça est vraiment dedans en plus de détail en réalité? ^^" Donc si tu veux aider au développement du Cursus, tu es évidemment la bienvenue, mais là, je ne suis pas certaine de pouvoir accepter ce tuto. ^^
Merci cependant d'avoir pensé à le partager avec nous, c'est très aimable! ^^

Merci pour ton partage et tes rappels Manu :p

En plus de ce qu'a dit Nyo au dessus, j'ajouterai que ce genre de topic aurait peut-être davantage sa place dans la partie "Discussion".
Ce sujet me rappelle d'ailleurs un topic qu'Alumine avait ouvert : Que faut-il utiliser à la place ? où elle expliquait justement qu'elle savait qu'il ne fallait pas utiliser certaines balises, mais pas forcément comment les remplacer. (^-^)

Du coup j'aurai plutôt tendance à dire que ce tuto ne s'adresse pas vraiment aux débutants... Cela serait peut-être plus intéressant en tant que "discussion ouverte sur les bonnes pratiques", non (: ?

Mettre "C'est une très mauvaise idée, ce n'est pas fait pour ça, et ça ne vous apportera que des problèmes" (par exemple) ça n'aidera pas forcément les gens à comprendre le souci... En expliquant davantage les problèmes et les solutions possibles, ça serait mieux, non ?

Une erreur courante : Vouloir à tout prix contrôler la hauteur des éléments de son site. C'est une mauvaise idée. Une page s'adapte en hauteur en fonction de son contenu. La hauteur que vous définissez par rapport à ce que vous voyez sur votre écran ne correspond pas à ce que verront les autres. Si quelqu'un zoome le texte pour des questions de visibilités, si un écran est trop petit et réduis l'espace, alors le contenu va dépasser le contenant, et ce sera à la fois moche et illisible. Sauf cas très spécifiques, ne touchez pas à la hauteur des éléments, laissez-les prendre la hauteur qu'ils veulent.

Hum... je serai ravie de discuter de cela... Donner une hauteur à ses descriptions de forum, ou bien aux éléments de sa PA relève plutôt du choix du design, non ? Après effectivement si on prend en compte le changement de taille de texte, la question serait peut-être de penser en em au lieu de px peut-être. Ce n'est pas une critique hein, juste une discussion autour d'une pratique (:

Ça me fait aussi un peu penser à autre tutoriel ([Aide] Les Erreurs les plus Courantes en Codage)

Ben là, c'est à vous de voir.

Je participe peu ou prou au forum, et honnêtement je ne me suis pas du tout penché sur le cursus ; j'ai d'ailleurs constaté son existence seulement hier soir en cherchant l'endroit adéquat pour poster. J'ignore ce qu'il contient, je ne sais pas ce qui est dit dedans.

Je me contente de proposer ce que j'ai en stock, après c'est à vous de décider que faire du contenu : Vous pouvez récupérer des bouts, supprimer des parties, en mettre ailleurs, placer le post à un endroit que vous jugez plus adéquat, ou simplement le refuser s'il ne convient pas ou fais doublon.

Pour la hauteur oui, je devrais spécifier "à moins que vous ne vouliez avoir un défilement horizontal", c'est effectivement assez répandu sur les FA.

Quant aux explications sur le positionnement, je ne peux pas faire beaucoup plus exhaustif que la phrase qui vient après ("Le positionnement est un système particulier qui demande d'être absolument maîtrisé avant de l'utiliser, sous peine de voir son site faire n'importe quoi.") ; je ne peux pas vraiment envisager chaque cas d'utilisation "logique" (encore moins les illogiques) et proposer les alternatives, ça reviendrait à faire un cours entier sur le positionnement des éléments. La seule chose que je peux faire, c'est de suggérer de lire d'autres cours qui s'y rapportent.

Après, une discussion sur les bonnes pratiques semble une bonne idée, mais il vaudrait peut-être mieux repartir de quelque chose de vierge plutôt que de ce sujet directement.

Hum, c'est un peu, comment dire... Je sais pas, tu as pas fait un tour du côté des tutos, rien que pour voir si tu ne fais pas de doublons? ^^" Comme tu le dis, c'est pas super sympas tu sais, c'est un peu "je m'en fiche de ce que vous faites, moi j'ai mes trucs"... C'est un peu moyen comme façon de faire ^^"

Et vraiment... tout ce dont tu parles est expliqué en long et ne large dans le cursus, notamment sur les positionnements. Donc plutôt que de faire des choses inutiles, ce serait bien de vérifier avant, et pourquoi pas, commenter sur les sujets même pour aider à l'améliorer, donner des idées, etc? C'est plus à ça que sert un forum d'entraide que juste déposer ses trucs et se casser, non?

Moi je trouve que ça fait simplement "J'ai ça à proposer ; si vous le voulez, vous pouvez le prendre". Et par extension, si ça ne va pas, il suffit de ne pas le prendre.

Mais si la forme pose problème, je comprend.

Salut Manu,

En fait la raison pour laquelle on préfère que les gens regardent s'il n'y a pas déjà les contenus qu'ils veulent poster avant de les rédiger c'est parce que ça nous gêne de devoir archiver/modifier un tutoriel qui a pris du temps. Après si c'était déjà un truc que tu avais sur ton ordi et que t'as quasi copier-coller c'est moins ennuyeux disons, mais si t'as pris deux heures pour l'écrire exprès pour le poster ici forcément on se sent un peu mal de plus savoir quoi en faire alors que t'as généreusement filé de ton temps au forum. Enfin tu comprends.

Cela étant, même si on retrouve les notions du cursus dans ce texte, il n'est pas expliqué de la même façon, il est peut-être moins accessible à des débutants complets mais pourra apporter une précision aux autres. Et puis nous ne sommes pas tous pareil, il y a des gens qui comprendront plus facilement le cursus, mais il y'en a d'autres qui auront plus de facilité à comprendre ce tutoriel-là.
La richesse des informations données sur N-U c'est qu'elles proviennent de plein de personnes différentes qui ont leur leur façon de voir ou l'expliquer les choses.

Donc je pense qu'on peut quand même garder ce tutoriel tel qu'il est, dans la section "Tutoriels codage". On peut toujours lier à l'intérieur le cursus qui a un déroulement plus "lent" dans l'explication.

Voilà x)

Salut salut !

Je comprend, oui ; mais vraiment, je n'ai pas de problème avec le temps passé sur un projet refusé. D'une part, parce que ça fait partie intégrante de la vie et du boulot, d'autre part parce que ce n'est jamais inutile ni perdu. Je sais pertinemment que lorsque je propose quelque chose, tutoriel ou autre, la réponse peut être positive comme négative.

Je me doute bien que tout le monde n'est pas dans ce cas et que gérer les déceptions des gens n'est pas forcément facile. Mais il n'y a pas besoin de s'encombrer de pommades avec moi, vraiment.

Pour en revenir au "tutoriel" (qui n'en est pas vraiment un mais que je ne sais pas comment appeler), ça pourrait effectivement être intéressant vers les différents points du cursus auquel ils peuvent correspondre, façon "pour en apprendre plus, vous pouvez suivre le cursus XY". Si l'idée convient (y compris à Nyo), je ferais ça, et les modifications suggérées par le commentaire de Nihil.

Ça me va! Préviens-moi quand tu auras eu le temps de faire les modifications, et surtout si tu as le temps de les faire ou si tu préfères que je les fasse pour toi ^^

Hey Manu? Où en sont les modifications?

Désolé du retard. J'ai fait quelques modifications, ajouté des explications et des liens vers les points de cursus ; dis-moi si ça convient.

Super, je déplace! ^^