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

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


    votre 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
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    votre commentaire
  • -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
     
     
     
     
     
     
     
     
     
          

    1 commentaire
  • -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
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    votre 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.5); margin: auto; padding:20px 20px 20px 20px; width: 400px;">
    <div style="text-align: center;">Texte</div>
    </div>
    </div>


     
     
     
     
    Texte
     
     
     
     
     
     
     
     
     
     
     
     

    2 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

     


    1 commentaire
  • -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


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


    1 commentaire
  • -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 data="http://youtube.googleapis.com/v/CODE" height="310" width="500"></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>


    4 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

     


    5 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


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