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 :

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 :

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

Le code :

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

Bordure

Il existe plusieurs types de bordure :

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 :

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 :

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 :

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 :

Le code :

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 :

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 :

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 :

Le code :

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

En assemblant 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 :

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 !