FANDOM


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

    Nom Exemple
    Antiqua ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Arial ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Blackletter ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Calibri ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Comic Sans MS ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Courier ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Cursive ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Decorative ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Fantasy ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Fraktur ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Frosty ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Garamond ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Georgia ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Helvetica ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Impact ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Minion ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Modern ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Monospace ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Palatino ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Roman ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Sans-Serif ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Serif ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Script ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Swiss ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Times ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Times New Roman ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789
    Verdana ABCDEFGHIJLKMNOPQRSTUVWXYZ 0123456789

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

    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 :

    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 !

    Ce tutoriel vous a-t-il été utile ?
     
    20
     
    0
     
    0
     

    Ce sondage a été créé le mars 14, 2015 13:32 et 20 personnes ont déjà voté.
    Sur quoi voulez-vous le prochain tutoriel ?
     
    9
     
    3
     
    0
     
    1
     

    Ce sondage a été créé le mars 14, 2015 13:37 et 13 personnes ont déjà voté.
    Liste des Liens utiles
    TUTO sur la création d'un Index
    TUTO sur Div et les différences contenances du style
    TUTO sur les dégradés
    Générateur de Dégradés Chrome/Firefox
    Liens en vrac
    Liste des couleurs
      Chargement de l’éditeur...
    • Pour les curieux qui se demandent comment arrondir les bords avec les pixels, voici comment on procède : border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px

      Après, à vous de changer la valeur 10px.

      Sinon très bon tuto Jubo !

        Chargement de l’éditeur...
    • Félicitations, ça va bien aider dans la création de nouveaux modèles. ^^

        Chargement de l’éditeur...
    • Génial! , Pour les débutant comme moi c'est super clair et précis. Bravo!

        Chargement de l’éditeur...
    • Wooooow, j'adore !!! *o* C'est très bien fait ! ^w^

        Chargement de l’éditeur...
    • Super ! Merci beaucoup ;)

        Chargement de l’éditeur...
    • Un utilisateur de FANDOM
        Chargement de l’éditeur...
Sélectionner ce message
Vous avez sélectionné ce message !
Voir qui a sélectionné ce message
Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .