Lier html, css, javasript

K3vin Orton -  
Bonjour,

Je voulais savoir comment je pourrai faire pour intégrer le code js et css dans la page html (je ne veux pas de lien js ou css, je veux carrément prendre leurs codes et les intégrer dans la page html). Voici le lien contenant les trois codes que je souhaiterai intégré dans une seule page : https://codepen.io/tamak/pen/hzEer

Et voici le code html que j'ai essayé d'intégrer le css et le js mais l'animation ne marche pas alors que le css est bien passé : 
<!DOCTYPE html>
<html>
<head>

<style>
body {
  font-family: 'Ubuntu', sans-serif;
  width:960px;
}

p{
  color:#525252;
  font-size:12px;
}

.skillbar {
 position:relative;
 display:block;
 margin-bottom:15px;
 width:100%;
 background:#eee;
 height:35px;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 -webkit-transition:0.4s linear;
 -moz-transition:0.4s linear;
 -ms-transition:0.4s linear;
 -o-transition:0.4s linear;
 transition:0.4s linear;
 -webkit-transition-property:width, background-color;
 -moz-transition-property:width, background-color;
 -ms-transition-property:width, background-color;
 -o-transition-property:width, background-color;
 transition-property:width, background-color;
}

.skillbar-title {
 position:absolute;
 top:0;
 left:0;
width:110px;
 font-weight:bold;
 font-size:13px;
 color:#ffffff;
 background:#6adcfa;
 -webkit-border-top-left-radius:3px;
 -webkit-border-bottom-left-radius:4px;
 -moz-border-radius-topleft:3px;
 -moz-border-radius-bottomleft:3px;
 border-top-left-radius:3px;
 border-bottom-left-radius:3px;
}

.skillbar-title span {
 display:block;
 background:rgba(0, 0, 0, 0.1);
 padding:0 20px;
 height:35px;
 line-height:35px;
 -webkit-border-top-left-radius:3px;
 -webkit-border-bottom-left-radius:3px;
 -moz-border-radius-topleft:3px;
 -moz-border-radius-bottomleft:3px;
 border-top-left-radius:3px;
 border-bottom-left-radius:3px;
}

.skillbar-bar {
 height:35px;
 width:0px;
 background:#6adcfa;
 border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
}

.skill-bar-percent {
 position:absolute;
 right:10px;
 top:0;
 font-size:11px;
 height:35px;
 line-height:35px;
 color:#ffffff;
 color:rgba(0, 0, 0, 0.4);
}

</style>

jQuery(document).ready(function() {
  jQuery(".skillbar").each(function() {
    jQuery(this).find(".skillbar-bar").animate(
      {
        width: jQuery(this).attr("data-percent")
      },
      6000
    );
  });
});

</head>

<body>

<h1>jQuery & CSS3 Skills Bar</h1>

<div class="skillbar clearfix " data-percent="20%">
 <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
 <div class="skillbar-bar" style="background: #e67e22;"></div>
 <div class="skill-bar-percent">20%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="25%">
 <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span></div>
 <div class="skillbar-bar" style="background: #3498db;"></div>
 <div class="skill-bar-percent">25%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="50%">
 <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span></div>
 <div class="skillbar-bar" style="background: #2c3e50;"></div>
 <div class="skill-bar-percent">50%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="40%">
 <div class="skillbar-title" style="background: #46465e;"><span>PHP</span></div>
 <div class="skillbar-bar" style="background: #5a68a5;"></div>
 <div class="skill-bar-percent">40%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="75%">
 <div class="skillbar-title" style="background: #333333;"><span>Wordpress</span></div>
 <div class="skillbar-bar" style="background: #525252;"></div>
 <div class="skill-bar-percent">75%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="100%">
 <div class="skillbar-title" style="background: #27ae60;"><span>SEO</span></div>
 <div class="skillbar-bar" style="background: #2ecc71;"></div>
 <div class="skill-bar-percent">100%</div>
</div> <!-- End Skill Bar -->

<div class="skillbar clearfix " data-percent="70%">
 <div class="skillbar-title" style="background: #124e8c;"><span>Photoshop</span></div>
 <div class="skillbar-bar" style="background: #4288d0;"></div>
 <div class="skill-bar-percent">70%</div>
</div> <!-- End Skill Bar -->

<p><strong>SOURCE :</strong> http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/</p>

</body>
</html>


Je vous remercie d'avance.

2 réponses

  1.  Grandasse_
    Bonjour,
    Il manque les balises de script, le document doit être structuré comme suit : 
    <html>
 <head>
  <style type="text/css">
  //CSS
  </style>
  <script type="text/javascript">
  //JS
  </script>
 </head>
 <body>
 </body>
</html>

    2
    1. K3vin Orton Auteur
      J'ai fait comme tu as dit, mais ça ne marche toujours pas
      0
  2. RAD ZONE Contributeur
    Salut

    c est normal tu n a pas mis de lien vers la librairie jquery !!!!!
    la je t ai mis un lien vers la librairie heberger sur google app ,
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    mais tu peu la telecharger et l heberger toi meme!
    https://jquery.com/download/ 
    <!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    <!--
    body {
      font-family: 'Ubuntu', sans-serif;
      width: 960px;
    }

    p{
      color: #525252;
      font-size: 12px;
    }

    .skillbar {
      position: relative;
      display: block;
      margin-bottom: 15px;
      width: 100%;
      background: #eee;
      height: 35px;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      -webkit-transition: 0.4s linear;
      -moz-transition: 0.4s linear;
      -ms-transition: 0.4s linear;
      -o-transition: 0.4s linear;
      transition: 0.4s linear;
      -webkit-transition-property: width, background-color;
      -moz-transition-property: width, background-color;
      -ms-transition-property: width, background-color;
      -o-transition-property: width, background-color;
      transition-property: width, background-color;
    }

    .skillbar-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 110px;
      font-weight: bold;
      font-size: 13px;
      color: #ffffff;
      background: #6adcfa;
      -webkit-border-top-left-radius: 3px;
      -webkit-border-bottom-left-radius: 4px;
      -moz-border-radius-topleft: 3px;
      -moz-border-radius-bottomleft: 3px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    .skillbar-title span {
      display: block;
      background: rgba(0, 0, 0, 0.1);
      padding: 0 20px;
      height: 35px;
      line-height: 35px;
      -webkit-border-top-left-radius: 3px;
      -webkit-border-bottom-left-radius: 3px;
      -moz-border-radius-topleft: 3px;
      -moz-border-radius-bottomleft: 3px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }

    .skillbar-bar {
      height: 35px;
      width: 0px;
      background: #6adcfa;
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
    }

    .skill-bar-percent {
      position: absolute;
      right: 10px;
      top: 0;
      font-size: 11px;
      height: 35px;
      line-height: 35px;
      color: #ffffff;
      color: rgba(0, 0, 0, 0.4);
    }
    -->
    </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    jQuery(document).ready(function()
      {
        jQuery('.skillbar').each(function()
          {
            jQuery(this).find('.skillbar-bar').animate(
              {
              width: jQuery(this).attr('data-percent')
              }, 6000
            );
          }
        );
      }
    );
    </script>
  </head>
  <body>
    <h1>
      jQuery & CSS3 Skills Bar
    </h1>
    <div class="skillbar clearfix" data-percent="20%">
      <div class="skillbar-title" style="background: #d35400;">
        <span>HTML5</span>
      </div>
      <div class="skillbar-bar" style="background: #e67e22;"></div>
      <div class="skill-bar-percent">
        20%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="25%">
      <div class="skillbar-title" style="background: #2980b9;">
        <span>CSS3</span>
      </div>
      <div class="skillbar-bar" style="background: #3498db;"></div>
      <div class="skill-bar-percent">
        25%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="50%">
      <div class="skillbar-title" style="background: #2c3e50;">
        <span>jQuery</span>
      </div>
      <div class="skillbar-bar" style="background: #2c3e50;"></div>
      <div class="skill-bar-percent">
        50%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="40%">
      <div class="skillbar-title" style="background: #46465e;">
        <span>PHP</span>
      </div>
      <div class="skillbar-bar" style="background: #5a68a5;"></div>
      <div class="skill-bar-percent">
        40%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="75%">
      <div class="skillbar-title" style="background: #333333;">
        <span>Wordpress</span>
      </div>
      <div class="skillbar-bar" style="background: #525252;"></div>
      <div class="skill-bar-percent">
        75%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="100%">
      <div class="skillbar-title" style="background: #27ae60;">
        <span>SEO</span>
      </div>
      <div class="skillbar-bar" style="background: #2ecc71;"></div>
      <div class="skill-bar-percent">
        100%
      </div>
    </div><!-- End Skill Bar -->
    <div class="skillbar clearfix" data-percent="70%">
      <div class="skillbar-title" style="background: #124e8c;">
        <span>Photoshop</span>
      </div>
      <div class="skillbar-bar" style="background: #4288d0;"></div>
      <div class="skill-bar-percent">
        70%
      </div>
    </div><!-- End Skill Bar -->
    <p>
      <strong>SOURCE :</strong> http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/
    </p>
  </body>
</html>


    a+
    1

    Discussions similaires

    Impossible de cliquer sur "Lier au précédent"
    Vainesis

    3 réponses
    Désactiver "identique au précédent".
    Izza1959

    1 réponse
    Comment relier un fichier HTML étant dans un folder au CSS
    lecodeur_2485

    1 réponse
    Lier au précédent
    Marin0000000

    2 réponses
    Apache2 accès à autre que /var/www/html/index.html
    merithes

    3 réponses