Sauvegarde fils forum FTW

## [Tuto : Quelques bonnes pratiques pour le Wikitext et le CSS] (by Fuji)

Salut les Mages ! :)

Comme vous le savez peut-être, je suis le maçon du codage du Wiki et je connais pas mal de chose sur le CSS, HTML et par extension le Wikitext.

Je vais vous écrire ici une petite liste ici de choses pratiques à savoir lorsque l'on fait du Wikitext ou du CSS ! Vous pouvez également poser vos questions ou demander un tuto dans les commentaires, si vous souhaitez apprendre à faire quelque chose.

### Les Dégradés

Petit effet de style sympa et à la mode, il est utilisé pour faire de jolis effets !

Néanmoins, cette propriété CSS peut écrite de différentes manières : -webkit-linear-gradient, -moz-linear-gradient, ... Ces propriétés sont propres à chaque navigateurs et ne s'affichent pas toujours chez d'autres... Par exemple, la propriété -webkit-linear-gradient est propre à Google Chrome et peut ne pas s'afficher sur Firefox/Internet Explorer.
Par exemple, le code suivant :

```
<div style="background:-webkit-gradient(linear, 50% 60%, 60% 80%, from(HoneyDew), to(Cornsilk));"> Coucou les amis !!! </div>

```

Affichera un fond transparent sur les navigateurs non supportés. Pour palier à ce problème il existe deux solutions :

* Traiter tous les navigateurs possibles en utilisant toutes les propriétés : -webkit-linear-gradient, -moz-linear-gradient, -o-linear-gradient,-ms-linear-gradient... ce qui peut vite devenir fatiguant et encombrer le code pour rien
* La deuxième solution, est d'utiliser la propriété standard du W3C (les gens qui ont créé et font évoluer le CSS), -linear-gradient qui est universelle et fonctionne sur tous les navigateurs modernes. Sa synthaxe n'est pas très différente des autres et vous pouvez la retrouver ici.

### Mettre le texte en couleur

Il s'agit de quelque chose que l'on fait assez souvent sur les articles afin de mettre en évidence des informations ou tout simplement pour que ce soit joli.

Mais malheureusement, nous le faisons le plus souvent de la mauvaise façon.

En effet afin de mettre le texte en couleur nous utilisons le plus souvent la balise <font> comme ceci :

```
<font color="red">Je suis un texte en rouge</font>

```

Or le W3C a déclaré cette balise obsolète et non supportée par HTML5 (Plus d'info ici). Du coup il serait préférable d'utiliser la balise <span> à la place. Voici un exemple :

```
<span style="color:red;">Je suis un texte en rouge.</span>

```

Ce code mettra bel et bien votre texte en rouge et est conforme avec les recommandations du W3C !

## [Aide: Indexes] (by Madi)

Voilà que j'ouvre le second fil d'aide~ ;) Cette fois-ci je parlerai des indexes !

### Quoi qu'est-ce qu'un Index

→ ou plutôt **Qu'est-ce qu'un index ?** ^-^

Un Index (aussi connu sous le nom de *Palette de navigation*) est un modèle en forme de barre, qui permet de naviguer plus facilement sur le site, Exemple:

Si vous cherchez un membre de Fairy Tail grâce à l'Index Fairy Tail, vous pourrez trouver **plus facilement** le lien menant à la page du membre que vous cherchez ^-^ Car on a pas tous forcément la même écriture d'un nom donc l'index a d'autant plus d'utilité !

Donc, toutes pages ayant leur lien dans un index peuvent avoir l'index sur la page exemple: Erza est une membre de Fairy Tail, donc on a mis le lien de son article dans l'index de Fairy Tail, comme le lien est présent dans l'index, on a ajouté l'index à sa page ;)

Vous pouvez trouver tous les index existants soit sur la Zone d'essais, soit sur cette catégorie: Palettes de navigation

### Comment le mettre sur une page ?

Je vais reprendre l'exemple de l'Index Fairy Tail ^-^

Pour l'insérer à une page, deux méthodes :

1. On peut utiliser la "première méthode" comme pour l'infobox (aide que vous pouvez trouver ici: Fil:40105 )

1. On peut prendre le nom de la page de l'index et on le met sur la page entre ceci {{}}

```
{{Index FT}}
```

Avec mon exemple ce sera **Index FT** le nom de la page que nous mettrons entre {{ }}, comme vous pouvez le voir ci-dessus ^-^

→IMPORTANT!!

Il faut placer l'index tout en bas de l'article concerné, puisqu'il sert à naviguer sur le site !! Il ne sert donc pas à grand chose si on le met en plein milieu de la page, déjà cela apporte très peu d'esthétique sur l'article, et de plus, les indexes ont plus leur place à la fin de l'article, proche des catégories, qui servent elles aussi à naviguer plus facilement sur le site ;)

Merci pour votre attention ! ^-^

## [Aide: Modèles] (by Madi)

### Qu'est-ce qu'une page de Modèle?

Une **page de modèle** est une page où l'on peut trouver un Modèle. ^-^ Oui non... je rigole ... XD Une page de modèle sert à rassembler des codes complexes, une fois la page publiée, tous ces codes complexes, peuvent être ajouté à un article juste en mettant le nom de la page du modèle ^-^

Je vais donner un exemple avec l'Infobox Personnage:

Cette page de modèle rassemble les codes complexes qui forment un tableau ^^ si on l'ajoute à une page, cela évite de taper tout le code ^^ Pour l'ajouter il suffit de "baliser" le nom de la page entre {{ }} :

```

{{Infobox Personnage/Gentil}}

```

C'est ainsi qu'il apparaît dans le **Mode Source**.

Dans le **Mode Visuel**, il apparaît sous la forme d'une pièce de puzzle ^^

Au passage, je vous montre comment passer du mode Visuel au Mode Source:
Fichier:SourceVisuel.png

Cette image montre ce que l'on voit lorsque l'on modifie une page, par défaut, on vous met en **Mode Visuel**. Pour passer en **Mode Source** il suffit de cliquer sur *Source* (cercle vert), et ainsi pour repasser en Mode Visuel, il faut cliquer sur *Visuel* (cercle rouge)

### Différences:

LA différence entre le mode source et le Mode visuel, c'est qu'en Source, on peut voir les fautes que l'on fait, et on voit tout les codes complexes qui font que le texte est coloré, gras, italique etc... ^^

Le Mode Visuel vous montre comment l'article se présente en général, seule chose qu'on ne voit pas, ce sont les modèles, qui sont représentés par une pièce de puzzle ^^ Il suffit de cliquer sur cette dernière pour rentrer/corriger/retirer des informations dans le Modèle. ^^

Il existe de nombreux modèles à travers tout wikia... Ici sur Fairy Tail Wiki, nous en utilisons beaucoup, je vous ai d'ailleurs présenté deux d'entre eux:

* Les Indexes (Aide qui se trouve ici: Fil:40173 )
* Les Infoboxes (Aide qui se trouve ici: Fil:40105 )

Je vous ai expliqué plus haut ce qu'est un modèle, Il faut savoir qu'il y a deux types de modèle bien distinct ^^

* Il existe des modèles que l'on peut modifier un fois mis sur un article

Exemple: Les Infobox sont des modèles que l'on peut modifier une fois mis sur un article puisque les informations changent selon l'article. Pour que ce soit plus concret: Erza Scarlett n'a pas les mêmes informations dans son infobox que celles qui se trouve dans celle de Grey Fullbuster, puisque ce sont deux personnages bien distinct, compris ? ^-^

* L'autre type de modèle est les modèles que l'on ne modifie pas une fois avoir mis sur un article car il n'y a pas besoin ^^

Exemple: Les Index sont des modèles qu'on ajoute tout simplement à un article, il n'y a aucune information à y entrer comme les infobox, car cela ne change pas selon l'article, l'index restera toujours le même. Pour que ce soit plus concret: L'Index Fairy Tail restera toujours le même sur tous les articles des membre de Fairy Tail, car il n'y a rien à y ajouter, compris ? Tous les noms sont déjà rentrés, et il n'y a pas d'informations qui changent ^-^

Il existe des centaines de différents modèles, cela ne sert à rien que je vous les expose un à un puisque cela change d'un wiki à un autre.

### Créer un Modèle

#### 1. Créer la page

Avant de créer un modèle... la base est de créer la page non ? x) Pour cela, vous créez une page de façon normale, comme si c'était un article, sauf que devant vous mettez "**Modèle:**"

Exemple:

Vous souhaitez créer un modèle qui aura pour nom "**Natsu**", dans la barre qui vous demande quelle nom vous souhaitez donner à votre article, vous allez taper:

```
Modèle:Natsu
```
 et non

```
Natsu
```

#### 2. Utiliser le codage

Une fois votre page de modèle, créer vous mettez ce que vous voulez dessus, comme je l'ai dit plus haut, cela sert à éviter de recopier des codages en entier, qui souvent, sont très longs.

Pour créer un modèle, je conseille au débutant de copier/coller un modèle déjà existant, (exemple: Modèle:Infobox Personnage/Gentil) et de changer les couleurs, les informations selon vos goûts ^^ à force, vous finirez par comprendre leur utilisation.

→Une fois que vous créez des modèles, vous êtes appelé "**ModelBuilder**"

→Petit texte pour rappeler les règles d'un **ModelBuilder**: (petit délire Madiesque x) )

1. Toi ModelBuilder, tu seras meilleur ami avec les pages: Aide Couleur & Code Couleur
2. Tu créeras encore et encore des modèles pour te démarquer.
3. Tu décideras de ton destin, qu'il soit carré, arrondi ou les deux en même temps x) (référence aux bords des modèles en encadré x))
4. Tu aideras les autres ModelBuiders en difficulté avec leur création.
5. Tu ne cesseras jamais d'exprimer tes idées les plus farfelues pour personnaliser tes créations, les éloigner au maximum des classiques !

Je vais m'efforcer d'ajouter tous les modèles existants du wiki sur la Zone d'essais, je tiens à préciser que maintenant lorsque je crée un modèle, je m'efforce d'ajouter sur la page du modèle l'utilisation, pour que tout le monde soit capable de comprendre comment l'utiliser ^-^

Bref... Merci de votre attention ;)

## [Tuto : Les Dégradés] (by Jeanne)

Bonjour,

Je me met aussi aux tutos maintenant ^^ mais contrairement à MB, je m'adresse à des utilisateurs Avancés qui connaissent déjà assez bien les codes.

### Le soucis des Dégradés

Vous avez tous sûrement déjà vu un dégradé sur une BABB, mais le problème, c'est que les dégradés ne se voient pas sous Mozilla Firefox, qui est quand même un navigateur assez utilisé. En effet, pour faire un dégradé, il faut un code différent pour Chrome et Firefox, et si vous ne mettez que le code pour le dégradé de chrome ou inversement, l'autre navigateur affichera un fond transparent, ce qui est gênant parfois au niveau de la lisibilité. Je suis allée sur Firefox, et j'ai vu que c'était le cas de tout les dégradés sur les BABB sauf le mien et celui de Fuji (ce qui est très peu).

J'écris donc un Fil pour vous donner les codes entre les différents navigateurs. Il y a aussi un code différent pour Internet Explorer : si quelqu'un utilise encore ce navigateur, qu'il me le dire, je donnerai les codes pour IE aussi. Alors faites les deux codes, et à bas le racisme de Firefox ! /sort/

### Introduire les deux codes différents

Pour cela, il faut mettre dans style :

```
background:code-pour-chrome; background:code-pour-mozilla;

```

Le fait qu'il y ait deux background n'est pas gênant.

### Codes pour un dégradé horizontal

Chrome :

```
background:-webkit-gradient(linear, 0% 0%, 90% 0%, from(COULEUR1), to(COULEUR2));

```

Firefox :

```
background:-moz-linear-gradient(100% 9% 196deg,COULEUR1, COULEUR2);

```

```
<div style="background:-webkit-gradient(linear, 0% 0%, 90% 0%, from(HotPink), to(RoyalBlue)); background:-moz-linear-gradient(100% 9% 196deg,Hotpink, RoyalBlue); height:10px;"></div>

```

### Codes pour un dégradé vertical

Chrome :

```
background:-webkit-gradient(linear, 50% 100%, 50% 15%, from(COULEUR1), to(COULEUR2));

```

Firefox :

```
background:-moz-linear-gradient(50% 0% 270deg,COULEUR2, COULEUR1);

```

**/!\ L'ordre des couleurs n'est pas le même dans les deux codes, faites attention ! /!\**
```
<div style="background:-webkit-gradient(linear, 50% 100%, 50% 15%, from(HotPink), to(RoyalBlue)); background:-moz-linear-gradient(50% 0% 270deg,RoyalBlue, HotPink); height:50px;"></div>

```

### Divers

Voilà, en espérant que mes codes vous aideront et que vous réussirez à faire de jolis choses visibles sous Firefox et Chrome ^^ (Opéra marche aussi avec le code de Chrome et Waterfox avec le code de Firefox).

N'hésitez pas à me dire si ça vous est utile, et si vous voulez que je fasse un Tuto sur quelque chose ! Merci de votre lecture ;)

Modèle:Index Liens Utiles Jubi

PS : Je précise, j'ai mis un lien vers un générateur dans l'index, mais bien sûr le générateur ne marche pas sur votre mauvais navigateur, et ces codes sont surtout là pour vous éviter de faire des allers-retours entre vos navigateurs, et pour vous éviter d'installer l'autre navigateur si vous ne l'avez pas.

## [Aide : Texte] (by Madi)

Petite aide sur les différentes possibilités que Wikia nous offre au niveau de l'apparence du texte x)

### A. Colorations

Si vous ne le saviez pas, on peut colorer son texte sur wikia comme par exemple comme ceci : Exemple

Pour faire cela, il faut utiliser un code :

```
<font color=couleur souhaitée>texte souhaité</font>
```

Mais comme je suis d'une extrême gentillesse, j'ai créé un modèle simplifiant l'utilisation de ce code, il suffit d'ajouter la chose qui suit sur la page en mode source ^^

```
{{TC
}}

```

Exemple:

```
{{TC
}}

```

Donnera ceci : Modèle:TC
Vous pouvez retrouvez toutes les couleurs disponibles ici: [1]

Si vous voulez ajouter une couleur n'étant pas présente sur le lien précédent, je vous propose d'aller ici: [2], vous choisissez votre couleur et ensuite vous prenez le code avec le "#" qui s'affiche à droite. Ensuite, il suffit de faire comme sur l'exemple:

```
{{TC
}}

```

Donnera ceci:
Modèle:TC
**Surtout, n'oubliez mettre le "#" si vous choisissez une couleur n'ayant pas de nom, représentée par des chiffres et des lettres, c'est très important, sinon le modèle ne marchera pas !!**

### B. Changer de Police:

Pour changer de police, Certains diront "Qu'est-ce que changer sa police" pour rappel c'est pour faire ça :
Madi par exemple ;)
C'est encore une fois grâce à un code que l'on tape en mode source:

```
<span style="font-family:police;font-size: 1.5em">texte souhaité</span>
```

Exemple:

```
<span style="font-family:vivaldi;font-size: 1.5em">Exemple</span>
```

Si je l'utilise cela donne:
Exemple

Pour l'exemple, j'ai utilisé ma police d'écriture favorite *Vivaldi*.

Pour choisir la vôtre, il vous suffit d'aller sur Internet ou tout simplement sur des logiciels comme Word, Publisher etc... qui vous aidera à trouver le nom de la police que vous souhaitez mettre ^^ Je vais peut être créé un modèle par la suite, comme pour le texte coloré pour simplifier l'utilisation de ce code ^^

### C. Texte Surélevé

Pour faire un texte surélevé comme ceci : texte

Il faut encore une fois utiliser un code en mode source qui est le suivant:

```
<sup>texte souhaité</sup>
```

Exemple:

```
<sup>Exemple</sup>
```

Donnera:

1Exemple (j'ai mis un 1 pour que vous visualisiez la différence de placement ^^ )

### D. Texte en Petit/Grand

Pour faire un texte en petit comme ceci : texte ou au contraire un texte en grand texte

Il faut utilisé un code en mode source qui sont les suivants:
*Petit*:

```
<small>texte souhaité</small>
```

*Grand*:

```
<big>texte souhaité</big>
```

J'arrête de donner des exemples puisque j'en ai déjà donner pas mal en haut et comme c'est toujours la même méthode ^^
Chose important à savoir avec ces deux codes:

```
<small><small><small>texte souhaité</small></small></small>
```

Ci-dessus nous pouvons voir trois fois "small" de chaque côté, cela donne ceci:
texte souhaité
Tout ça pour vous expliquer que plus il y a de "small" ou de "big" plus le texte sera petit/grand.

### E. Texte Barré

Pour faire un texte barré comme ceci : texte

Il faut utiliser un code en mode source qui sont les suivants:

```
<strike>texte souhaité</strike>
```

### F. Texte souligné

Pour souligner un texte, il faut mettre ce code en mode source:

```
<u>texte</u>
```

texte

## [Aide: Infobox] (by Madi)

Voilà que j'ouvre mon premier fil d'aide~

Ce fil se concentre sur l'utilisation de la fameuse infobox!! ^o^

L'infobox est un modèle permettant de rassembler des informations dans ce que j'appelle **un tableau "stylisé"**  ^^

Pour voir les différentes infobox qui existent sur le wiki et donc pour savoir laquelle utilisée, je vous invite à aller sur la Zone d'essais, qui rassemble la plupart des modèles du wiki ^^

### A. Insérer une Infobox sur une page:

Pour cela, il faut tout d'abord choisir l'infobox adaptée !! Pour mon exemple, j'utiliserai l'Infobox Personnage Gentil ^^

Il y a deux méthodes:

 Fichier:Modèles.png
1ère Méthode: On modifie la page concernée, et on clique sur "Ajouter d'autres Modèles" qui apparaît à droite de la page, puis on tape dans la barre de recherche le nom du modèle.

2ème Méthode: On va en mode source et on prend ce qui est marqué sur la page du modèle, par exemple sur la page de modèle de l'Infobox du personnage il y a :

```
{{Infobox Personnage/Gentil
}}

```

C'est cela qu'on doit mettre en mode source, après il suffit de remplir avec les informations juste à côté de chaque "=" :)

Si ce n'est pas présent sur la page de modèle, On peut le taper à la main exemple: Sur l'infobox à l'endroit où l'on doit remplir avec les informations, on peut voir par exemple: {{{nom}}} il suffit en mode source (quoi que ça marche tout aussi bien en mode visuel ;) ) de prendre chaque mot entre les {{{}}} et de mettre devant un | et un = derrière le mot

--->Exemple pour que cela soit plus concret:

```

```

Chose importante à ne pas oublier mettre le modèle avant d'écrire la chose ci dessus !

Cela donne ceci --->

```
{{Infobox Personnage/Gentil

}}
```

Il ne faut pas oublier de refermer le modèle avec  }} ^^

Ce sera tout pour aujourd'hui, Merci de votre attention ^-^

## [Tuto : Section(s) "Falcutative(s)" ] (by Madi)

Bonjour à tous !

J'ouvre ce fil afin de faire un récapitulatif à propos des **Sections Facultatives** que l'on peut rencontrer parmi tout type d'article.

### Premier point: Les différentes sections facultatives existantes

Il existe 5 types de sections facultatives courantes:

1. Les références
	1. Elles abritent les diverses références que l'on peut trouver dans l'article.
2. Les Citations
	1. Abritent les citations marquantes d'un personnage
3. Les Stats
	1. Stats révélées au cours de bonus en fin de tome, ou dans un shonen jump
4. Navigation
	1. Abrite un ou plusieurs indexes dans lequel la page est indiquée.
5. Les Détails Supplémentaires
	1. Abritent plusieurs détails qui ne se trouvent pas forcément dans les autres sections tel que l'Histoire.

### Deuxième Point: Navigation

Comme vous le savez déjà pour la plupart la section ne se nomme pas/plus "**Navigation du Site**" mais "**Navigation**"

Donc Merci de supprimer "du site" si jamais vous tombez sur des rescapés !

### Troisième Point : Détails Supplémentaires

Je passe directement aux explications concernant les détails supplémentaires puisque les autres sections ne nécessitent pas d'explications ou en ont déjà une.

Comme plusieurs me l'ont déjà fait remarqué, cette section devient parfois une **poubelle** où l'on trouve diverses choses, certaines hilarantes, d'autres fois pas du tout .-.

Je vais donc clarifier les choses concernant son contenu :)

→Les informations que l'on trouve dans cette section doivent être **vérifiées**, elles ne doivent pas être **basées sur vos hypothèses personnelles**.
Voici une petite liste basique de ce que l'on peut trouver:

* Préférences d'un personnage *(Ex: Nourriture, Couleurs préférées )*
* Origine du nom d'un personnage/objet/Lieu etc... (Traduction d'un mot venant d'une autre langue, origine mythique etc... )
* Précision apportée par Mashima lui même au cours d'un tweet ou d'une interview *(ex: Si Erza avait une nationalité de notre monde actuelle, elle serait britannique )*
* Précision sur un personnage concernant ses relations avec les autres.
* Indicateur sur la puissance d'un personnage/objet/magie
* Détails sur un changement d'activité *(Ex: Lucy qui est devenue journaliste après la dislocation de Fairy Tail )*
* Détails sur les origines d'un objet/personnage/magie/lieu *(Ex: Erza a "appris" la magie après avoir assisté à la mort de Rob)*

Voici quelques exemples, bien sûr tout n'est pas cité, mais il y a tellement de choses à dire haha x)

L'important à retenir c'est qu'il **ne faut surtout pas que cette section soit remplie de choses sorties de votre imagination**, cela doit toujours être vérifié, que ce soit par l'auteur, les scans, ou via le shonen jump.

Voilà c'est tout pour ce tuto :) Merci à tous de prendre en compte ceci :)

## [Tuto : Div et les différences contenances du style] (by Jeanne)

Bonjour,

Voilà donc un nouveau tuto, qui cette fois-ci s'adresse à des utilisateurs peu avancés dans le domaine du codage, mais qui connaissent quand même les fondamentaux (comme par exemple le fait qu'une balise s'ouvre et se ferme). Je vais donc vous apprendre à faire un cadre personnalisable.

### La balise Div

Pour cela, on va commencer par créer la balise. Div est, sans rentrer dans les détails, une balise qui permet d'attribuer certaines caractéristiques à un groupe de texte. Donc on commence par créer la balise, et la refermer :

```
<div>
Texte
</div>

```

Ce qui donnera :

Texte
Vous voyez rien de différent ? C'est normal, car on a pour l'instant donné aucune propriété à div.

### Mettre style

On va donc donner des petites caractéristiques comme une couleur de fond, la police de font, ... A notre cadre. Pour cela, on va mettre dans style. Voilà comment on fait :

```
<div style="propriétés">
Texte
</div>

```

Chaque propriété doit être séparée d'un point virgule ; ou cela ne marchera pas. Un simple oubli ou une simple faute de frappe et votre div peut tomber en ruine et ne pas marcher !

Voilà donc plusieurs propriétés que vous pouvez mettre.

### Le fond

Le code :

```
<div style="background:couleurdefond;">
Texte
</div>

```

Ce qui donne par exemple avec :

```
<div style="background:pink;">
Texte
</div>

```

Ceci :

Texte

PS : Vous pouvez mettre un dégradé, plus d'infos ici !

### Régler la taille

Width correspond à la largeur, et height à la hauteur. Vous pouvez donner une taille en pixels, ou une taille en pourcentage selon l'écran (recommandé).

Le code :

```
<div style="width:taille; height:taille;">
Texte
</div>

```

Ce qui donne (j'ai rajouté une bordure noire pour que vous voyez mieux) :

Texte
Le code :

```
<div style="width:200px; height:30px; border:1px solid black;">Texte</div>

```

### Bordure

Il existe plusieurs types de bordure :

Solid

Dotted

Dashed

Double

Ridge

Inset

Outset
Choisissez celle que vous voulez, une couleur, et une largeur (en px). Puis insérez ce code :

```
<div style="border:taille style couleur;">
Texte
</div>

```

Ce qui donnera par exemple :

Texte
Le code :

```
<div style="border:10px double orange;">Texte</div>

```

### La couleur du texte

Pour cela, insérez ce code :

```
<div style="color:couleur">
Texte
</div>

```

Exemple :

Texte
Le code :

```
<div style="color:white;">Texte</div>

```

### L'alignement du texte

Pour aligner le texte, insérez ce code :

```
<div style="text-align:Alignement;">
Texte
</div>

```

PS : Droite en anglais : right

Gauche : left

Centré : center

Par exemple :

Texte
Le code :

```
<div style="text-align:right;">Texte</div>

```

### Taille du texte

Pour cela, insérez ce code (avec la taille en pixels ou en pourcentage) :

```
<div style="font-size:taille">
Texte
</div>

```

Exemple :

Texte
Le code :

Texte
### La police

Il exite différentes polices :

Choisissez une police et insérez ce code :

```
<div style="font-family:la police;">
Texte
</div>

```

Ce qui donne par exemple :

Texte
Le code :

```
<div style="font-family:comic sans ms;">
Texte
</div>

```

### Bords Arrondis

Pour cela insérez ce code :

```
<div style="border-radius:arrondissement;">
Texte
</div>

```

Maintenant, deux options s'offrent à vous :

* Vous pouvez mettre l'arrondissement en px, comme par exemple border-radius:10px ce qui donnera le même bord arrondi partout. Pour faire un bord arrondi que d'un côté en utilisant des pixels, c'est un peu plus compliqué, donc si vous ne voulez pas que tout les coins aient le même arrondissement passez à la deuxième étape.
* Vous pouvez mettre l'arrondissement en "em". Pour cela il faut faire : border-radius:2em 2em 2em 2em; puis le coin sera plus ou moins arrondi selon le chiffre (là c'est 2). Cette option vous permet de donner un arrondissement à vos coins. Par exemple, si je veux que les coins du haut soient beaucoup arrondis et ceux du bas pas du tout, j'écris : border-radius:5em 5em 0em 0em; . Les différents "em" correspondent chacun à un coin, et cela tourne dans le sens des aiguilles d'une montre, ça fait comme un carré ABCD en maths. Une image pour m'expliquer :

 Fichier:Tutobords.png
Ici, ça fait : border-radius:A B C D; chaque lettre étant un "em". Je sais pas si j'ai été claire, et désolée pour la longue explication. ^^"

Ce qui donne donc par exemple :

Texte

Le code :

```
<div style="border:1px solid black; border-radius:0em 2em 0em 2em;">
Texte
</div>

```

### En assemblant tout...

Et voilà un exemple de ce que vous pouvez faire en assemblant un peu tout...
Le code :

```
<div style="background:plum; color:white; font-size:120%; border:3px ridge orchid; text-align:center; border-radius:0em 0em 2em 2em; font-family:georgia; width:100%; height:50px;">
Et voilà un exemple de ce que vous pouvez faire en assemblant un peu tout...
</div>

```

Et avec un peu plus d'imagination :

Page d'utilisateur

~

Page de discussion

Et voilà le code :

```
<div style="background:royalblue; color:darkblue; text-align:center; border:2px solid darkblue; wdith:100%;">
<div style="background:darkblue; text-align:center; width:100%; border-radius:2em 2em 0em 0em;">
[[Utilisateur:JealyJ|<font color=royalblue>Page d'utilisateur</font>]]
</div>

~

<div style="background:darkblue; text-align:center; width:100%; border-radius:0em 0em 2em 2em;">
[[Discussion_utilisateur:JealyJ|<font color=royalblue>Page de discussion</font>]]
</div>
</div>

```

Voilà, j'espère que ça vous aura été utile !

Modèle:Index Liens Utiles Jubi