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

(je ne sais pas si on est autorisé à poster à la suite...)
Merci beaucoup pour ce petit tuto, il est vraiment détaillé et très bien expliqué !

J'ai une petite question, (je débute en codage du coup je suis vraiment nulle désolée x___x ) ; je n'ai pas bien compris la partie sur les balises.
Il en existe plein de différentes mais toutes ont bien un usage spécifique.
Mais quelle serait la balise la plus générale, celle qui englobe le codage intégral ? uniquement :

Code:

<span></span>

?

Et du coup, est-ce qu'on doit mettre nos autre balises à l’intérieur de celle ci ?
Comme :

Code:

<span><span style ="(codage)">texte</span style><img src="adresse img" /></span>

Je sais pas si j'ai été très claire, désolée ^^'
Et ma question est peut-être stupide D:
Merci quand même (:

Hey =) désolée de répondre si tard U_U *pastaper*

Non, non ^^ c'est pas stupide du tout comme question =)
Je me permets de te répondre (j'avais pas vu ta question ^^' et je crois que le cap'taine non plus xD) Et pour ce qui est de poster à la suite, j'en sais rien, mais ça doit pas poser de problème, si? xD autant avoir les questions & les réponses au même endroit ^^

En fait, t'as plusieurs types de balises, et une balise span peut tout à fait contenir d'autres balises à l'intérieur du genre....

Je mets deux balises en cascade!

Code:

<center><span style="font-weight: bold; color: blue; ">Je mets<span style="color=red"> deux balises en cascade!</span></span></center>

Et tu vois, comme le style est en cascade, les propriétés de la première balise qui ne sont pas contrée par celles de la deuxième balise (la couleur de la première balise est contrée par la deuxième balise, mais l'épaisseur des lettres le "font-weight" lui ne l'est pas) s'appliquent aux deux.

En terme de balise "générale" en fait il y en a deux.

le "span" qui traite les informations en ligne et le "div" qui traite les infos en bloc. Exemple...

voici un span avec un "color" white et un "background-color" black



Comme tu le vois, le span se cantonne à son contenu, donc on peut en mettre plusieurs à la suite, regarde:

one! two! three!

Alors que les div traitent les informations en bloc, donc le div, par défaut se poursuivra jusqu'aux limites de ce qui le contient (ici la zone de texte du forum)



et pour répondre à toutes tes questions sur les "div" l'étape suivante du cursus et ta meilleure amie. Et si tu veux voir des usages du span, n'hésite pas à z'yeuter du côté du TP

Et désolée du double post (je peux pas éditer ici TT-TT) Je tenais juste à signaler qu'il y a une petite erreur dans ton codage, le "style" ne se met que sur la première balise ^^

Code:

<span style="codage"></span>

et pas

Code:

<span style="codage"></span style>

En fait le "style" est une caractéristique de ta balise, donc c'est inutile de la répéter lors de la fermeture ^^ l'ordi comprend les codages de façon linéaire.

//petit moment "Jaja se prend pour un ordi" //

exemple, je suis un ordinateur, et je lis....

< tiens, une balise s'ouvre span Ah bah c'est un conteneur de type inline style Oh bah mince alors, on va lui mettre une mise en forme! ="propriété: valeur; " Et cette mise en forme affecte telle propriété en lui donnant telle valeur! > bon, et le contenu auquel on applique ça, c'est quoi? CONTENU ah bah voila! < une nouvelle balise! que va-t-il se passer? /span> Ah bah y's'passe rien en fait, c'est la fermeture de la balise!

Je viens de commencer à lire je me suis dit que même si j'avais déjà commencer à faire un peu de codage je trouve cette première étape super instructive^^ j'en apprend un peu plus sur les attributs et je comprend mieux....

Narja merci pour l'explication c'est toujours bien de lire les question réponse (lol le mode ordi XD)

En tout cas donc merci pour tout ^^

Bonjour,

je voulais m'excuser, j'ai voté "-" sans savoir ce que c'était. Je croyais que c'était un bouton pour allez directement à la fin. Je vais allez me pendre.

En tout cas merci pour ce tutoriel, il est super. Et j'en apprend un peu plus !
Merci !

Bonjour, j'aimerais juste savoir, pourquoi on n'a pas ajouté le "font-style" dans la tableau? ^^"
L'a-t-on oublié? Ou bien... C'est fait exprès? Bref, si c'est le premier cas, je pense que vous pouvez l'ajouter maintenant

Bonjour, et déjà merci pour ce super cours qui me fait reprendre les bases (ce qui n'est pas inintéréssant )

Pour te répondre Natsumi13 :

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

Petite liste pour commencer = que tout n'est pas mis dedans.

Bonne journée

Merci pour ce tuto'! Très bien expliqué en plus!

Sinon, j'ai une question. Dans mon forum, lorsque je mets le message en "Prévisualiser" je vois mon entête mais lorsque je l'envoie, le code apparaît! Pourtant l'HTML est bien activé. Savez-vous ce qui ne va pas? >o<

Salut !

Il faut que tu vérifies qu'il soit bien activé aussi dans ton profil, puisque le compte a été fait lorsqu'il n'était pas encore actif via le PA. Pour les inscrits suivant c'est automatique, mais le fondateur doit le faire manuellement. Si c'est bon dans ton profil vérifie également que l'option n'est pas restée cochée en "désactiver" dans le message lui-même, en dessous quand tu l'édites ^^

Aaah, d'accord! J'y avais pas pensé x)

ça marche, merci beaucoup! ^w^

Hey ça groove ce soir

Super tutoriel !

Et juste en passant le lien dans "Décomposons le code :" > "#ffffff" > "Nom de la couleur" est mort

Fais attention, les lancés de dés ne sont pas pour ça XD

Le lien marche bien chez moi pourtant O_o

Merci bien, je penserais à l'utiliser.
Je deviendrais le meilleur codeur du monde!!!

Merci pour ce Tuto , j'ai déjà mal a la tête ça promet pour la suite

Merci beaucoup pour ce tutoriel !

Je connaissais déjà beaucoup de choses mais j'en ai encore apprises d'autres et cela m'a permit d'éclaircir des points un peu sombre ^^

Merci, c'est sympa !

Merci pour ce bon début de Cursus. Un vrai retour au source de quoi permettre de repartir sur de bonne base!

C'est un tuto super agréable à lire et facile à comprendre. Tout ce que je cherchais pour apprendre les bases ! Merci :)

(Mafé se met au codage, ca va faire des ravages mouahaha !)

Super tuto. Je ne savais faire aucun codage. Je viens de faire le premier ^^

Merci pour ce tuto des mieux réalisé ! Ca va bien m'aider pour mon forum !

C'est un tuto super sympathique.

J'avais quelques bases, mais je les avais perdues, ne pratiquant pas. Faudrait que je pratique un peu plus.

Merci pour ces explications claires et précises. :)