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

Ecole de Ste Louise


 
AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment : -39%
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
Voir le deal
399 €

Ecole de Ste Louise :: Flood :: HTML
 

 HTML :: Codes de base

Aller en bas 
3 participants
AuteurMessage
Aïsha
♪ Admine Caly
Aïsha


Messages : 114
Date d'inscription : 08/02/2011
Age : 26
Localisation : DTC / Ahem.

Personnage
Nom/prénom(s):: Aïsha
Age:: 16 printemps
HTML :: Codes de base Empty
MessageSujet: HTML :: Codes de base   HTML :: Codes de base EmptyMar 17 Mai - 17:23
    Bonjour/Bonsoir les gens =)

    Un petit message rapide pour vous expliquer un peu mieux et répondre aux questions qui se posent déjà.
    Qu'est-ce que le HTML ? C'est, en fait assez difficile à expliquer. C'est une sorte de langage, basé sur des codes... Chaque code, une fois publié, donnera un "effet".
    Pour vous donner un exemple :

    Si vous tapez ce code sur votre ordinateur :
    Code:
    <span style="font-size: 11px; line-height: normal"><div style="border: solid ; border-width:3px ; border-color:#bbbfbb; width: 540px; -moz-border-radius: 10px;padding:5px "><div style="margin:auto;text-align:center;width:100%"><DIV align=justify><br>texte texte texte texte texte texte </DIV><br></span></div></div>
    Pour l'instant, cela ne ressemble à rien. Mais une fois publié, vous obtiendrez cela :


    texte texte texte texte texte texte



    Donc, en résumé, pour faire de jolis effets, il vous suffit de faire copier/coller. Facile, non ?

    Après, vous pouvez bien sûr varier ce code : rétrécir ou épaissir le cadre bleu, le changer de couleur, ajouter ou enlever des éléments à l'intérieur...
    Tout vous sera expliqué en détail dans les commentaires suivants.



    Ce sujet traitera des codes de base, que vous pouvez utiliser partout sans trop de soucis. Nous rappelons que si vous avez des questions, vous pouvez me contacter à tout moment par MP =)

    En espérant que cette explication vous aura un peu éclairé -c'était le don pour expliquer d'Aïsha.
    Bonne journée à tous !
Revenir en haut Aller en bas
http://rpgvampire.forumactif.com/
Aïsha
♪ Admine Caly
Aïsha


Messages : 114
Date d'inscription : 08/02/2011
Age : 26
Localisation : DTC / Ahem.

Personnage
Nom/prénom(s):: Aïsha
Age:: 16 printemps
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptyMar 17 Mai - 17:44
    Nous allons commencer par le plus simple de tous les codes : le cadre bleu donné en exemple au dessus. C'est un code de base, qui vous servira toute votre vie de geekage et qui vous tire souvent des pétrins compliqués =) Le mieux avec ça, c'est que une fois que vous avez compris ce code, vous en comprendrez beaucoup d'autres.

    Stoppons le blabla inutile, commençons dès maintenant les explications. ( tous les codes seront sur ce modèle là What a Face )





    Effet voulu ::

    texte texte texte texte texte texte



    Code ::
    Code:
    <span style="font-size: 11px; line-height: normal"><div style="border: solid ; border-width:3px ; border-color:#bbbfbb; width: 540px; -moz-border-radius: 10px;padding:5px "><div style="margin:auto;text-align:center;width:100%"><DIV align=justify><br>texte texte texte texte texte texte </DIV><br></span></div></div>





    Variantes ::
    1°/ Le texte.
    La première chose à faire avec ce code, c'est de remplacer les mots "texte texte texte" dans le cadre par d'autres mots -à quoi cela servirait-il sinon ?
    C'est aussi la chose la plus simple à faire, et ce sur tous les codes.
    Cherchez dans le code cette ligne :
    Code:
    <DIV align=justify><br>texte texte texte texte texte texte </DIV>
    Supprimez tous les mots "texte texte texte", et remplacez-les par les mots que vous voulez avoir.

    Code:
    <span style="font-size: 11px; line-height: normal"><div style="border: solid ; border-width:3px ; border-color:#bbbfbb; width: 540px; -moz-border-radius: 10px;padding:5px "><div style="margin:auto;text-align:center;width:100%"><DIV align=justify><br> BlaBla... </DIV><br></span></div></div>

    BlaBla...









    2°/ La couleur du cadre.
    Reprenons le code donné en tout premier (avec les mots "texte texte texte"). Pour l'instant, notre cadre est d'un magnifique bleu vaseux qui ne s'accorde pas du tout avec le thème actuel. Il est hors de question de le laisser de cette couleur TT'
    Cherchez dans votre code cette ligne :
    Code:
    <div style="border: solid ; border-width:3px ; border-color:#bbbfbb; width: 540px; -moz-border-radius: 10px;padding:5px ">
    Et plus précisément ces mots :
    Code:
     border-color:#bbbfbb;

    Remplacez le "#bbbfbb" par la couleur de votre choix (par exemple, du rouge sombre : darkred )
    Code:
     border-color:darkred;



    texte texte texte texte texte texte




    3°/ L'épaisseur du cadre.
    Toujours avec notre premier code. Vous notez que sur l'exemple ci-dessus, le cadre fait 3px d'épaisseur. Si vous voulez augmenter ou réduire cette donne, trouvez cette ligne dans le code :
    Code:
    <div style="border: solid ; border-width:3px ;
    Il ne vous reste plus qu'à changer le nombre 3 en le nombre de votre choix -par exemple, avec 5px :


    texte texte texte texte texte texte






    4°/ La largeur du cadre.
    Cherchez dans le premier code la ligne :
    Code:
    <div style="border: solid ; border-width:3px ; border-color:#bbbfbb; width: 540px;

    Ici, la largeur du cadre est de 540px / changez-là en le nombre voulu, par exemple 200px :


    texte texte texte texte texte texte









Voilà, ce premier code est terminé =)
Rassurez-vous, maintenant que vous avez compris le principe, les tutos seront plus courts ^^
Si vous avez d'autres questions, envoyez-les par MP.

Revenir en haut Aller en bas
http://rpgvampire.forumactif.com/
Aïsha
♪ Admine Caly
Aïsha


Messages : 114
Date d'inscription : 08/02/2011
Age : 26
Localisation : DTC / Ahem.

Personnage
Nom/prénom(s):: Aïsha
Age:: 16 printemps
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptySam 21 Mai - 15:20
    Deuxième effet, que vous retrouvez par exemple dans la PA de ce forum / C'est sans doute l'un des plus utilisés ^^


    Effet voulu ::

    texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte


    Code ::
    Code:
    <div style="padding-left:5px;padding-right:5px;padding-top:8px;padding-bottom:8px;height:150px;overflow:auto;">
    texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div>

    [ Il paraît très long, mais en fait, il ne fait qu'une ligne, le reste, ce sont les mots "texte texte"... ]




    Variantes ::
    Vous pouvez juste changer la taille de la roulette à droite : dans la première ligne, cherchez
    Code:
    height:150px;
    Et remplacez le nombre 150px par le nombre de votre choix -par exemple 80px :


    texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte

Revenir en haut Aller en bas
http://rpgvampire.forumactif.com/
Aïsha
♪ Admine Caly
Aïsha


Messages : 114
Date d'inscription : 08/02/2011
Age : 26
Localisation : DTC / Ahem.

Personnage
Nom/prénom(s):: Aïsha
Age:: 16 printemps
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptySam 21 Mai - 15:24
    Troisième effet, juste pour la fantaisie =)

    Effet voulu



    Code ::
    Code:
    <form name="MenuderoulantselonDark" method="POST">
    <select name="wxlmenu" size=1 style="font-family: Georgia; color: darkgrey; border: double; font-size: 12; background: #FFFFFF;">
    <option>TEXTE</option>
    <option>Texte</option>
    <option>Texte</option>
    <option>Texte</option>
    <option>Texte</option><option>Texte</option>
    <option>Texte</option>
    </select></form>

    [ Comme je n'utilise jamais ce code, je ne connais pas encore les variantes. Je vais faire des tests dans les jours à venir =)]
Revenir en haut Aller en bas
http://rpgvampire.forumactif.com/
Aïsha
♪ Admine Caly
Aïsha


Messages : 114
Date d'inscription : 08/02/2011
Age : 26
Localisation : DTC / Ahem.

Personnage
Nom/prénom(s):: Aïsha
Age:: 16 printemps
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptyVen 24 Juin - 12:43
    Un p'tit truc rapide et inutile What a Face

    Effet Voulu ::
    Texte

    Code ::
    Code:
    <input type="checkbox" checked=""  value=Identity" name="option1"> Texte
Revenir en haut Aller en bas
http://rpgvampire.forumactif.com/
Solane
Rose
Solane


Messages : 28
Date d'inscription : 11/05/2011

Personnage
Nom/prénom(s)::
Age::
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptyLun 29 Aoû - 12:13
merci c super ces tuto

  • EDIT Caly' :: Contente que ça te plaise =D
Revenir en haut Aller en bas
Madeleine
Rose
Madeleine


Messages : 71
Date d'inscription : 10/05/2011
Age : 25
Localisation : Ecole de Ste Louise

Personnage
Nom/prénom(s)::
Age::
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptyJeu 1 Sep - 16:46
idem ils m'aident beaucoup =)
Revenir en haut Aller en bas
Aïsha
♪ Admine Caly
Aïsha


Messages : 114
Date d'inscription : 08/02/2011
Age : 26
Localisation : DTC / Ahem.

Personnage
Nom/prénom(s):: Aïsha
Age:: 16 printemps
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptyMer 12 Oct - 13:31
    Effet Voulu ::



    Texte



    Code ::
    Code:
    <br><center><div style="margin-top:-20px;text-align: center; width: 100%; width: 500px; height: 50px; -moz-border-radius-topright: 100px; -moz-border-radius-bottomleft: 100px; -moz-box-shadow: 0px 3px 3px 3px #000000;"><br><div style="margin: auto; "><div style="margin-top:-10px;font-size: 30px; line-height: normal;font-family:ballpark;color:#000000;"> Texte </div></div></div></center><br>
Revenir en haut Aller en bas
http://rpgvampire.forumactif.com/
Aïsha
♪ Admine Caly
Aïsha


Messages : 114
Date d'inscription : 08/02/2011
Age : 26
Localisation : DTC / Ahem.

Personnage
Nom/prénom(s):: Aïsha
Age:: 16 printemps
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptyMer 12 Oct - 13:39
    Encore un truc inutile What a Face

    Effet Voulu ::


    Code ::
    Code:
    <div><center><div style="width: 380px; height: 200px; -moz-border-radius-topleft: 100px; -moz-border-radius-bottomright: 100px; background-repeat: no-repeat; background-position: center top; border: 5px solid dimgray; padding: 7px; background-image: url('VOTRE IMAGE ICI');"></center></div>

    Variante ::
    1°) Ajouter une image à l'intérieur du cadre.
    Prenez l'adresse de l'image ( clic droit, et "copier l'adresse de l'image" ), et collez-là à la place de VOTRE IMAGE ICI >
    Code:
    background-image: url('VOTRE IMAGE ICI');
    Par exemple :
    Code:
    background-image: url('http://www.barbichou.com/wp-content/uploads/2010/11/fleurs-balancoire-400x220.jpg);


Revenir en haut Aller en bas
http://rpgvampire.forumactif.com/
Aïsha
♪ Admine Caly
Aïsha


Messages : 114
Date d'inscription : 08/02/2011
Age : 26
Localisation : DTC / Ahem.

Personnage
Nom/prénom(s):: Aïsha
Age:: 16 printemps
HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base EmptyDim 20 Nov - 10:33
    Effet voulu ::



    BlaBla BlaBla
    Blablablabla ❥


    Code utilisé ::
    Code:
    <br><div style="background-color: #fff;border-left: 4px solid #000000;border-right: 4px solid #000000; width: 500px; padding: 20px; margin: auto;-moz-transform: rotate(2deg);-webkit-transform: rotate(2deg); -moz-box-shadow: 0px 0px 10px #000000;-webkit-box-shadow: 0px 0px 10px #000000;"> <span style="font-size: 11px; line-height: normal">

    <font style="font-family: Georgia; letter-spacing: 5px; font-size: 40px; color: #000000; text-shadow: 0px 0px 2px #6B25D4; font-style: italic; ">Bla</font><font style="font-family: Georgia; letter-spacing: 5px; font-size: 40px;  color: #000000; text-shadow: 0px 0px 2px #6B25D4; font-style: italic; ">Bla</font> <font style="font-family: Georgia; letter-spacing: 5px;font-size: 40px; color: #000000; text-shadow: 0px 0px 2px #dfb874; font-style: italic; ">BlaBla</font></font>
    [color=#6B25D4]Blablablabla ❥[/color]</div>
Revenir en haut Aller en bas
http://rpgvampire.forumactif.com/
Contenu sponsorisé





HTML :: Codes de base Empty
MessageSujet: Re: HTML :: Codes de base   HTML :: Codes de base Empty
Revenir en haut Aller en bas
 
HTML :: Codes de base
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» HTML :: Explications
» ♣ Besoin d'aide HTML ::
» HTML :: Différentes écritures

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ecole de Ste Louise :: Flood :: HTML-
Sauter vers: