Héhé j'ai oublié de te demander si tu utilises un logiciel pour coder. On peut faire un code sur n'importe quelle page blanche, mais utiliser un logiciel est très pratique puisque ça permet de visualiser les balises (qui généralement sont mises en couleur) et de voir facilement lorsqu'on a oublié d'en fermer une.
Je ne peux pas faire de pub, donc je n'ai pas de nom à te donner, mais tu en trouveras facilement des gratuits (et souvent libres) en faisant une recherche sur internet.
Dernière question : sais-tu faire la différence entre les balises, les classes et les id lorsque tu construis le css ?
Après... plus qu'à attaquer ^^
On va commencer par la différence entre les balises block et les balises inline.
Ces ceux mots viennent de l'anglais.
Block veut dire... bloc. Pas vraiment de surprise. Les balises block sont faites pour enfermer un contenu... qui peut être un peu n'importe quoi. Leur gros avantage est qu'on peut changer leurs dimensions et leurs marges. Pour les représenter, un peut tracer un cadre... une boîte.
Div est une balise block, de même que p... et d'autres.
Inline signifie en ligne. Une balise de ce tyle est faite pour s'intégrer dans un block... voire dans un texte. Elle n'entraîne pas de retour à la ligne lorsqu'elle est utilisée (exception pour br /, qui sert justement à ça), contrairement aux balises de type bloc.
Un lien a, les images img... sont des balises inline.
Je ne sais pas si j'ai été clair, donc voici un dessin pour illustrer.
Les block sont les cadres rouges, et ce qui est surligné en bleu représente les inline, qui pourraient être un peu n'importe quoi.
Parlons maintenant des balises dites génériques. Elles sont au nombre de deux, et chacune est d'un type différent : div (block) et span (inline).
A quoi elles servent ? Pas compliqué, elles ne servent à rien et ne veulent rien dire.
Pourquoi les avoir créées alors ? ... parce qu'on va s'en servir pour définir des propriétés via le css. A la place d'utiliser font, on va utiliser un span.
Pour t'expliquer comment faire, j'attends de savoir si tu sais ou non créer une classe dans le css et l'appliquer à une balise.
Je vais maintenant essayer de t'expliquer le principe de fonctionnement d'un tableau. Ce n'est pas très compliqué, ça demande juste un peu de logique, et honnêtement je ne comprends pas que certains aient autant de difficultés avec. Personnellement j'ai appris leur structure de base en observant un code généré sur un message... écrit en bbcode. Donc je pense que ça reste abordable pour tout le monde. Ne panique pas devant le code en te disant "c'est un monstre, c'est beaucoup trop compliqué je n'y arriverai jamais"... parce que c'est là l'erreur à ne pas faire. Je vais essayer d'être le plus clair possible. Quitte à devoir relire la suite plusieurs fois, assures-toi de bien comprendre le schéma de base... parce que ne pas maîtriser les tableaux est très handicapant pour le codage sur les forums (un peu moins quand on veut faire un site, car les tableaux ne doivent pas être utilisés pour la mise en page... donc on trouve d'autres astuces).
Bien trêve de blabla... place aux explications.
Un tableau... je ne t'explique pas ce que c'est. Une grille avec des lignes et des colonnes.
En html, c'est un tout petit peu différent.
Un tableau, c'est tout d'abord un cadre. Une boîte. Cette boîte contient des étages, qui sont des lignes horizontales. On peut l'assimiler à une nouvelle boîte. Et chaque ligne contient des cellules, qui sont encore chacune une boîte, et c'est seulement dans cette boîte là qu'on va pouvoir écrire. Il ne faut rien mettre en dehors des boîtes qui définissent les cellules. Le faire est une faute.
Il n'y a donc pas à proprement parler de colonnes. L'impression de colonnes est donnée par le fait que les cellules placées à la même position dans la ligne vont automatiquement prendre la même largeur.
Pour résumer, ça donnera donc quelque chose qui ressemblera à ça :
La tableau est en rouge, les lignes en bleu, et les cellules en vert.
Si ce principe de fonctionnement est bien compris, on va pouvoir passer au code.
• La tableau s'ouvre avec la balise table, et se referme après qu'on ait placé toutes nos lignes et toutes nos cellules.
• Une ligne se créée avec la balise tr, et se referme une fois qu'on a placé toutes nos cellules à l'intérieur.
• Une cellule se créée avec la balise td et se referme quand on a fini d'introduire son contenu.
○ Il faut veiller à ce qu'il y ait toujours le même nombre de cellules sur chaque ligne.
○ Quand on construit le code, on va revenir à la ligne après chaque balise, et créer un décalage (de préférence avec la touche tabulation (celle qui a les deux flèches, généralement située au-dessus de la touche de verrouillage des majuscules), mais attention elle n'est pas utilisable sur les pages internet, où elle sert à la navigation). Ainsi on mettra la balise d'ouverture au-dessus de la balise de fermeture. Cela permet de clarifier le code, et de faciliter grandement la relecture.
Nous aurons donc quelque chose de ce genre :
- Code:
-
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Ici le tableau comporte une seule ligne et une seule cellule... mais il n'y a pas de limites et on peut en mettre autant qu'on veut, tant qu'on respecte les règles.
Je vais m'arrêter là sur les explications pour le moment. Si tu n'as pas compris quelque chose, n'hésite surtout pas à me le faire remarquer.
Je ne t'ai pas montré comment utiliser les div, mais si tu veux essayer de créer un tableau, montre-le moi et je te le corrigerai. Tu peux par exemple essayer avec celui de ta page d'accueil, sans mettre aucun css
On rajoutera la mise en forme plus tard.
Fu'
Lun 03 Juin 2024, 17:20 par 
