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


    5 commentaires
  • -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
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    3 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
     
     
     
     
     
     
     
     
     
     

    2 commentaires
  • -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
     
     
     
     
     
     
     
     
      

    5 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
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    2 commentaires
  • -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
     
     
     
     
     
     
     
     
     
     
     
     

    10 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


    19 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
     
     
     
     
     
     

    9 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.


    11 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.

     


    2 commentaires
  • -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>


    21 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

     


    16 commentaires
  • -Code pour les fiches Lapino.-

    Sommaire cliquable

    ★ Sommaire, à droite :

    <div style="background-image: url(URL DU FOND); width: 500px; margin: 0px;">
    <table>
    <tbody>
    <tr>
    <td>
    <div style="margin: 10px; background-color: rgba(255, 255, 255, 0.5); border: 1px dashed white ; width: 306px; height:305px; box-shadow: 0px 0px 3px #000; overflow: hidden;">
     

    <div style="height: 285px; width: 286px; overflow: auto; padding:10px;">
    <a name="1"></a>
    <div style="text-align: center;"><br>
    <b>Titre Partie 1</b></div>
    <div style="text-align: left;">Texte</div>
    </div>

    <div style="height: 285px; width: 286px; overflow: auto; padding:10px;">
    <a name="2"></a>

    <div style="text-align: center;"><br>
    <b>Titre Partie 2</b></div>
    <div style="text-align: left;">Texte</div>
    </div>
     

    <div style="height: 285px; width: 286px; overflow: auto; padding:10px;">
    <a name="3"></a>
    <div style="text-align: center;"><br>
    <b>Titre Partie 3</b></div>
    <div style="text-align: left;">Texte</div>
    </div>


    <div style="height: 285px; width: 286px; overflow: auto; padding:10px;"></div>
    </div>
    </td>
    <td>
    <div style="margin: 0px; padding:10px; background-color: rgba(255, 255, 255, 0.5); border: 1px dashed white ; width: 130px; height:285px; box-shadow: 0px 0px 3px #000;">
    <div style="text-align: center;"><b><br></b></div>
    <div style="text-align: center;"><b>Sommaire</b></div>
    <div style="text-align: center;"><br></div>
    <div style="text-align: center;"><a href="#1" title="" target="">Titre Partie 1</a></div>
    <div style="text-align: center;"><a href="#2" title="" target="">Titre Partie 2</a><br></div>
    <div style="text-align: center;"><a href="#3" title="" target="">Titre Partie 3</a><br></div>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>


    Titre Partie 1
    Texte

    Titre Partie 2
    Texte

    Titre Partie 3
    Texte
     

     ↑ Ne faites pas attention au modèle, il ne marche pas, mais c'est pour vous donner une idée de l'apparence ↑

    Explications 

    Changez les éléments en rouge.

    Pour modifier le texte qui se trouve sur les parties suivantes, placez votre curseurdans le texte, et descendez avec la touche flèche en bas  jusqu’à arriver à l'endroit que vous voulez éditer. 


    9 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> 


    12 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

    30 commentaires


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