Lier html, css, javasript

K3vin Orton Messages postés 71 Statut Membre -  
RAD ZONE Messages postés 5362 Statut Contributeur -
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.
A voir également:

2 réponses

Réponse 1 / 2
Grandasse_ Messages postés 1164 Date d'inscription   Statut Membre Dernière intervention   599
 
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
K3vin Orton Messages postés 71 Statut Membre 1
 
J'ai fait comme tu as dit, mais ça ne marche toujours pas
0
Réponse 2 / 2
RAD ZONE Messages postés 5362 Statut Contributeur 1 360
 
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

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Impossible de cliquer sur "Lier au précédent"
Vainesis -
Mike-31 -

3 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse