• Les Codes HTML

    C'est ici que vous allez trouver vos codes pour vos fiches !!

    Alors si il y a quelque chose que vous ne comprenez pas, n'hésitez pas à laisser un commentaire :)

    Si vous êtes sur EkaBlog, venez visiter le forum :D

  • Hello, je vais vous apprendre à faire votre propre cadre.

     

    Pour faire un code HTML, il faut assembler des balises.

    Pour vous montrer, je vais vous expliquer à partir d'un code qui est séparé en deux parties (la première le fond et la deuxième le cadre) :

     

    <div style="text-align: -webkit-auto; background-image: url(http://images.fineartamerica.com/images-medium-large-5/pastel-sky-sunset-texture-jacek-malipan.jpg); margin: 0px 0px 0px 0px; border: 1px solid rgb(102, 51, 51); width: 498px;">
    <div style="text-align: center;"><br></div>


    <div style="background-image: url(http://www.zupmage.eu/i/NNSoP4GVKv.png); margin: 0px 0px 0px 15px; padding: 10px 10px 10px 10px; width: 400px; border: 1px solid rgb(255, 255, 255);">
    <div align="center" style="text-align: center;">
    <div align="center">Texte</div>
    <div align="center"><br></div>
    </div>
    </div>
    <br></div>

     

    Balises : 

    Width: ...px = Largeur du cadre/du fond en pixels (px). La largeur d'une fiche Lapino est de 500 pixels.

    Background-image: url(...) = Image du fond.

    Margin: ..px ..px ..px ..px = C'est la marge entre le bord de la fiche et le cadre. Dans l'ordre : haut, droite, bas, gauche.

    Padding: ..px ..px ..px ..px = C'est la distance entre le texte et le cadre. Se règle de même façon que les marges.

    Border: 1px solid rgb(.., .., ..) = Les bordures du cadre.

    • 1px c'est la largeur de la bordure (Il faut mettre au moins 4px si vous avez une double bordure)
    • Solid c'est la forme, vous pouvez aussi mettre : dotted (à pois); dashed (pointillés); ou double. 
    • Couleur : sois mettre : rgb(rouge, vert, bleu,) sois #code de la couleur.

    [Tuto] Créer son propre cadre Clique sur l'image pour l'agrandir.

     

     

     

     

    Remarques :

    • Il faut mettre des ; entre les balises
    • Il ne faut pas oublier les </div> qui "ferment" les codes. Pour chaque <div> il faut un </div>
    • <br> permet de sauter une ligne.

    8 commentaires
  • -Code pour les fiches Lapino.-

    Fond

    ★ Créer un fond de fiche :

    <div style="background: url(URL DU FOND) no-repeat #FFFFFF; width: 480px; padding: 10px 10px 10px 10px;">
    <div style="text-align: left;">Texte</div></div>

     

    Repeat: Le fait de répéter ou non le fond :

    - no-repeat = pas de répétition du fond.

    - repeat-y = répétition verticale.

    - repeat-x = répétition horizontale du fond.

    - repeat = répétition  dans tous les sens du fond.

    #Couleur = la couleur derrière le fond.

    Background-image: url(...) = Image du fond.

    Width: ...px = Largeur du cadre/du fond en pixels (px). La largeur d'une fiche Lapino est de 500 pixels.

    Padding: ..px ..px ..px ..px = C'est la distance entre le texte et le cadre. Dans l'ordre : haut, droite, bas, gauche.


    1 commentaire
  • -Code pour les fiches Lapino.-

    Cadre

    ★ Cadre arrondi, à droite :

    <div style="background-image: url(URL DU FOND); width: 488px; border: 1px solid #000; padding: 5px 5px 5px 5px; margin: auto;">
    <div style="text-align: center;"><br></div>
    <div align="left" style="margin: auto auto auto 250px; padding: 5px; background-color: rgba(255, 255, 255, 0.5); border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; border: 1px solid #000; width: 200px;">
    <div style="text-align: center;">Texte</div>
    </div><div style="text-align: center;"><br></div>
    </div>

     

     
     
     
     
    Texte
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    2 commentaires
  • -Code pour les fiches Lapino.-

    Cadre

    ★ Cadre transparent contours blancs :

    <div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; border: 1px solid #663333; width: 498px;"><div style="text-align: center;"><br></div>
    <div style="background-color: rgba(255, 255, 255, 0.5); margin: auto; padding: 20px 20px 20px 20px; width: 400px; border: 1px solid #ffffff;">
    <div style="text-align: center;">Texte</div>
    </div><div style="text-align: center;">
    <br></div>
    </div>

     


     
    Texte
     
     
     
     
     
     
     
     
     
          

    2 commentaires
  • -Code pour les fiches Lapino.-

    Cadre

    ★ Cadre arrondi blanc, à droite :

     <div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; border: 1px solid #663333; width: 498px;">
    <div style="text-align: center;"></div>
    <div align="right">
    <div style="background-color: rgba(255, 255, 255, 0.9); padding: 20px 20px 20px 20px; width: 200px; border: 0px solid white; border-bottom-left-radius: 75px; box-shadow: 0px 0px 10px #000">
    <div style="text-align: center;">Texte</div></div><br>
    </div>
    </div>  

     
     
    Texte
     
     
     
     
     
     
     
     
     
     

    1 commentaire
  • -Code pour les fiches Lapino.-

    Cadre

    ★ Cadre transparent en amande contours blancs :

    <div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; border: 1px solid #663333; width: 498px;">

    <div style="text-align: center;"><br></div>

    <div style="background-color: rgba(255, 255, 255, 0.6); margin: auto; padding: 20px 20px 20px 20px; width: 400px; border-top: 4px solid white; border-bottom: 1px solid white; border-left: 4px solid white; border-right: 1px solid white; border-top-left-radius: 0px; border-top-right-radius: 100px; border-bottom-right-radius: 0px; border-bottom-left-radius: 100px; box-shadow: 0px 0px 5px #000">

    <div style="text-align: center;">Texte<br></div></div><br>

    </div>

     

     
     
    Texte
     
     
     
     
     
     
     
     
      

    3 commentaires
  • -Code pour les fiches Lapino.-

    Cadre

    ★ Cadre rectangulaire, à droite :

    <div style="background-image: url(URL DU FOND); width: 488px; border: 1px solid #000; padding: 5px 5px 5px 5px; margin: auto;">
    <div style="text-align: center;"><br></div>
    <div align="left" style="margin: auto auto auto 235px; padding: 5px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #000; width: 220px;">
    <div style="text-align: center;">Texte</div>
    </div><div style="text-align: center;"><br></div>
    </div>

     
     
      
     Texte
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

     

    ★ Cadre rectangulaire, à gauche :

    <div style="background-image: url(URL DU FOND); width: 488px; border: 1px solid #000; padding: 5px 5px 5px 5px; margin: auto;">
    <div style="text-align: center;"><br></div>
    <div align="left" style="margin: auto auto auto 15px; padding: 5px; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #000; width: 220px;">
    <div style="text-align: center;">Texte</div>
    </div><div style="text-align: center;"><br></div>
    </div>

     
     
     
     
    Texte
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    1 commentaire
  • -Code pour les fiches Lapino.-

    Cadre

    ★ Cadre transparent, sans contours :

    <div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; width: 500px;">
    <div style="text-align: center;"><br></div>
    <div style="text-align: center;"><br></div>
    <div style="text-align: center;"><br></div>
    <div style="text-align: center;"><br></div>
    <div style="background-color: rgba(255, 255, 255, 0.7); margin: auto; padding:20px 20px 20px 20px; width: 400px;">
    <div style="text-align: center;">Texte</div>
    </div>
    </div>


     
     
     
     
    Texte
     
     
     
     
     
     
     
     
     
     
     
     

    9 commentaires
  • -Code pour les fiches Lapino.-

     Cadres

    ★ Cadre rouge :

    <center><div class="erreur">Texte</div></center>

     

    Codes Cadres Divers

     

    ★ Cadre blanc : 

    <div class="texteClair"><b>Texte</b></div>

     

    Codes Divers

     


    2 commentaires
  • -Code pour les fiches Lapino.-

    Curseur et InfoBulles

    ★ Curseur :

    Ça au début du HTML : 

    <div style="cursor: url('URL du curseur'), pointer;">

    Et ça à la fin du HTML :

    </div>

    Codes Curseurs

     

    ★ InfoBulle blanc :

    <span TITLE="Texte de l'infobulle">

    Codes CurseursCodes Curseurs


    15 commentaires
  • -Code pour les fiches Lapino.-

    Cadre

    ★ Double cadre blanc avec pseudo :

    <div style="text-align: -webkit-auto; background-image: url('URL DU FOND'); margin: auto; border: 1px solid #663333; width: 498px;"><div style="text-align: center;"><br></div><div style="text-align: center;"><font size="30" color="#ffffff" style="text-shadow: 2px 2px 2px #505050;"><b>Pseudo</b></font></div><div style="text-align: center;"><br></div>
    <div style="background-color: rgba(255, 255, 255, 1); margin: 0 ; padding: 5px; width: 300px; box-shadow: 2px 2px 2px #505050;">
    <div style="text-align: center;">Texte</div>
    </div><div style="text-align: center;"><br></div>
    <div style="background-color: rgba(255, 255, 255, 1); margin: auto; padding: 20px 20px 20px 20px; width: 400px; box-shadow: 2px 2px 2px #505050;">
    <div style="text-align: center;">Texte</div>
    </div><div style="text-align: center;"><br></div>
    </div>

     

     
    Pseudo
     
    Texte
     
     
     
    Texte
     
     
     
     
     
     

    4 commentaires
  • -Code pour les fiches Lapino.-

    En dehors de sa fiche

    ★ Écrire à droite de sa fiche :

    <center style="text-align: left; left: 575px; top: 570px; width: 320px; position: absolute;">Texte </center>

     

    Left: ..px = Distance à partir de la gauche de la fiche.

    Top: ..px = Distance à partir du haut de la fiche.


    8 commentaires
  • -Code pour les fiches Lapino.-

    Cadre

    ★ Fiche en deux parties :

     

    <div style="background-color: #ffb27f; width: 500px; padding: 0px 0px 0px 0px;">

    <div style="text-align: left;">

    <div style="background-color: white ; margin:auto; width: 420px; padding: 10px 10px 10px 10px;">

    <div style="text-align: center;">

    <div style="background: url(http://www.zupmage.eu/i/ELo69YGn3u.png) no-repeat #FFFFFF; width: 420px; height: 100px; padding: 100px 0px 0px 0px">

    <div style="text-align: left;">

    <div style="height: 100px; width: 200px; overflow: auto; margin: 0px 0px 0px 205px;">

    <div align="center"><font size="7" face="trebuchet ms" color="#ff6600"></font><div style="text-align: left; text-shadow: rgb(136, 136, 136) -0px 2px 4px;"><font size="7" face="trebuchet ms" color="#ff6600"><b>Pseudo</b></font></div></div></div></div></div>

    <div style="text-align: center;"><br></div>

    <div style="text-align: center;">

    <div>

    <div style="float: right; width: 35%; margin: 0px 0px 0px 10px;">

    <div style="border: 1px solid #ff6600; border-radius: 35px;> <div align=">

    <div><br></div>

    <div><b><font color="#ff6600">Texte</font></b></div>

    <div><br></div>

    </div>

    </div>

    </div>

    </div>

    <div style="text-align: center;"><b><font color="#ff6600">Texte</font></b></div>

    <div style="text-align: center;"><b><br></b></div>

    <div style="text-align: center;"><br></div><div style="text-align: center;"><br></div>

    </div>

    </div>

    </div>

    </div>

     

     Moi !
     


    Texte






    Texte
     
     
     
     
     
     
     
     
     

     

    EDIT : Si vous voulez changer la couleur du fond du cadre et du texte, il faut changer les éléments en gras dans le code.


    34 commentaires
  • -Code pour les fiches Lapino.-

    Image

    ★ Choisir la taille d'une image :

    <img height="Hauteur en pixels" width="Largeur en pixels"
    src="URL de l'image"/>
    <br />

    Je ne vous conseil pas de mettre la hauteur et la largeur, sinon l'image est déformée, donc mettez sois l'un, sois l'autre.

     


    1 commentaire
  • -Code pour les fiches Lapino.-

    Vidéo & image

    Tout d'abord, il faut choisir votre musique ou vidéo. Rendez vous YouTube, sur la page de votre vidéo/musique.

    Regardez l'url de la page, et copier le code qui se trouve derrière V=

    Musique & Vidéo

    Voilà le code de votre musique/vidéo, plus qu'à le coller dans un des codes ci-dessous :

     

    ★ Code vidéo normale :

    <object width="500" height="310" data="http://www.youtube.com/v/CODE?"></object> 

     

    ★ Code vidéo qui se lance toute seule :

    <object width="500" height="310" data="http://www.youtube.com/v/CODE?autoplay=1;" type="application/x-shockwave-flash"></object>

     

    ★ Code musique :

    <object width="0" height="0" data="http://www.youtube.com/v/CODE?autoplay=1;" type="application/x-shockwave-flash"></object>


    19 commentaires
  • -Code pour les fiches Lapino.-

    Ascenseur 

    ★ Voici le code ascenseur :

    <div style="height: 330px; width: 500px; overflow: auto;"><div align="center">Texte</div></div>

     

    Height: ...px = Hauteur de l'ascenseur en pixels

    Width: ...px = Largeur de l'ascenseur en pixels

     


    13 commentaires
  • -Code pour les fiches Lapino.-

    Texte

    ★ Voici un code pour changer la police de votre texte :

    <font color="#000000" face="Nom de la police" size="5">Texte</font>

    Texte

     

    ★ Un autre code pour mettre de l'ombre derrière le texte :

    <div style="text-shadow: rgb(119, 119, 119) 0px 0px 5px;" align="center">Texte<br></div>

    Texte

     

    ★ Un texte qui défile :

    <marquee>Texte</marquee>

    Texte

     

        ★ Un texte qui bouge horizontalement :

    <marquee behavior="alternate"><marquee="" width="150">Texte</marquee=""></marquee> 


    11 commentaires
  •  -Code pour les fiches Lapino.-

    Cadres

    ★ Trois cadres :

    <div style="background-color: NomDeLaCouleur*; width: 500px; height : 435px; margin: auto;">
    <div style="text-align: center;"><br></div>
    <div style="float: left; width: 40%;">
    <div style="background-color: rgba(255, 255, 255, 1); margin: auto; padding: 10px 10px 10px 10px; width: 130px; height: 130px; border: 0px solid #3399cc; border-radius: 10px; box-shadow: 0px 0px 6px #8F8F8F;">
    <div style="height: 131px; width: 131px; overflow: auto;">
    <div style="text-align: center;">Texte / image<br></div>
    </div>
    </div>
    <div style="text-align: center;"><br></div>
    </div>
    <div style="float: right; width: 60%;">
    <div style="background-color: rgba(255, 255, 255, 1); margin: left; padding: 10px 10px 10px 10px; width: 254px; height: 130px; border: 0px solid #3399cc; border-radius: 10px; box-shadow: 0px 0px 6px #8F8F8F;">
    <div style="height: 130px; width: 254px; overflow: auto;">
    <div style="text-align: center;">Texte / image</div>
    </div>
    </div>
    <div style="text-align: center;"><br></div>
    </div>
    <div style="float: left; width: 100%;">
    <div style="background-color: rgba(255, 255, 255, 1); margin: auto; padding: 15px 15px 15px 15px; width: 420px; border: 0px solid #3399cc; border-radius: 10px; box-shadow: 0px 0px 6px #8F8F8F;">
    <div style="height: 200px; width: 420px; overflow: auto;">
    <div style="text-align: center;">Texte / image</div>
    </div>
    </div></div></div>

     

    *J'ai mis le nom des toutes les couleurs ICI

     

     
     
    Texte / image
     
    Texte / image
     
    Texte / image

    26 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique