Voici quelques points à retenir absolument quand on fait ou bidouille du html :

- Le HTML fonctionne avec ce qu’on appelle des balises, comme par ex : <div> ou <table>
- Le HTML parle anglais
- Si j’ouvre une balise, il faut ABSOLUMENT la refermer : <div> est une balise ouverte </div> est une balise fermée.
- Donc le HTML se présent ainsi : <nom de la balise> ce qui va être « touché » par la balise </nom de la balise>

Note : dans les messages habituels d’un forum, lorsque vous écrivez un texte puis vous souhaiter le mettre en gras vous sélectionnez le texte puis cliquez sur le bouton « G ». Apparaissent alors des balises entre crochet : ce ne SONT PAS des balises HTML mais BBC. ATTENTION lorsque vous faites du HTML à ne PAS y inclure de balise BBC !! sinon le PC saura rien calculé et vous vous retrouver avec des trucs qui ne marchent pas/bizarres.
Le BBC lui parle aussi bien français qu’anglais. Les balises BBC se ferment de la même manière que les balises HTML : on utilise le /

Exemple de truc à ne pas faire :
<text> Je suis en train de manger </text>
Si je veux mettre en gras (blod en anglais) je ne FAIS PAS :
<text> [bold]Je suis en train de manger [/bold] </text>

Note 2 : lorsqu’on fait du code et qu’on veut écrire un commentaire, pour s’organiser et d’expliquer de quoi on parle, on procède ainsi :
/* ce qui suit est la manière de régler un dilemme */
(perso j’écris aussi en majuscule pour bien les voir au milieu des lignes de code)

Ecrire ainsi au milieu d'une ligne de code = l'ordinateur ne prend pas en compte l'info :

La balise de fermeture :

Code:

 <span style="font-size: 18px; font-family: monotype corsiva; color: #A6A6A6;">
La balise de fermeture : </span>

La balise de fermeture :

Code:

<span style="font-size: 18px; /*font-family: monotype corsiva*/; color: #A6A6A6;">
La balise de fermeture : </span>

N'HESITEZ PAS A POSER VOS QUESTIONS !



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.

FAIRE UN TABLEAU
NOTE pour les codes couleurs : #000000 = noir ; #FFFFFF = blanc

Pourquoi faire des tableaux ? => pour l’instant c’est la seule manière que j’ai trouvée pour présenter un texte face à un autre de cette manière :

Orange Orange

Sans avoir à faire des milliards d’espaces.
ATTENTION !!! pour les tableaux il faut être RIGOUREUSEMENT METHODIQUE : une balise mal fermée ou oubliée et c’est la mort assurée (déjà que là, je ne suis pas encore convaincue tout à fait de ma méthode).
ATTENTION !!! pas plus d'un tableau par page !!!! ATTENTION il n'aime pas NON plus qu'il y ait deux tableaux dans un post !
ATTENTION !!! toujours mettre quelque chose AVANT et APRES (même une seule lettre) sinon il comprend que le tableau est en quelque sorte un nouveau message !!! et cela fait changer les tailles des pages !

Je n’ai pas encore tout à fait pigé comment ça marché, mais voilà l’essentiel :

Pour faire un tableau il faut
- définir le tableau <table = « col=x »> /* tableau à x colonnes
- définir une ligne <tr>
- définir une case <td>
- mettre le contenu de la case
- fermer la case </td>
- définir x-1 autres cases : <td> contenu de la case</td> <td> contenu de la case</td> <td> contenu de la case</td> ….
- fermer la ligne </tr>
- fermer le tableau </table>
Il est possible de créer autant de ligne qu’on veut, mais on ne peut pas créer plus de cases que le nombre de colonnes définies au début.

Les caractéristiques de la balise d’ouverture d’un tableau :
col=x /* nombre de colonnes
border=x /*taille de la bordure en pixels.
cellpadding=x /* espacement entre bordure et texte.
cellspacing=x /* Espacement entre les cellules.
A vous de tester pour voir ce que tout ça donne.
border-color = #FFFFFF ne permet pas de changer la couleur à la bordure

Pour les fiches personnages j’avais besoin de deux tableaux : un pour « identité » (image/texte) et un pour « caractéristiques » (texte/texte). Comme je l’ai répété partout, il ne faut pas mettre plusieurs tableaux par page. J’ai donc dû faire un seul tableau pour identité et caractéristiques en même temps.
Problème : « caractéristiques » est un titre, je devais donc faire :
Une ligne à deux cases (texte/image)
Une ligne à une case (titre)
Une ligne à deux cases (texte/texte)

Pour cela :
<td = « colspan=x »> /* x cellules à fusionner horizontalement
(à employer avec prudence : je n’ai pas réussi à garder « caractéristiques » centré, il doit y avoir des détails à régler sur la taille de la cellule)

Autres trucs à mettre éventuellement dans les balises <td> :
backgroundcolor=#couleur /*couleur d'arrière-plan de la cellule.
align=center left right /*le texte compris dans les cellules est centré, aligné à gauche, aligné à droite.

http://www.codeshttp.com/baliseh.htm

y'a pas mal d'exemple de base existentes sur ce site mais à utiliser avec prudence;

animation (attention aux yeux !)

texte