Codage. Cursus

Partie 1 - Etape 2 : Mise en forme de paragraphes


Auteur : Sparrow-style

Les Différents blocs texte

Pour créer des blocs de texte nous allons utiliser des balises de type "block", qui sont donc le contraire des balises de type "inline" que nous avons vu précédemment.
RAPPEL : Une balise de type inline ne concerne qu'une ligne de code, il ne sera pas possible d'y appliquer de marge externe, de taille ou d'alignement.
Une balise de type block représente une zone entière et non plus une ligne. Il sera alors possible de mettre une marge, un positionnement, une hauteur et une largeur à la zone que l'on définit.

Le Paragraphe "p"

Il existe plusieurs façon d'afficher un paragraphe. La plus courante se fait avec la balise de paragraphe simple :
Attention, cette balise impose d'elle-même une marge au dessus et en dessous du bloc texte. C'est une caractéristique de la balise qui est contenu dans la balise elle-même. Généralement, les paragraphes sont isolés les uns des autres par des sauts de ligne, ce qui explique que cette mise en forme soit incluse automatiquement. Le navigateur en voyant la balise de paragraphe sait qu'il doit l'afficher avec des espaces avant et après, tout simplement.
Ainsi donc, si vous mettez en forme le contenu d'un de vos messages (un RP par exemple, dans lequel il y aura donc des paragraphes histoire d'aérer un long texte) avec des paragraphes, vous n'aurez pas besoin de sauter des lignes, cette balise le fera pour vous. Il est bien sûr possible d'ajouter un "style" à un paragraphe mis en forme de cette façon là, de la même façon que pour un "span", un lien ou une image, nous allons y venir plus bas.
Néanmoins, cette balise est pratique dans un site web, car comme vous le savez sans doute il est nécessaire de placer une balise à chaque retour à la ligne dans une page de codage "pur"... mais pas sous ForumActif ! En effet, même si vous saisissez votre message en BBcode, chaque fois que vous pressez la touche "Entrée", c'est un retour à la ligne. Du coup, il devient facile d'en faire, c'est même un réflexe, du coup cette balise "paragraphe" est peu utilisée dans les messages. Sachez néanmoins qu'elle existe.

La zone-bloc "div"

La seconde manière est de créer une zone "block", au départ sans mise en forme, à laquelle nous appliquerons ensuite du css. Cette méthode sera plus utilisée dans vos mises en forme de message, elle est importante, c'est même d'une des balises les plus utilisées dans les structures de page. Elle est très malléable et permet une multitude de personnalisation.
La balise pour créer une zone est la suivante : Que remarquez-vous lorsque vous prévisualisez un message avec uniquement ce contenu ? Et bien il n'y a rien de plus que le texte "Votre texte" dans votre message !
En effet, tout comme la balise "span" vue dans l'étape précédente, la balise "div" n'impose rien d'elle-même, c'est à nous de lui donner un style pour l'afficher comme l'on veut.

Leur Possibilités de mise en forme

Afin de donner du "style" à notre cadre "div", nous allons procéder de la même façon qu'avec le "span", c'est à dire en intégrant le CSS directement dans notre balise : Il vous est bien sûr possible de placer les mêmes propriétés que celles affiché dans le tableau de l'étape précédente, à savoir une couleur de fond, une bordure, une taille et couleur de texte...
Ne perdez pas de vue que votre texte doit être lisible et qu'il serait bien plus long qu'un simple titre ! Evitez donc absolument tout ce qui est texte en lettre majuscules (difficile à lire) ou d'espacer les lettres ou les mots de manière top importante, etc...
Je ne vais pas remettre le même tableau, consultez-le si besoin à l'étape précédente. Voici par contre ce que vous pouvez mettre en plus, spécifiquement dans les balises de type "block", comme propriétés CSS.
Afin que les exemples se voient lorsqu'il s'agit d'élément normalement invisibles (marges, tailles) j'ai appliqué un background de couleur en plus de la propriété montrée en exemple.

ELEMENT MODIFIENOM DE LA PROPRIETEVALEURS POSSIBLESEXEMPLES
Largeurwidthun chiffre en pixel ou un pourcentage
40px
-
80%
Hauteurheightun chiffre en pixel
30px
-
50px
Alignement du textetext-aligncenter; right; left; justify
center
-
right
-
left
-
"Justify" : Ce texte est justifié, chaque lettre s'arrête au même endroit précisément de chaque côté.
Margesmargin
margin-top
margin-left
margin-bottom
margin-right
un nombre en pixel
margin-top: 10px
-
margin-left: 40px
Image de fondbackground ou background-imagel'adresse d'une image sous la forme : url(adresse.jpg);


Voici ci-dessous quelques exemples de ce que cela peut donner.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
... et si on l'associe à un titre :

Votre titre
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
Plutôt pas mal pour un début non ? Vous pouvez bien évidemment changer les couleurs, les polices, les bordures et leur style, mais aussi les marges ! Pour faire passer le bloc de texte en partie sous le titre j'ai simplement utilisé un "margin-top: -10px", mais vous pouvez ainsi bouger les éléments comme il vous plaira, et comme vous pouvez le constater les nombres négatifs peuvent être très utiles !

Le "Lorem Ipsum"

Hop hop hop ! Quand est-ce que j'ai signé pour faire du Latin moi ??? oÔ
No panic :). Pas de version latine à l'horizon, d'ailleurs quand bien même vous essaierez de traduire vous ne pourrez pas puisque ces types de texte là ne sont pas du "vrai" Latin, certains mots sont justes, mais d'autres non et ils sont placés aléatoirement.
A quoi ça sert alors ?
Et bien simplement à simuler la présence d'un vrai texte dans votre encadré. Cela permet de voir précisément comment rendra votre code une fois rempli, sans vous embêter à le remplir en racontant votre vie ou en mettant des "blablabla" qui ne représenteront jamais ce que donnerait un texte. C'est exactement ce que j'ai utilisé juste au dessus pour l'exemple.

Voici où trouver un bon générateur de "Lorem Ipsum" (nom de ces fameux textes aléatoires) : Générateur de faux textes.

Remplir provisoirement avec ces textes vous permet d'avoir un aperçu de votre code proche de ce qu'il donnera avec votre propre texte par la suite.
Cela peut paraitre un détail, mais ces textes là ne comportent pas de caractères spéciaux... Cela peut être important pour le codage de pages web, mais je ne vais pas entrer dans les détails maintenant, sinon vous allez fermer ce guide avant d'avoir terminé la première phrase x).
Souvenez-vous donc que ces fameux petits textes existent pour vous faciliter la vie, personnellement je les utilise souvent, que ce soit pour mettre en place un code de message, que pour faire le codage d'une description de catégorie ou encore pour élaborer le codage d'une page web comme celle que vous lisez actuellement... Evidemment, cela parait logique, mais il faut enlever ce faux texte ensuite pour le remplacer par votre propre texte, le vrai. Cela peut paraitre idiot mais il est déjà arrivé que de grands graphistes rendent leur travaux d'affiche par exemple avec en texte "Lorem Ipsum" à la place du nom du produit... Ca l'fait pas hein ? XD

Centrer automatiquement un bloc

Le "center"

Vous allez peut-être me dire que l'exemple illustrant la mise en forme du bloc texte ci-dessus est bonne mais qu'il serait mieux de tout centrer sur la page ou dans le message... Et vous avez raison. Comment procéder alors ? Et bien il y a la méthode "simple" mais globale, qui ne permet pas de faire de détails, et que nous avons vu dans l'étape précédente. Ce qui nous donne pour l'exemple :
Votre titre
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
Mieux non ?^^ Cependant, cela centre tout sans nous laisser trop libre ensuite... Par conséquent, même si c'est tout à fait utilisable, j'ai une préférence pour la méthode qui suit. Libre à vous d'user du code qui vous conviendra le mieux !

Le "margin: auto"

La seconde méthode consiste à utiliser quelque chose de très pratique : le "margin: auto;". Qu'est-ce que c'est cette bestiole encore ? Vous aviez vu le "margin" dans le tableau qui permet de mettre des marges extérieures à un bloc, et bien la valeur "auto" va mettre des marges "automatiques". Concrètement, mettre un "margin: auto" permet de centrer un bloc par rapport aux bords d'un autre.
Ca parait abstrait vu comme ça, mais je vous assure que c'est très simple et ce schéma devrait vous aider :
J'espère que vous visualisez mieux. Par contre, pour utiliser le "margin: auto", vous avez besoin de certaines conditions :
- afin que le navigateur puisse centrer votre bloc, il doit connaitre sa largeur, du coup vous devez indiquer une largeur, qu'elle soit en pixels ou en pourcentage (j'aborderais la différence entre les deux un peu plus bas).
- si vous appliquez un "margin: auto;" simple vous ne pouvez pas en plus de ça mettre un "margin-top: 10px (par exemple), si vous voulez pouvoir influer sur les marges hautes et basses de votre bloc, au lieu d'indiquer un "margin: auto;" qui correspond à toutes les marges, indiquez deux margins, droite et gauche, en les mettant en auto, comme ceci : Ce qui donne :
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Je n'ai ici utilisé que le margin: auto (droite et gauche) mais pas de "center" et pourtant mon bloc est bien centré, c'est donc une méthode correcte (meilleure même que le "center" à mon sens) pour centrer un élément.
Vous remarquerez que je n'ai pas mis le titre, j'aurais pu l'ajouter mais j'aurais dû le centrer avec les balise "center" car je ne peux pas appliquer de "margin" à une balise de type "inline". En fait, si, il y a un moyen, que je vous explique dès à présent.

Transformer un "inline" en "block"

Comme vous l'indique le titre, il est possible de transformer une balise de type "inline" en balise de type "bloc", en l'occurrence le "span" utilisé pour le titre.
Pourquoi le faire ? Et bien pour lui appliquer des marges, centrer le texte ou l'aligner à droite par exemple... Cela permet aussi davantage d'effets sur les bordures qui prendront alors toute la largeur de la page.

Transformer un inline en bloc par son css

C'est très simple, il suffit d'ajouter ceci dans le css de votre "span" : Un exemple concret avec un titre :
Votre titre
Vous observez donc que :
- la bordure fait la largeur de la page, elle peut faire moins, il suffit que j'applique une largeur (width) à mon bloc, puisque c'en est un désormais.
- le texte est centré alors que je n'ai pas utilisé la balise "center", tout simplement car j'ai mis un "text-align: center" dans mon css.
Ne confondez pas le fait que le texte soit centré avec le fait que le bloc soit centré ! Mon texte peut très bien être aligné à droite dans un bloc lui aligné à gauche... Regardez l'exemple ci-dessous pour comprendre.

Votre titre Centrer un texte (contenu dans la bloc) et le bloc lui-même c'est deux choses différentes. Centrer un texte se fait avec un "text-align: center", alors que centrer un bloc se fait avec un "margin: auto".

Une alternative à connaitre : le inline-block

Il y a un inconvénient à transformer un "span" de catégorie "inline" à un "span" en "block", c'est qu'il prend automatiquement toute la largeur, à moins que vous ne le réduisiez par sa taille (width). Du coup, pour un titre c'est bon, mais si vous voulez faire des onglets par exemple, comme ça pourra être le cas plus tard, ou bien simplement des liens sur l'horizontale pour une navigation rapide... ou autre chose dans ce goût là, chacun de vos liens prendra la largeur de la page et renverra les autres à la ligne.

Vous n'allez peut-être pas utiliser cette propriété tout de suite, mais sachez qu'elle existe et peut vous servir, il s'agit d'une sorte de mélange entre les deux états "inline" et "block" qui s'écris du coup très logiquement comme ceci : Qu'est-ce que cela permet ? Cela permet d'imposer tailles, marges et alignement de texte à un bloc sans qu'il prenne toute la largeur de façon automatique. En clair votre lien ou votre texte reste sur la même ligne que d'autres éléments, mais vous pouvez lui appliquer une marge et d'autres propriétés propres aux éléments "blocs".
Retenez simplement que cela existe, nous y reviendrons plus tard si nécessaire.

Les largeurs en pixel et en pourcentage

J'ai abordé plus haut les deux façons d'indiquer une taille : les pixels ou les pourcentages. Quelle est la différence ?
Les pixels : servent à donner une largeur stricte, il s'agira de 10 pixels ou de 100 pixels, et cette taille ne bougera pas quelle que soit la largeur du contenant (les blocs dans lesquels vous êtes).
Les pourcentages: il s'agit là du pourcentage de quelque chose, vous êtes d'accord, mais de quoi ? Et bien simplement du bloc dans lequel vous êtes. Il peut s'agir de la page entière comme pour la largeur de votre forum, par exemple, mais aussi de la largeur d'un message affiché si vous mettez en forme l'intérieur de ce message. Un bloc qui aura pour largeur 50% aura donc une taille qui correspond à la moitié du bloc dans lequel il se trouve.
Le système des largeurs en pourcentage semble plus complexe... Pourquoi vouloir l'utiliser ?
Pour vous donner un exemple de situation concrète dans laquelle les pourcentages sont nécessaires je vais prendre l'affichage d'une fiche RPG ou publicité (ou autre chose de mis en forme avec du css) dans le message d'un forum.
Si vous souhaitez faire votre publicité avec une fiche préétablie trouvée sur un forum ou un site qui propose ce genre de codes, vous allez poster cette fiche sur divers forum de pubs, normal. Mais ces forums de pub', ils n'ont pas tous le même design et très certainement que la largeur de leur messages est aussi très différente.
Prenez Never-Utopia par exemple : chaque fois que le design change, la largeur des messages change... et c'est souvent comme ça ailleurs.
Du coup, si votre fiche est faite en pixel, avec par exemple une largeur de 700px, elle rentrera dans des forums qui ont une zone de message de cette largeur là ou supérieure, mais si le message n'a que 600px de largeur, votre fiche dépassera sur le fond, à l'extérieur du message, ce qui n'est guère esthétique !

C'est là qu'interviennent les pourcentages et qu'ils sont nécessaires, même si encore peu utilisés dans ce type de fiche pré-codées... hélas. En effet, mettre une largeur de 90% au lieu d'une largeur de 700px va permettre de modeler la fiche selon la largeur que vous avez dans le message : votre fiche prendra à chaque fois 90% de la largeur totale, c'est à dire un peu moins (histoire de laisser de jolies marges de chaque côté^^) que l'espace total du message.

J'espère que cet exemple est clair pour vous et vous permettra de comprendre quand et pourquoi utiliser ces pourcentages.

Etape précédente Etape suivante