Partie 1 - Etape 1 : Mise en forme d'éléments de message

Auteur : Sparrow-style

Les Langages (x)HTML et CSS

Qu'est-ce que c'est ? A quoi ça sert ? Et pourquoi commencer par les deux à la fois au lieu de les apprendre séparément ?
... C'est vrai quoi ? C'est pas déjà assez compliqué comme ça sans en plus tout apprendre en même temps ?

C'est vrai qu'en théorie, il serait idéal d'apprendre d'abord le html et après le CSS... Le problème, c'est que les séparer est impossible. Pour vous expliquer pourquoi, je vais vous définir ce que sont ces deux langages.
Le (x)HTML : On parle généralement de "html", sans préciser le "x" qu'il y a devant. "HTML" signifie "HyperText Markup Langage" et le "x" ou "(x)" placé devant signifie "eXtensible". Inutile de retenir tout cela, il suffit de savoir que le html permet d'afficher des éléments sur une page grâce à des balises.
Le CSS : "CSS" signifie "Cascade Style Sheet" ou en Français "Feuille de style en cascade". Retenez que le CSS c'est la mise en forme de vos éléments html : la couleur, les bordures, le "style", tout simplement.

Pour résumer, le html vous sert à placer un élément (paragraphe, titre, zone en bloc ou en ligne...) et le CSS vous sert à l'agrémenter, à y mettre de la couleur, mais aussi des marges, un alignement précis, etc...

Il est donc nécessaire d'apprendre à utiliser les deux à la fois sur votre forum, et en particulier dans la mise en forme des messages comme nous allons le voir, puisque du html sans css serait un texte simple, et du css sans html ne sert à rien puisque il n'y a rien à mettre en forme.

Activer l'HTML sur votre forum

Il est dans un premier temps important...que dis-je ? Vital ! d'activer sur votre forum la prise en compte de l'html, ou de vérifier qu'elle soit active. Pourquoi ? Tout simplement car si cette option n'est pas activée, c'est le code "pur" qui apparaitra dans le message et non la mise en forme que vous voulez.
Pour autoriser la mise en forme HTML sur votre forum, allez dans le Panneau d'administration, dans l'onglet "Général", partie "Messages & Email". Cliquez ensuite sur "Configuration". Une page s'ouvre avec les options que vous pouvez mettre. Au début (premier cadre) vous avez "Autoriser le HTML" : oui/non. Il faut bien évidemment cocher "oui" !
Par la suite, vous devez dans votre profil vous assurer que "Autoriser le HTML" est bien activé (dans la partie "Préférences").
Cela fonctionne comme les signatures sur le forum finalement, vous pouvez avoir autorisé les membres à porter une signature, si dans leur profil c'est désactivé ils n'en auront pas. La différence avec le HTML c'est que si l'administrateur autorise le HTML dans le Panneau d'administration pour les membres l'option dans le profil sera automatiquement sur "autoriser".

Une fois que vous vous êtes assuré que tout est actif sur votre forum vous êtes prêt à suivre la suite du cours.

Le Principe des balises et les erreurs à éviter

Lorsque vous rédigez un message sur un forum vous avez une mise en forme de base, même si vous n'en avez pas l'impression. Selon le choix de l'administrateur (votre choix si c'est votre forum) le texte est d'une couleur précise, d'une police définie, d'une taille définie... Il en va de même pour la couleur des liens par exemple. Pour changer cette mise en forme dans votre message, pour un titre précis et sans devoir modifier tout le reste de la mise en forme dans le Panneau d'administration, il va falloir agir dans le message en lui-même et imposer à chaque élément une mise en forme.

Le BBcode ? Vous allez me dire que dans les messages ForumActif il y a déjà la possibilité de faire des mises en forme avec ce que FA appelle "le BBcode". Il s'agit des codes entre crochets que vous avez déjà pu voir, par exemple : Evidemment, vous pouvez vous contenter du BBcode, il permet de faire des mises en forme standard de message, agrandir les polices, changer la police et la couleur du texte, changer les alignements de texte, etc... Mais il a ses limites, et vous voulez très probablement faire plus que ce que le BBcode vous propose, sinon vous ne seriez pas en train de lire ce cours ! x)

Comment faire une mise en forme sans BBcode, avec du CSS ?

Pour faire cela, la première chose à faire est de définir ces éléments, et pour cela il faut y mettre des "balises".
Qu'est-ce qu'une balise ?
Les balises sont en quelque sorte des "marqueurs" qui vont délimiter vos éléments. Vous les avez forcément déjà vue, en voici quelques exemples : Ceci permet d'afficher une image (avec l'adresse d'une image à la place de "url.jpg").
Ceci permet de faire en sorte que le texte "Ceci est un lien" soit un lien menant vers le lien mis à la place de "url".
Celles-ci enfin (dont la première vous rappellera le premier BBcode que j'ai montré dans l'exemple plus haut) permet de simplement mettre un texte en gras.

Jusque là, pas grandes différences avec le BBcode niveau possibilités, mais vous allez voir que cela permet nettement plus de choses.

Comme pour le BBcode ou comme dans tout langage, il y a des règles à respecter pour utiliser les balises ! Il y'en a peu, et il faut absolument les avoir en tête et les suivre à la lettre.

Règle numéro 1 : Toute balise ouverte doit être ensuite refermée
Vous pouvez le voir dans mes exemples, il ne suffit pas d'ouvrir une balise pour y mettre un élément, il faut que l'élément soit enfermé dans la balise. C'est le "slash" ("/") placé dans la balise de fin qui permet de refermer la dite balise. Mais alors vous me direz que dans mon exemple avec l'affichage d'une image, la balise n'est pas refermée... Regardez : En réalité si, la balise est bien refermée, seulement celle-ci se referme avec un simple "/>". C'est une exception (il en faut bien ! Ce serait trop simple sinon^^) et c'est la seule, avec le marqueur de retour à la ligne dont nous parlerons plus loin.

Règle numéro 2 : Prenez l'habitude de tout écrire en minuscule dans vos codages, et sans caractères spéciaux
N'utilisez pas d'accents, pas de symboles, sauf le trait bas "_" (touche 8). Les chiffres sont autorisés sans problème.

Règle numéro 3 : Les valeurs doivent être entre guillemets ou apostrophes
Prenez par exemple le code pour afficher une image ou une adresse, l'adresse se trouve entre guillemets. J'utilise les guillemets uniquement, donc je vous apprends de cette façon là aussi, sachez juste qu'il est possible d'utiliser l'apostrophe.

Règle numéro 4 : Les attributs doivent avoir une valeur
Un exemple tout bête : dans le cas présent vous ne pouvez afficher l'adresse avec simplement le "href" sans sa valeur. Le code serait incorrect. Par conséquent, chaque fois que vous voulez préciser quelque chose dans le code avec ce qu'on appelle un attribut, vous devez lui mettre une valeur entre guillemets. Ne vous inquiétez pas, il est normal que cette règle soit peu claire encore, vous verrez qu'elle deviendra tout à fait logique avec la pratique au point que vous vous demanderez comment il est possible d'oublier la valeur de votre attribut !

Règle numéro 5 : Les codes doivent s'imbriquer correctement
En clair : apprenez à jouer aux poupées russes ! Et ce n'est pas une blague... x). La très grande majorité des balises vont pas deux, l'un ouvrant, l'autre fermant. Imaginez que ces deux parties sont les deux moitiés d'une poupée russe. Maintenant regardez ce code : Ma première balise est ouverte, puis ma deuxième... mais j'ai refermé la première avant la deuxième balise. Ce code est FAUX. Il est incorrect et aboutira à des erreurs d'affichage si vous prenez de mauvaises habitude. Pensez toujours à refermer les balises dans l'ordre, imaginez vos poupées russes : le "span" est la grosse poupée, le "strong" est la petite : si vous refermez la grande poupée avec seulement la moitié de la petite à l'intérieur...et bien vous ne pourrez plus refermer la petite x).
Voici comment présenter le code :

Mettre en forme un titre de message

Passons à du plus concret avec la mise en forme de votre titre de message pour commencer. Afin d'isoler le titre et n'imposer la mise en forme qu'à lui, nous allons l'entourer d'une balise, comme ceci :
Le résultat ? Bien vu ! Il n'y a rien du tout ! ^^ La balise n'apparait évidemment pas, mais rien n'a changé, avec ou sans balise tout est identique, votre texte n'a que la mise en forme de base. Pour quelle raison ? Et bien tout simplement car il va maintenant falloir intégrer quelque chose d'essentiel dans notre balise : du CSS !.

Hop hop ! Minute, minute... Cette balise, là, ce "span", qu'est-ce que c'est ?

C'est une balise que l'on appelle "générique", qui peut s'appliquer dans beaucoup de cas, et qui délimite un contenu en ligne, autrement appelé en terme Anglais "inline". Son opposé (ou complémentaire, plutôt) est la balise "div", qui elle est aussi générique mais ne délimite non pas une ligne mais un bloc (ensemble de lignes, zone large) et qui a donc la propriété "block" au lieu du "inline" du span, tout cela semble logique.

Nous allons donc intégrer sur CSS à notre titre, et donc dans notre "span"
Pour cela, nous allons directement noter le CSS à l'intérieur de la balise, comme ceci : Inutile d'essayer ce code, il vous indique simplement comment procéder. Vous voyez désormais votre attribut : "style=" et votre valeur : ici simplement indiquée par le mot "valeur" qui devra être remplacé par le CSS que vous souhaitez imposer.

Comment afficher du CSS ? Là aussi il y a des normes, et ce pour que le navigateur puisse lire et surtout comprendre le code que vous lui demander de transcrire. Voici comment s'écrit un code :

Décomposons le code :
- span => votre balise, ici de type "inline" (= en ligne), sans css elle ne changera rien au texte.
- style => ici l'attribut indique qu'un style va être appliqué à ce qui se trouve dans la balise. Du coup, tout ce qui est indiqué entre guillemets (donc la "valeur" de cet attribut) va être imposé au texte "Votre titre".
- background-color => indique sur quoi porte la mise en forme, cette indication doit obligatoirement être suivie de deux points ":", peu importe les espaces par contre, j'ai pour habitude d'en mettre un après les deux points et pas avant, mais il peut ne pas y'en avoir du tout.
- #ffffff => il s'agit du code couleur qui correspond au blanc. Il vous faudra utiliser soit ces codes-là, soit les noms officiels des couleurs. L'un et l'autre vous pouvez les trouver sur le net : Codes couleurs et Nom de la couleur, mais aussi sur votre logiciel en ce qui concerne les codes couleurs.
- ; => attention ! Ce point virgule ne parait pas très important, il est en fait capital ! C'est en effet avec lui que vous séparez deux données de css, donc deux valeurs. Oubliez-le et votre css précédent et/ou suivant ne sera plus pris en compte !

Voici ce que donne ce code tout simple :
Votre titre
C'est simple, cela parait peu, mais une fois ce système compris vous pouvez faire plein de choses !

Voici une petite liste de ce que vous pouvez employer pour commencer avec cette simple balise :

ELEMENT MODIFIE	NOM DE LA PROPRIETE	VALEURS POSSIBLES	EXEMPLES
Police de texte	font-family	arial; - time new roman; - georgia; - trebuchet; etc... (attention, n'utilisez que des polices de base, c'est préférable)	Arial - Arial black - Impact - Time new roman - Georgia...
Taille du texte	font-size	12px; - 24px; ... tout chiffre en px (pixel) mais aussi small; - x-small; - large; (il existe d'autres mesures plus complexes dont vous n'aurez pas l'utilité dans l'immédiat, ni peut-être jamais d'ailleurs)	10 px - 14 px - large - x-large...
Couleur du texte	color	#ffffff; (blanc), #000000; (noir) - ou tout autre code couleur possible, les noms des couleurs fonctionnent aussi, reportez vous aux liens mis plus haut pour le background.	#000000 - #ff6c00 - Blue - Darkred...
Espacement des lettres	letter-spacing	un chiffre en pixel, attention de ne pas trop élargir non plus. Conseillé : entre 1 et 4 pixels.	Espace - Encore plus d'espace - Quatre pixels d'espace - Et ça marche en négatif aussi !
Espacement des mots	word-spacing	valeur en pixel, attention à la lisibilité !	Entre deux mots 5 pixels - Entre deux mots 10 pixels
Epaisseur du texte	font-weight	lighter; normal; bold; bolder; (certains n'ont pas d'effet avec certaines polices)	Lighter - Normal - Bold - Bolder
Transformation du texte	text-transform	uppercase (tout en majuscule), capitalize (première lettre en majuscule), lowercase (tout en minuscule)	uppercase - Lowercase - capitalize
Variantes de texte	font-variant	normal ou small-caps (tout en majuscule mais petite majuscules)	Small Caps
Décoration de texte	text-decoration	overline (souligné dessus), line-through (barré), underline (souligné dessous), blink (clignotant : déconseillé)	Overline - Line through - Underline - Blink
Couleur de fond	background-color	code couleur ou nom de couleur comme expliqué pour la couleur de texte	#FFFFFF - Yellow - #b5b5b5

Vous pouvez bien évidemment coupler autant de propriétés que vous voulez, faites seulement attention : votre texte doit être lisible, c'est quand même le but premier. Avant qu'il soit agréable à l'oeil c'est son sens que votre joueur/membre/lecteur recherche !

Quelques exemples ?
Votre titre

Votre titre

Votre titre

De nombreuses combinaisons sont possibles, et elles seront encore plus nombreuses à la fin de la partie suivante...

Les Bordures

Elles sont un outil très intéressant à utiliser et elles le sont beaucoup généralement. Regardez simplement sur ce site et observez les bordures utilisées. Chaque cadre texte en possède. Les titres peuvent également entre entourés avec cela de diverses façons.

Voilà quelques exemples de bordure qui vous permettra d'en voir de nombreuses possibilités d'utilisation :

PROPRIETE	VALEUR	RESULTAT
border	1px solid #000000	Bordure simple
border	1px dotted blue	Bordure points
border	1px dashed green	Bordure tirets
border	4px double brown	Bordure double
border	2px inset grey	Bordure effet creusé
border	2px outset purple	Bordure effet bombé
border	4px groove red	Bordure en relief
border	4px ridge darkred	Bordure en relief

La taille des bordures peu être changée et à peu près toutes les combinaisons peuvent être faites. Cependant, les effets creusés ou en relief ne se voient pas sur des traits de 1px, il faut un minimum de largeur de trait pour que l'effet se voit.
Attention également car les bordures en relief sont "lourdes" d'aspect, ça plombe un peu votre esthétique globale, je vous conseille donc de les utiliser modérément.

Il est possible de faire d'autres variantes en ne mettant qu'un bord sur les quatre, par exemple... Voici quelques possibilités :

PROPRIETE	VALEUR	RESULTAT
border-bottom	3px solid #77563d	Bordure "soulignement" épaisse
border-bottom	2px dotted #1b95c8	Bordure "soulignement" points
border-top border-bottom (deux différents)	1px dashed #ff7e00	Double bordure pointillés
border-left	5px solid #70389b	Bordure gauche épaisse

Vous pouvez ainsi dériver à l'infini ! N'oubliez simplement pas que pour n'afficher que deux bordures différentes au lieu de toutes ou une seule vous devez recommencer votre morceau de CSS, même su la bordure est identique ! Voici ci-dessous le code servant à afficher l'exemple numéro 3 dans le tableau (double bordure pointillés), vous devriez comprendre plus facilement...

Pas besoin d'ordre, dès lors que les deux "border" sont présents.

Un petit exemple en ajoutant une bordure à l'un des résultats précédents : Votre titre

C'est mieux non ? Vous pouvez ainsi vous amuser avec les bordures selon les cas, à mettre une bordure complète ou qu'un morceau... A votre convenance !
Cependant, il reste un problème : ne trouvez-vous pas que la bordure est parfois trop collée au texte ? Si ? Alors il faut y remédier ! Ne pensez jamais que quelque chose est impossible en codage... Il faut toujours tout tenter car l'on se rend compte qu'on peut tout trouver.

Pour passer de ceci : Bordure "soulignement" épaisse à cela Bordure "soulignement" épaisse il y a une solution toute simple : ajouter une marge intérieure à votre CSS !
Pour cela, rien de bien complexe, il vous suffit d'ajouter à votre css la propriété suivante : Ce qui nous fait aller de ceci : Bordure "soulignement" épaisse

...à cela : Bordure "soulignement" épaisse

La propriété "padding" impose une marge intérieure et elle fonctionne comme la propriété "border", c'est à dire que vous pouvez choisir d'imposer une marge que sur l'un des quatre côtés par exemple, ou bien seulement en haut et en bas, etc... Pour cela affichez, comme pour la bordure, l'endroit où vous voulez la marge :
padding-top = marge intérieur en haut
padding-bottom = marge intérieure en base
padding-left = marge intérieure à gauche
padding-right = marge intérieure à droite

Mises en forme de liens ou d'image

Pour imposer le même genre de mise en forme à des liens ou des images, nous allons procéder à peu près de la même façon, à l'exception cependant que nous n'allons pas mettre une balise supplémentaire autour de notre lien ou de notre image, puisque eux-même en sont déjà. Nous allons simplement les écrire avec du html, et non avec du BBcode ! Je rappelle l'écriture d'un lien et d'une image : Puisqu'il s'agit de balises, il est tout à fait possible d'insérer à l'intérieur les mêmes données CSS que dans notre "span" un peu plus haut ! Il suffit donc d'ajouter "style=" et le tour est joué ! Voici ce que cela peut donner, en guise d'exemple : Texte/Lien vers Never-Utopia

Un simple essai avec l'un des avatars que je porte ^^

Le "src" fait appel à l'adresse de l'image que vous avez hébergée. Le "alt" pour ceux qui s'interrogeraient est pour "alternatif", il s'agit d'un texte que vous pouvez mettre entre les guillemets et qui s'affichera si l'image ne peut pas s'afficher (si son lien est mort, par exemple). Cela peut vous paraitre peu utile, mais si vous souhaitez être aux normes il faut le mettre, quitte à ce qu'il soit vide. Il est cependant préférable qu'il ne le soit pas pour un souci d'accessibilité. En effet, pour certaines personnes (mal voyants par exemple) équipées d'un navigateur particulier, ce "alt" et les mots qu'il contient sont leur seuls moyens de savoir à quoi se rapporte l'image, s'il s'agit d'une bannière, d'un lien vers quelque chose de précis, etc...

Remarque : il est possible d'insérer le "style="...."" soit avant ou après l'adresse du lien ou de l'image, comme dans les deux exemples, mais il ne faut pas "couper" les valeurs, ce qui est entre guillemets doit forcément se suivre sans être coupé par autre chose.

Il est possible que sur certains forum la mise en forme d'une image de cette façon-là ne fonctionne pas. Dans ce cas il y a d'autres solutions que vous verrez dans les étapes suivantes.

Autres balises utiles

Pour votre début de mise en forme, vous pourrez également vous servir de la balise suivante : Première remarque : dans la mise en forme des messages ForumActif, un retour à la ligne en appuyant sur la touche "entrée" de votre clavier produit effectivement un retour à la ligne, si vous codiez une page stricte (vierge, codée d'un bout à l'autre, type page de site web par exemple) ça ne serait pas le cas et vous seriez contraints d'utiliser la balise :
...pour faire votre retour à la ligne.
Seconde remarque : Même s'il faut éviter de trop mélanger le BBcode et le codage en html/css comme on vient de le voir, il est possible de combiner légèrement les deux. Par exemple, une fois votre lien mis en forme, vous pouvez l'aligner à droite en utilisant le BBcode ForumActif avec la mise en forme normale située en haut de votre cadre de saisie de texte.

Résumons :
• Il vous est possible d'utiliser une mise en forme en html/css si vous vous assurez que cette option est active sur votre forum.
• Le html sert à placer des éléments, le css sert à leur imposer un aspect esthétique, les deux s'utilisent forcément ensemble.
• Il y a des règles strictes pour utiliser les balises, mais elles sont peu nombreuses et finalement évidentes, soyez cependant minutieux lorsque vous écrivez vos codes.
• De nombreuses données css peuvent être incluses dans une balise grâce à l'attribut "style".
• il est possible d'inclure l'attribut "style" également dans les balises d'image et de lien

Etape suivante

Accueil du site | Forum | Signaler | Contribution | ForumActif