Rappel du premier message :

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

Les Langages (x)HTML et CSS

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.

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 :

Code:

[b]Texte affiche en gras[/b]
[url=adresse.html]Lien texte[/url]

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)



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 :

Code:

<img src="url.jpg" />

Ceci permet d'afficher une image (avec l'adresse d'une image à la place de "url.jpg").

Code:

<a href="url">Ceci est un lien</a>

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".

Code:

<b>Texte en gras</b>
ou
<strong>Texte en gras</strong>

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.



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.

Code:

<span>Je viens d'ouvrir une balise de ligne... Et je la referme maintenant avec ceci : </span>

Mais alors vous me direz que dans mon exemple avec l'affichage d'une image, la balise n'est pas refermée... Regardez :

Code:

<img src="adresse img" />

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 . 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 :

Code:

<span>Je commence mon texte et je mets <strong>quelques mots en gras.</span></strong>

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 :

Code:

<span>Je commence mon texte et je mets <strong>quelques mots en gras.</strong></span>

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 :

Code:

<span>Votre titre</span>

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 !.



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 :

Code:

<span style="valeur">Votre titre</span>

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 :

Code:

<span style="background-color: #ffffff;">Votre titre</span>

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

Quelques exemples ?

Code:

<span style="font-family: arial black; font-size: 24px; letter-spacing: 2px; text-decoration: overline underline; color: #3c3131;">Votre titre</span>

Votre titre

Code:

<span style="font-family: arial black; font-size: 24px; letter-spacing: 2px; text-decoration: overline underline; color: #3c3131;">Votre titre</span>

Votre titre

Code:

<span style="font-family: impact; font-size: 34px; letter-spacing: 1px; color: #1a56d0;">Votre titre</span>

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

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

Code:

<span style="border-bottom: 1px dashed #ff7e00; border-top: 1px dashed #ff7e00;">Double bordure pointillés</span>

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 :

Code:

<span style="font-family: impact; font-size: 34px; letter-spacing: 5px; color: #1a56d0; text-transform: uppercase; border-top: 3px dotted #232087; border-bottom: 3px dotted #232087;">Votre titre</span>

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 :

Code:

padding: 4px;

Ce qui nous fait aller de ceci :

Code:

<span style="border-bottom: 3px solid #77563d;">Bordure "soulignement" épaisse</span>

Bordure "soulignement" épaisse

...à cela :

Code:

<span style="border-bottom: 3px solid #77563d; padding: 4px;">Bordure "soulignement" épaisse</span>

Bordure "soulignement" épaisse

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 :

Code:

<a href="http://www.never-utopia.com">Texte/Lien vers Never-Utopia</a>
<img src="adresse_image.jpg" />

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 :

Code:

<a style="color: red; font-family: arial black; font-size: 16px; border-bottom: 2px dotted blue;" href="http://www.never-utopia.com">Texte/Lien vers Never-Utopia</a>

Texte/Lien vers Never-Utopia

Code:

<img src="http://img11.hostingpics.net/pics/338564Yuni010.jpg" alt="" style="border: 4px solid #000000;" />

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

Autres balises utiles

Pour votre début de mise en forme, vous pourrez également vous servir de la balise suivante :

Code:

<center>Votre texte</center> => centre le texte

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 :

Code:

<br />

...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.



Etape suivante

Merci beaucoup pour cette étape ^^ j'ai réaliser ceci avec tes conseil ^^

Titre

Super !

Pour éviter que le trait ne soit collé au texte tu peux ajouter dans ton span un "padding-left: 10/20px". Après tout n'est que question de goût et de préférences évidemment^^

Merci pour ce tuto ! Je commence à mieux comprendre mes codes de fiche rp maintenant c:

Excellent tutoriel, simple et clair !! Comme beaucoup l'ont dit précédemment ce retour aux bases est très instructif alors merci !!

Merci pour votre générosité et cette partie 1-1 !

Merci encore pour ce tutoriel vraiment très instructif et très bien expliqué. Je vais m'entraîner un peu et passer avec plaisir à la deuxième partie. ^^

Bonsoir !

Han, je ne pensais pas qu'en fait c'était aussi "simple" ! Ou bien est-ce bien expliqué ? Huhu.

Bref, merci beaucoup pour ce tutoriel de qualité. ~

excellent tuto, merci <3

par contre maintenant il faudrait que j'arrive à me rappeler de tout ça ><

Merci pour ce tuto vraiment génial !

Code:

<span style="background-color: #FF0000; font-family: georgia; color: #FFFFFF; font-size: 24px">Merci pour ce tuto vraiment génial !</span>

Merci pour ce tutoriel très bien expliqué, tout parait plus simple maintenant :).

Merci beaucoup pour ce petit tutoriel sur les bases !
Je pense avoir compris beaucoup, et on testera ça par la suite ! Merci beaucoup !

Bonjour !

Merci beaucoup pour ce tuto qui est vraiment super clair, moi qui cherche depuis plusieurs jours à apprendre le codage sans succès, voilà ce que j'ai pu faire entre celui-ci et le TP suivant :

     
Voici ma première en-tête !
Et un petit sous-titre.

Code:

<center><img src="http://i35.servimg.com/u/f35/11/61/67/72/test_g10.jpg" />      <img src="http://i35.servimg.com/u/f35/11/61/67/72/test_b10.jpg" /></center>
<span style = "font-family: impact ; font-size: 40px ; text-shadow: 1px 1px 1px #333333 ; color: #500A14 ; display: block ; text-align: center ; border-bottom: 4px double #AF2850 ; border-top: 4px double #AF2850 ; width: 40% ; margin-right: auto ; margin-left: auto ; font-variant: small-caps ; padding-top: 10px ; padding-bottom: 20px ; margin-top: -32px"><span style = "font-family: vivaldi ; color: #AF2850 ; text-shadow: 2px 2px 2px #333333">V</span>oici ma première en-tête !</span>
<span style = "font-family: impact ; font-size: 10px ; display: block ; text-align : center ; color: #333333 ; margin-top: -20px">Et un petit sous-titre.</span>

Par contre, maintenant, j'ai quelques petites questions, puisque j'ai tenté dans ma réalisation et qui m'a semblé impossible, mais sait-on jamais :

Est-il possible, dans une bordure, d'utiliser deux valeurs différentes ?
Je m'explique. Dans cette en-tête, j'ai fait une bordure (en haut et en bas) double. Mais j'aurais bien voulu tenter d'en faire une double ET en pointillé, j'ai essayé de mettre les deux mais bien sur cela n'a rien donné. De même pour l'espacement entre la bordure double, peut-on les séparer davantage ?

Seconde question :
Ici, encore, la bordure passe derrière l'image alors que le texte passe devant. Y a-t-il possibilité de changer ça, aussi ?

Si les réponses à mes questions sont dans les cours suivant, je m'excuse tout de suite ... Peut-être trop curieuse, trop envie de tout savoir maintenant ? :p

En tout cas, encore une fois merci à vous !

(En ce qui concerne les images, j'ai juste utilisé les personnalités avatars sur le forum où je fais du RPG.)


Marjoly.


PS : Une autre question qui vient de me sauter aux yeux puisque je n'arrive à rien faire. Lorsque ma signature est la dernière ligne du message, elle est coupé en bas lors de l'envoi (la prévisualisation, dans mon cas). Ainsi, j'ai essayé de faire un "margin-bottom: auto" puis un "margin-bottom: 20px" en agrandissant peu à peu les valeurs mais rien n'a changé. Comment faire dans ce cas ?

Merci beaucoup pour ce tuto très bien expliqué, je vais pouvoir commencer à bosser le codage *^*

Merci pour ce super tuto !

Une première étape claire et concise !

Merci beaucoup pour tout ce travail !

Je vais aller me perdre dans la suite

Merci beaucoup pour ce tutoriel très bien fait!
Mais j'ai des questions ( désolé pour toute ces questions je débute en codage) :
Comment est ce que vous faite vos titre avec le rectangle gris autour?
Est-ce qu'on peut utiliser un autre langage (exemple: Python)?
Sur quoi allez-vous pour écrire les codes?
Et comment faite-vous pour les "code: sélectionner"?

Merci pour ce tuto ! Je les fais tous un par un pour me remettre les bases en tête

Je crois que je vais me faire un carnet avec les principaux codes à retenir pour ne pas avoir à chercher à chaque fois !

Bonjour, j'ai fait un petit teste en faisant plein de petite modification sur mon "titre" mais je n'obtiens pas tout à fait ce que j'aurai voulu...

Titre bleu souligné

Pourquoi ma bordure en bas n’apparaît pas ici par exemple ?

Code:

<span style="font-family: trebuchet ; color: #1454D5; font-size: 20px; border-bottom: 3px solid #061176;"><center> Titre bleu souligné </center></span>

AAAAH j'ai trouvé en fait !
C'est mon code pour center qui est mal placé. Je pensais que le "span" était l’information première et non le "center"

Code:

<center><span style="font-family: trebuchet ; color: #1454D5; font-size: 20px; border-bottom: 7px solid #061176;"> Tests codage</span></center>

Titre bleu souligné