N'HESITEZ PAS A POSER VOS QUESTIONS !
Les balises pour mettre en page un texte : alignement, taille, police etc….
Les exemples sont là :
https://univion.forumactif.org/t31-test-des-codes-html-laboratoire-d-ixo#103 premier message
La balise d’ouverture :
<span style="font-size: 18px; font-family: monotype corsiva; color: #A6A6A6;">
La balise de fermeture : </span>
Dans la balise on définit de quoi on parle “span style” signifie le style du texte
Font-size : la taille du texte
Font-family la police d’écriture ATTENTION à choisir des polices « types » (les polices par défaut de word)
Color : le code indique la couleur (ici un bleu turquoise). Pour changer la couleur :
- vous pouvez mettre un code au pif, mélangeant des lettres et des chiffres, du moment qu’il y a six caractères, pour changer la couleur… au pif
- sinon, dans le panneau d’admin du forum, nous avons des palettes avec tous les codes couleurs => demandez nous la couleur que vous souhaitez et on vous donnera le code couleur
Dans la balise ci-dessus on définit le texte puis on met un signe = pour signifier que va expliquer ses caractéristiques. Les guillemets " sont INDISPENSABLES au début et à la fin de la liste des caractéristiques. Ils disent à l’ordinateur que l’on parle de caractéristiques et pas de carottes. Chaque caractéristique doit être séparée par un ; de la suivante.
La liste de caractéristiques peut être longue comme le bras. Au dessus nous avons vu la taille, la police et la couleur, voici d’autres qui peuvent être utiles :
font-weight: bold; /* mettre en gras le texte
font-style: italic /* mettre en italique
text-align : center /* centrer le texte
right /* à droite
left /* à gauche
letter-spacing: 2px; /* déterminer l’espace entre les lettres
(se complètera au fur et à mesure)
Pour mettre un texte en italique uniquement :
<cite> texte </cite>
Pour faire les titres comme sur les fiches personnages :
/* Exemple A*/
<span style="display: block; text-align: center; font-size: 32px; font-family: monotype corsiva; letter-spacing: 2px; font-style: italic; color: #39948C; text-shadow: 0px 3px 3px; text-shadow-color : #1B4541;">Caractéristiques…</span>
display : block /* permet (à verifier) de faire l’ombre ensuite
text-shadow: 0px 2px 3px; /* faire une ombre au texte, la premier valeur (ici 0px) correspond au décalage de l’ombre en X, la deuxième (2px) le décalage de l’ombre en Y et la troisième son épaisseur il me semble. Le mieux est que vous changiez vous-même les valeurs pour voir ce que ça donne.
text-shadow-color : #1B4541; /* détermine la couleur de l’ombre du texte
ATTENTION ça va vous embrouiller :
Un truc drôle (me demandez pas l’explication) :
Logiquement, dans la ligne de code pour « caractéristique » la logique voudrait que j’écrive ceci (entre /**/ ce que j’ai modifié par rapport à dessus).
/* Exemple B*/
<span style="display: block; text-align: center; font-size: 32px; font-family: monotype corsiva; letter-spacing: 2px; font-style: italic; /*font-*/color: #39948C; text-shadow: 0px 3px 3px; text-shadow-color : #1B4541;">Caractéristiques…</span>
En effet ci-dessus j’ai dit qu’il fallait toujours font-(détail) pour déterminer les caractéristiques du texte. Donc j’aurais dû mettre font-color et pas juste color comme c’est écrit au dessus.
Et bien figurez-vous que color tout seul ici fonction, et que font-color ne donne pas la même couleur que color seul…
Après réflexion, je trouvais aussi illogique de mettre des font-(détail) et des text-(détails) dans la même balise. Du coup j’ai essayé de « text » partout :
/* Exemple C*/
<span style="display: block; text-align: center; font-size: 32px; text-family: monotype corsiva; letter-spacing: 2px; text-style: italic; /*font-*/color: #39948C; text-shadow: 0px 3px 3px; text-shadow-color : #1B4541;">Caractéristiques…</span>
On voit que le résultat n’est vraiment pas le même !
Alors avec des « font » partout
/* Exemple D*/
<span style="display: block; font-align: center; font-size: 32px; font-family: monotype corsiva; letter-spacing: 2px; font-style: italic; /*font-*/color: #39948C; font-shadow: 0px 3px 3px; font-shadow-color : #1B4541;">Caractéristiques…</span>
=> On remarque que font-shadow ne fonctionne pas.