Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment :
Cartes Pokémon 151 : où trouver le ...
Voir le deal

 :: Préambule :: Question & Idées :: QuestionsPartagez | 
 

 HTML & CSS n°2

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
PNJ

Admin


MES POSTS : 20
CHROMOSOME : Féminin
CARNET DE ROUTE
•• AFFINITÉS :
•• PUF: Pseudo
•• CLAN & RANG:
HTML & CSS n°2 Empty
MessageSujet: HTML & CSS n°2   HTML & CSS n°2 Icon_minitimeDim 17 Juil - 8:07


    Félins, Félines,
    Acclamez votre reine

    [justify]Ici je vais vous présenter deux petites sortes de signature codées, dont certaines marchant UNIQUEMENT sur ce forum - ou sur un autre forum disposant d'un code CSS similaire. Chers amis, courage car ces quelques astuces seront étalées sur pas mal de mots inutiles. *comme ce paragraphe d'introduction*

    I - Le HTML, c'est quoi ?

    Il existe plusieurs types de codes pour embellir vos messages dans un forum. Le BB code, caractérisé par un type de balises assez simples :

    Code:
    [i]italique[/i][b]gras[/b][u]souligné[/u][color=blue]couleur[/color]

    italiquegrassoulignécouleur

    Vous l'avez tous utilisé au moins une fois dans votre vie, si vous avez ne serait-ce qu'un tantinet d'expérience dans les forums.

    Le HTML, utilisé majoritairement sur les Pages d'Accueil et sur les sites internets, caractérisé par des balises plus complexes et l'utilisation d'un code couleur pour les nuances* :

    Code:
     <b>gras</b> <i>italique</i> <u>Souligné</u> <font color=#461f15> Couleur </font>

    gras italique
    Souligné Couleur


    On va commencer par les codes de bases, nécessaires pour personaliser votre signature ou vos messages HTML.

    Code:


    <b> </b>= Gras
     <i> </i>= Italique
     <u> </u>= Souligné
    <font size="xpx" color ="CODE COULEUR"></font>  = Modifier le genre de l'écriture ( Taille, Couleur. ) Astuce : Pour les codes couleurs, utilisez un logiciel de graphisme ;)


    Le CSS, le Javascript et les autres codes de personalisations ne nous intéressent pas pour le moment, ne nous occupons QUE de l'HTML et du BBcode.

    * Bon en fait là tu nous envoies le tutoriel . *


    Faire une signature codée avec HTML & BBcode [EXTREMEMENT simple Marche sur tous les forums.]

    Maintenant que vous vous y connaissez un peu en codes, on va vous faire une jolie signa. Avant toute chose, vous allez dans > Profil, Préférences, et vous cochez "Toujours autoriser le HTML". C'est CAPITAL, sinon votre signature apparaîtra sous la forme de codes. Autre chose : ne faites SURTOUT PAS avant d'avoir fini, basculer le mode d'Edition ! Par pitié, restez dans le mode "codé", sinon votre HTML sera effacé et vous devrez recommencer.

    Pour vous expliquer comment procéder, je vais prendre ici la signature de mon Orphée chéri <3

    Code:

    [center]
    <div class="opacity"><div style="border: 5px solid #461F15;  -moz-border-radius: 10px; font-size: 12; color: #8F402C; background-color: #C4846F; width: 680px"><span style="color: #000000; font-size: 24px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center">[size=24] [center]Orphée[/center] [/size]</span>[font=Georgia][center]
    [img]http://i35.tinypic.com/fy34f9.jpg[/img][/center]
    La vie est une partie de poker. Rien ne se gagne. Rien ne se perd. Tout s'échange.
    [/font]
    </div></div>[/center]


    1) Nous avons ce code de Base


    Code:

    <div style="border: TAILLE DU BORD en px TYPE DU BORD #COULEUR DU BORD;  -moz-border-radius: 10px; font-size: TAILLE DU TEXTE; color: #COULEUR DU TEXTE; background-color: #COULEUR DE LA BULLE; width: LARGEUR DE LA BULLE"><span style="color: COULEUR DU TITRE; font-size: TAILLE DU TITRE en px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center">[size=24] TITRE [/size]</span>[font=VOTRE POLICE]
    Votre signature
    [/font]
    </div></div>

    Procédons par étapes.

    > Taille du bord en Pixels. N'en mettez pas trop ! Entre 2 et 5 suffisent =) Faites attention, il ne doit pas y avoir d'espaces entre la taille et l'abréviation px (exemple : 3px) et vous devez mettre ceci entre guillemets ". Ici je vais choisir ... 5 pixels.

    Code:

    <div style="border: 5px TYPE DU BORD #COULEUR DU BORD;  -moz-border-radius: 10px; font-size: TAILLE DU TEXTE; color: #COULEUR DU TEXTE; background-color: #COULEUR DE LA BULLE; width: LARGEUR DE LA BULLE"><span style="color: COULEUR DU TITRE; font-size: TAILLE DU TITRE en px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center">[size=24] TITRE [/size]</span>[font=VOTRE POLICE]
    Votre signature
    [/font]
    </div></div>



    > Type du bord. Cela devient intéressant =) vous avez plusieurs types de bord, a savoir : Pointillés (dotted), tirets (dashed) ou lisse (solid). Ici, je choisis solid.

    Code:

    <div style="border: 5px solid #COULEUR DU BORD;  -moz-border-radius: 10px; font-size: TAILLE DU TEXTE; color: #COULEUR DU TEXTE; background-color: #COULEUR DE LA BULLE; width: LARGEUR DE LA BULLE"><span style="color: COULEUR DU TITRE; font-size: TAILLE DU TITRE en px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center"> TITRE </span>[font=VOTRE POLICE]
    Votre signature
    [/font]
    </div></div>

    > Couleur des contours. C'est simple, il vous suffit de mettre votre code couleur ! Ici je mets ##461F15, alias le code couleur d'un marron très foncé. (blanc=#FFFFFF noir =#000000 etc ...)

    Code:

    <div style="border: 5px solid #461F15;  -moz-border-radius: 10px; font-size: TAILLE DU TEXTE; color: #COULEUR DU TEXTE; background-color: #COULEUR DE LA BULLE; width: LARGEUR DE LA BULLE"><span style="color: COULEUR DU TITRE; font-size: TAILLE DU TITRE en px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center"> TITRE </span>[font=VOTRE POLICE]
    Votre signature
    [/font]
    </div></div>

    > Le moz-border-radius sers a avoir des coins arrondis ( cela ne marche qu'avec Mozilla Firefox), vous pouvez l'enlever si vous voulez.

    > Nous en avons fini avec les contours, maintenant nous allons voir le texte. Mes amis ... c'est exactement pareil =) Il s'agit ici du texte contenu dans votre bulle. Ici je vais choisir un texte de 13pixels et une couleur plutôt marron.

    Code:

    <div style="border: 5px solid #461F15;  -moz-border-radius: 10px; font-size: 13px; color: #; background-color: #8F402C; width: LARGEUR DE LA BULLE"><span style="color: COULEUR DU TITRE; font-size: TAILLE DU TITRE en px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center"> TITRE </span>[font=VOTRE POLICE]
    Votre signature
    [/font]
    </div></div>

    > Largeur de la bulle. La largeur de votre bulle en pixels. Je choisis personellement 680 px.

    Code:

    <div style="border: 5px solid #461F15;  -moz-border-radius: 10px; font-size: 13px; color: #; background-color: #8F402C; width: 680px"><span style="color: COULEUR DU TITRE; font-size: TAILLE DU TITRE en px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center"> TITRE </span>[font=VOTRE POLICE]
    Votre signature
    [/font]
    </div></div>

    > Le titre. Il se personalise comme le comme le texte, MIS A PART QUE. Je vous autorise a utiliser le BBcode si vous n'arrivez pas a le personaliser avec le HTML. Pour cela il vous suffit de l'encadrer avec des balises BBcode. ( j'ai choisi le HTML ) Ci dessous, un titre de 24 px pour une couleur noire. Bien sûr, remplacez le mot "TITRE" par votre titre.


    Code:

    <div style="border: 5px solid #461F15;  -moz-border-radius: 10px; font-size: 13px; color: #; background-color: #8F402C; width: 680px"><span style="color: #000000; font-size: 24px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center"> Orphée </span>[font=VOTRE POLICE]
    Votre signature
    [/font]
    </div></div>

    > Votre signature. Très simple, il vous suffit de remplacer ceci par une image et/ou un texte =3

    Code:

    [center]
    <div class="opacity"><div style="border: 5px solid #461F15;  -moz-border-radius: 10px; font-size: 12; color: #8F402C; background-color: #C4846F; width: 680px"><span style="color: #000000; font-size: 24px; font-weight: bold; font-variant: small-caps; padding-left: 20px;" align="center">[size=24] [center]Orphée[/center] [/size]</span>[font=Georgia][center]
    [img]http://i35.tinypic.com/fy34f9.jpg[/img][/center]
    La vie est une partie de poker. Rien ne se gagne. Rien ne se perd. Tout s'échange.
    [/font]
    </div></div>[/center]

    Orphée

    HTML & CSS n°2 Fy34f9
    La vie est une partie de poker. Rien ne se gagne. Rien ne se perd. Tout s'échange.



    Cela vous semble compliqué ? Voir, irréalisable ? Ne vous inquiétez pas, avec le temps, ça viendra =)

Revenir en haut Aller en bas
https://warriors-of-hell.forumgratuit.org
 

HTML & CSS n°2

Voir le sujet précédent Voir le sujet suivant Revenir en haut 

 Sujets similaires

-
» HTML & CSS n°3
» HTML & CSS n°1
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Préambule :: Question & Idées :: Questions-
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit