Lier html, css, javasript

Fermé

K3vin Orton Messages postés 57 Date d'inscription vendredi 21 février 2014 Statut Membre Dernière intervention 12 juin 2017 - Modifié le 12 juin 2017 à 03:53
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 12 juin 2017 à 14:14

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:

Lier html, css, javasript
Editeur html - Télécharger - HTML
Espace en html - Astuces et Solutions
Lier calendrier outlook et gmail - Guide
Espace html ✓ - Forum Webmastering
&Nbsp html ✓ - Forum Webmastering

2 réponses

Réponse 1 / 2

Grandasse_ Messages postés 924 Date d'inscription jeudi 28 janvier 2010 Statut Membre Dernière intervention 27 avril 2023 595
12 juin 2017 à 08:10

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>

K3vin Orton Messages postés 57 Date d'inscription vendredi 21 février 2014 Statut Membre Dernière intervention 12 juin 2017 1
12 juin 2017 à 11:57

J'ai fait comme tu as dit, mais ça ne marche toujours pas

Réponse 2 / 2

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 juin 2017 à 14:14

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>

Discussions similaires

la balise <br> ou <br />

Bonjour,

Quelle est la difference entre la balise
et
?

Pourquoi utiliser l'un et pas l'autre ?

Merci d'avance,

Bonjour,

Comme on lit un peu tout et son contraire sur internet, je voudrais savoir quelle est la balise que l'on doit utiliser pour un retour à la ligne en HTML5.

Merci. :)

Configuration: Windows 7 / Chrome 22.0.1229.79

Balise </br>

Bonjour,

Je viens de créer un site web, et je me suis rendu sur W3C afin d'obtenir le www. mais le site m'affiche une erreur "End tag BR" (pour la balise
), ce que je ne comprends pas vu que le balise
n'existe pas (il me semble...)

Pouvez-vous m'aider svp ?
Merci d'avance et bonne journée !

Saut de lignes sans <br/>

Bonjour,

Je ne savait pas comment faire un titre explicite donc voilà mon problème:

Je possède un système de news sur mon site mais à chaque fois lors de l'écriture je dois ajouter la balise
pour faire un saut de ligne.

J'ai cherché su google mais ne sachant pas quelle question poser j'ai du mal a bien cibler ma recherche.

Merci d'avance.

Configuration: Windows 7 / Firefox 5.0

Espace HTML

Bonjour. J'ai une question, surement toute bête, pour certains:
Comment faire pour afficher plusieurs espaces en html ?
Si j'appuie plusieurs fois sur la barre espace, il me prend qu'un seul espace...
Merci !
Guilhem.