coder, c'est pas bien sorcier.
le tout, c'est de comprendre ce qui se passe !BON. Alors je sais que la plupart des gens sont absolument révulsés par les codages. JE SAIS que ça peut paraître difficile, et que parfois, croyez-moi, ça l'est.
Le tutoriel que je vais vous rédiger ne va pas pouvoir vous apprendre à faire des forums entiers, parce que même moi j'en suis bien incapable, et pas mal de trucs sont difficiles à expliquer.
Mais j'espère vous laisser la possibilité de faire pas mal de petites choses sympas.
Et de vous aider à pouvoir toucher à des codes sans devenir fous.
Sur ce, si vous avez la moindre question, n'hésitez pas à la poser à la suite, vous ne serez peut-être pas le/la seul(e) à vous la poser. Et je mange pas.
NOTE : le tutoriel est rédigé avec mes propres mots. Je ne me sers d'aucun tutoriel déjà fait ou quoi. Alors soyez indulgents, please. Je suis une bidouilleuse, mais pas une codeuse professionnelle non plus. .✩ introduction.✩ pas plus compliqué que de cuisiner.
Le codage, dans les faits, c'est un peu comme une recette de cuisine : y a les ingrédients, les différentes parties, et quand on met certaines choses ensemble, ça donne certains goûts. Quand on met plein de trucs ensemble, ça donne un gâteau, un cake, un plat. Ou comparez ça à du français, pour les férus de français : on prend un verbe, on prend un mode, un temps, une personne, un genre, un nombre, et ça nous donne une conjugaison. Bref. En soi, c'est pas bien compliqué. Faut juste comprendre les différents éléments, ce qui se passe quand on les assemble, et le tour est joué.
✩ template, css, html.
Un rapide petit topo sur ces trois outils. Ce tutoriel traite bien entendu du HTML, mais parce que je vais parfois parler de css, je tiens à vous expliquer ce que à quoi template et css correspondent.
(si vous vous en fichez et ne voulez pas vous embrouiller l'esprit non plus, n'hésitez pas à sauter, ce n'est pas bien important.)Les templates sont situés dans le panneau d'administration d'un forum, et servent à donner une apparence à chaque page qui s'affiche, à chaque partie de page, parfois. Par exemple, il y a un template pour l'affichage de la liste des sujets dans un forum, un template pour l'affichage d'un sujet en lui-même (comment s'organise votre profil, la position de l'avatar, du pseudo, etc.), un template pour l'affichage des catégories, pour le « qui est en ligne », etc. Bref, invasion de templates.
Le CSS, lui, permet d'organiser un peu toute cette apparence. Dites-vous que si on devait faire chaque template avec tous ses petits codes, et répéter à chaque fois les combinaisons, ce serait bien long ! Le CSS sert à faire des codes prédéfinis, en quelque sorte. C'est un peu le travail préparatoire, fait en amont, qui contient toutes les informations du codage. Le CSS est composés de codes « clés », si je puis dire, qui sont ensuite divisés en une liste de propriétés. Ces codes clés sont ensuite insérés dans les templates (ou dans du HTML, parfois), et leurs propriétés s'appliquent directement.
Je ne sais pas si ces petites explications vous permettent d'y voir plus clair (pour ceux qui n'ont pas l'habitude du tout des termes). Mais en somme, les templates sont les os, le css correspond aux muscles et à la peau qui s'y rattachent, et qui donnent la possibilité aux os de se mouvoir et de s'articuler. Et vous, dans la vie de tous les jours, vous voyez le corps bouger !
Le HTML, quant à lui... Et bien, ça correspond tout simplement à la manière de coder, à la forme des codes, si je puis dire. Les templates sont en partie composés de codes HTML (pour le CSS, c'est plus compliqué). Et c'est ce que je vais vous apprendre, en partie, dans ce sujet.
✩ chapitre 1 : les balises, ou fondations.
✩ du crochets au chevrons ?
Les codes que je vais vous aider à construire ne sont pas entourés de crochets « classiques », comme les formes simples [b] [i] ou encore [color=#000000] etc. Là, on parle des fameuses balises div et span, entourées de petits chevrons comme ceci : <> : c'est ce qu'on appelle donc du code HTML.
(NOTE : je ne peux pas vous les mettre pour de vrai entre chevrons. Toutes celles qui seront entre chevrons seront dans des balises
[code*] pour la simple et bonne raison que ces balises, div et span entourées de <>, ne s'affichent pas, et sont TOUJOURS invisibles. L'un des pièges de les mettre : on ne sait jamais si on a bien refermé toutes les balises, ou non.)✩ div et span.
Div et span sont les principales balises des codages avec des chevrons.
Span correspond à la mise en forme du texte, principalement : sa police, sa taille, sa couleur, l'interligne, son opacité, etc. Vous ne pourrez pas mettre en page un texte avec une simple balise span (cadre, tableau, marges, largeur, etc.). Pour ça, vous aurez besoin d'une balise div. La balise div sert à coder absolument tout, et inclut l'apparence du texte ET sa mise en page. Ce qui explique qu'elle soit partout. Et d'où le fait qu'il faille faire particulièrement attention au nombre qu'on ouvre, et à celui qu'on ferme.
Vous me direz, si div fait tout, pourquoi est-ce qu'on ne l'utilise pas tout le temps ? Et bien tout simplement car la balise span ne déforme jamais la page, puisqu'elle s'applique essentiellement sur l'apparence du texte, et non sa place. Ainsi, vous pourrez mettre des balises span partout sans que ça n'influe sur la mise en page. La balise div, elle, entraîne
toujours un retour à la ligne à son ouverture, et un retour à la ligne à sa fermeture. Et ça peut être embêtant. Donc quand on voudra juste modifier la police, la taille des caractères, etc., on aura recours à span, plutôt qu'à div.
✩ on ouvre, et on ferme.
La première chose qu'il faut savoir, et qui s'applique à toutes les balises, aussi bien [] que <>, c'est qu'une balise, ça s'ouvre et ça se referme. On l'ouvre avec ses crochets normaux : <> et []. Et on la referme avec les mêmes crochets, en plaçant simplement un / juste après le crochet d'ouverture. Comme ceci :
(le bla est bien sûr à remplacer par le reste de la balise, qu'on va créer).
- Code:
-
<div> = balise d'ouverture
</div> = balise de fermeture
✩ et en ouvrant, on donne les informations.
La balise d'ouverture contient toujours toutes les informations nécessaires à votre code, alias tout ce que vous allez vouloir mettre comme propriétés à votre code. Par exemple, si vous désirez faire un cadre, vous allez pouvoir avoir envie de régler sa largeur, sa hauteur, le défilement, la couleur du texte, et la couleur du fond. Ces cinq propriétés seront contenues dans la balise d'ouverture. La balise de fermeture, elle, est sobre, et ne contient que le support de la balise d'ouverture. Par exemple, si on code avec des balises div, voilà ce que ça va vous donner :
(note : contenu correspond à ce que vous voulez modifier, mettre en page) - Code:
-
<div LESINFORMATIONSÀLASUITE>contenu</div>
✩ chapitre 2 : les informations.
✩ class ou style ?
Sans hésiter, pour ce tutoriel, style. Class sert à insérer un codage déjà prêt, et disponible dans une page CSS (par exemple, quand dans les signatures des membres je propose une balise div avec class="signa1titre", ça veut dire qu'au préalable, dans ce qu'on appelle le CSS du forum, il y a un code qui correspond à "signa1titre", et qui contient toutes les informations nécessaires à mettre en page votre titre ; la balise class l'applique. Je vous apprendrai à créer des codes CSS dans un autre tutoriel, mais plus tard. Pour le moment, éloignez class de votre esprit, et ne gardez que style. C'est ce qui va vous permettre de faire des
✩ la mise en page des informations.
Les informations s'insèrent donc dans la balise d'ouverture. C'est elles qui vont commander votre code. Elles sont introduites par « style= », et placées entre guillemets anglais "", comme ceci :
- Code:
-
<span style="INFORMATIONS">contenu</span> pour les balises span
OU
<div style="INFORMATIONS">contenu</div> pour les balises div
Les informations seront toutes introduites entre les guillemets anglais. Elles se présenteront ensuite sous la forme d'un élément, auquel sera associé une valeur. Par exemple, nous aurons l'élément largeur (width) auquel sera associé, donc, une valeur (comme 450px, pour une image de 450px de largeur). Les deux seront séparés par deux points, et la valeur sera suivie d'un point virgule, comme ceci :
- Code:
-
élément: valeur;
Pour la suite, vous ajoutez donc autant d'éléments que vous ne voulez réglez de paramètres. Ce qui, au final, nous donne un code semblable à cela :
(exemple pour une balise div, c'est la même chose avec une balise span) - Code:
-
<div style="élément1: valeur1; élément2: valeur2; élément3: valeur3;">contenu</div>
Voilà à quoi ressemblent les innombrables choses que vous voyez s'étaler sous vos yeux lorsque vous regardez des codes. Le tout, ensuite, c'est de comprendre les éléments, à quoi ils correspondent, et quelles sont les valeurs associées. Pour ça, suite dans le prochain post.
Accueil 
