Comment intégrer Javascript et Css dans HTML ?

[invite4a8dbfd8]

Bonjour,
tout est dans le titre, comment mettre mes codes Javascript et Css le tout dans un HTML ?

ceci à été récupéré à ce lien : http://codepen.io/noeldelgado/pen/pGwFx

comme vous le voyez, dans ce site les 3 codes sont proposés mais je n'ai aucune idée de comment tout rassembler dans un HTML.

Merci par avance pour votre aide
-----

[cherbe]

bonjour

comme vous le voyez, dans ce site les 3 codes sont proposés mais je n'ai aucune idée de comment tout rassembler dans un HTML.

Ce sont des bouts de codes, inexploitables en l'état, et d'ailleurs notoirement incomplets.
Si ton but est de reproduire les effets visuels sous ces codes, clique-droit sur une zone vide de la page puis code source de la page.
Sélectionne le code et colle-le dans ton éditeur favori.
Il ne te reste plus qu'à l'adapter à tes besoins.

[invite4a8dbfd8]

j'ai bien essayé votre solution, c'est super et ça marche (sur une page vierge) !

MAIS (il y a toujours un mais), dans mon cas j'ai toujours un problème, car en copiant le HTML proposé directement par codepen, ca ne marchait pas et ca a marché que lorsque j'ai copié le html que j'ai trouvé dans le code source qui se trouve à ce lien : view-source:http://s.codepen.io/boomerang/5d7c1c...67/index.html#

Le gros probleme maintenant c'est que ceci ne marche pas sur mon site (Wordpress via le theme Onetone qu'est simple de gestion)

voici mon site : http://alharamain.16mb.com/

l'editeur Onetone partage mon site en 7 sections (dans les Option de Onetone) ça ressemble à ça :
image1.jpg

je suis entrain de modifier la 'section 3' prénommé 'services' et en ouvrant la 'section 3' voila ce que l'on trouve :

image2.jpgimage2.jpg

comme je l'ai déja précisé, mon html fonctionne dans une page vierge mais pas sur mon site comme on le vois bien dans mon site : http://alharamain.16mb.com/

saurez-vous d'où vient mon probleme ?

Merci encore pour votre réponse

[invite4a8dbfd8]

ah oui j'ai oublier de vous préciser que j'ai également un "éditeur" sur Wordpress qui me permet de retoucher le CSS il se trouve là :


Donc je pourrai peut etre mon Css dans cet "éditeur" mais le probleme c'est qu'il est blindé, impossible avec mon niveau de m'y trouvé à l'interieur !! :/

merci encore

[A voir en vidéo sur Futura]

[cherbe]

j'ai copié le html que j'ai trouvé dans le code source qui se trouve à ce lien : view-source:http://s.codepen.io/boomerang/5d7c1c...67/index.html#

chez moi, cette page est totalement vierge !

voici mon site : http://alharamain.16mb.com/

Apparemment, tu as collé le code CSS en vrac dans le code HTML. Ça ne fonctionne pas comme ça. On met le code CSS dans un fichier à part et on l'appelle avec la balise HTML :

<link rel="stylesheet" type="text/css" href="fichier_css.css">

Ensuite, je ne vois pas le Javascript. C'est normal ?

Le problème avec les CMS (Wordpress) et leurs surcouches, c'est que l'on est rarement libre d'intégrer le code que l'on veut. Il est possible que ce que tu essaies de faire soit impossible sur ce site.
Vérifie auprès de ton hébergeur que tu as le droit d'ajouter une feuille de style et que Javascript soit autorisé.

[Bluedeep]

Apparemment, tu as collé le code CSS en vrac dans le code HTML. Ça ne fonctionne pas comme ça. On met le code CSS dans un fichier à part et on l'appelle avec la balise HTML .

Il est tout à fait possible de mettre le CSS en ligne dans le fichier HTML, même si il est, bien sur, préférable de l'avoir dans un fichier séparé pour l'utiliser sur d'autres pages (le CSS pour une seule page perd en effet beaucoup d’intérêt).

[cherbe]

Il est tout à fait possible de mettre le CSS en ligne dans le fichier HTML, même si il est, bien sur, préférable de l'avoir dans un fichier séparé pour l'utiliser sur d'autres pages (le CSS pour une seule page perd en effet beaucoup d’intérêt).

Exact mais il faut "l'enfermer" dans cette balise :

<style type="text/css">
.
.
.
</style>

Ce qui n'est pas le cas c'est pourquoi j'ai dit "collé en vrac" !