Utiliser son propre code HTML, CSS et JavaScript dans Kopage

Le constructeur de sites Web classique Kopage permet d'utiliser son propre code HTML, CSS et JavaScript en plus des fonctionnalités intégrées.

Cela vous permet par exemple d'intégrer des contenus externes, de personnaliser certains affaiblissements ou d'ajouter des fonctionnalités pour lesquelles Kopage ne propose pas de module adapté.

Un code personnalisé offre des possibilités supplémentaires, mais exige également la prudence qui s'impose. Un code défectueux ou non vérifié peut compromettre l'affichage, le fonctionnement, les performances, la sécurité ou la protection des données de votre site web.

En bref : Pour la plupart des sites web Kopage normaux, vous n'avez pas besoin de votre propre code. Utilisez HTML, CSS ou JavaScript principalement lorsque les fonctionnalités intégrées ne suffisent pas pour un besoin spécifique.

Qu'est-ce que le code personnalisé dans Kopage ? #

Kopage est fondamentalement conçu pour créer des sites Web sans connaissances en programmation.

Les pages, les textes, les images, les formulaires et de nombreuses autres fonctionnalités peuvent être gérés via le constructeur de sites Web visuel.

Pour les besoins spécifiques, le constructeur de sites Web classique Kopage prend toutefois également en charge son propre code HTML, CSS et JavaScript.

Les trois technologies remplissent des rôles différents :

HTML
→ Structure et contenus

CSS
→ Mise en forme et présentation

JavaScript
→ Comportement et fonctionnalités supplémentaires

Cette distinction est importante avant d'insérer votre propre code dans votre site web.

Quand ai-je besoin de mon propre code ? #

Un code personnalisé peut s'avérer utile lorsqu'une fonction souhaitée ne peut pas être mise en œuvre avec les outils Kopage habituels.

Les cas d'utilisation typiques sont par exemple :

• Intégration d'un widget externe,
• Intégration d'un service externe,
• personnalisations CSS,
• contenu HTML supplémentaire,
• ou une fonction JavaScript spéciale.

Si Kopage dispose déjà d'une fonction intégrée adaptée à votre tâche, c'est dans de nombreux cas la solution la plus simple et la plus facile à maintenir.

Conseil pratique : Vérifiez d'abord si Kopage propose déjà la fonction souhaitée par elle-même. Le code personnalisé doit combler une lacune concrète et ne pas remplacer sans nécessité une fonction de construction existante.

Qu'est-ce que le HTML ? #

HTML signifie HyperText Markup Language et décrit la structure du contenu d'une page Web.

Un exemple très simple est le suivant :

<h2>Nos horaires d'ouverture</h2>
<p>Lundi au vendredi : de 08h00 à 17h00</p>

Le navigateur interprète les éléments HTML et affiche à partir de ceux-ci un titre et un paragraphe.

Cependant, pour les titres et les textes normaux, vous n'avez pas besoin d'écrire vous-même du HTML dans Kopage. Les fonctions d'édition normales du créateur de site Web sont à votre disposition pour cela.

Quand le code HTML personnalisé est-il utile ? #

L'utilisation de code HTML personnalisé devient intéressante, par exemple, lorsqu'un fournisseur externe met à disposition un code d'intégration prêt à l'emploi ou lorsqu'une structure spécifique est nécessaire et ne peut pas être reproduite de manière judicieuse avec les fonctionnalités normales de Kopage.

Par exemple, un service externe pourrait fournir un code de ce type :

<div class="example-widget">
    Contenu externe
</div>

Ce n'est qu'un exemple simplifié et non un widget réellement à intégrer.

Ne pas abuser du HTML pour la maintenance des pages normales #

Ce n'est pas parce que HTML peut être utilisé que vous devez créer tout le contenu normal d'une page à la main avec.

Le texte, les images et les zones de page normales peuvent être gérés plus facilement grâce aux fonctions Kopage prévues à cet effet.

Nous expliquons comment éditer le contenu normal sous Créer du contenu avec Kopage : modifier les blocs de contenu, les textes et les images.

Qu'est-ce que le CSS ? #

CSS signifie Cascading Style Sheets (feuilles de style en cascade) et est utilisé pour la conception visuelle des éléments HTML.

Cela permet par exemple d'influencer les espacements, les tailles de police, les bordures ou d'autres caractéristiques d'affichage.

Un exemple simplifie :

.hinweis {
    font-weight: bold;
    padding: 20px;
}

Ce CSS rendrait notamment les éléments dotés de la classe correspondante en gras et leur appliquerait un espacement intérieur.

Quand est-il judicieux d'utiliser du CSS personnalisé ? #

Un CSS personnalisé peut s'avérer utile si vous avez besoin d'une adaptation visuelle ciblée qui va au-delà des options de design habituelles de Kopage.

Avant d'utiliser du CSS, vous devriez toutefois vérifier s'il est déjà possible de réaliser la modification souhaitée via les paramètres de design et de template existants.

Nous traitons les options de conception normales sous Personnaliser le modèle et le design Kopage : couleurs, polices, en-tête et pied de page.

Important : N'utilisez pas CSS inutilement pour des réglages que Kopage propose déjà via son interface de design. Les modifications effectuées via les fonctionnalités intégrées sont généralement plus faciles à comprendre lors de futures adaptations.

Le CSS peut modifier plusieurs zones à la fois #

Le CSS fonctionne avec des sélecteurs. Selon la généralité d'un sélecteur, une règle peut modifier non seulement un seul élément, mais de nombreuses zones du site web.

Une règle CSS très générale peut donc avoir des répercussions involontaires sur d'autres pages ou éléments.

Teste soigneusement les modifications CSS individuelles et ne vérifie pas seulement l'endroit que tu voulais modifier à l'origine.

Vérifier les modifications sur plusieurs pages #

Si ton CSS s'applique à des classes communes ou à des éléments de page, tu devrais contrôler plusieurs zones du site web après une modification.

Cela comprend notamment :

Page d'accueil
sous-pages importantes
Navigation
Formulaires
Blog
Boutique
Pied de page
Affichage sur smartphone

Une modification qui a l'air bien sur une seule page peut avoir des répercussions inattendues ailleurs.

Qu'est-ce que JavaScript ? #

JavaScript est un langage de programmation qui peut s'exécuter dans le navigateur et permet des fonctionnalités interactives ou dynamiques.

JavaScript peut par exemple réagir aux actions des utilisateur, charger des fonctions externes ou modifier dynamiquement du contenu.

Un exemple grandement simplifié :

<script>
console.log('Beispiel');
</script>

Cet exemple sert uniquement à des fins d'illustration et n'a aucune utilité pratique pour un site web kopage normal.

Utiliser JavaScript avec une prudence particulière #

JavaScript offre nettement plus de possibilités qu'une simple règle de style CSS.

Un code erroné peut altérer des fonctionnalités, provoquer des messages d'erreur ou entrer en conflit avec le code JavaScript existant du site Web ou d'un service externe.

N'insérez par conséquent que du JavaScript dont vous connaissez l'origine et la finalité.

Attention : Ne copiez jamais sans vérification du code JavaScript provenant de forums, de commentaires, de sites web inconnus ou d'autres sources non fiables dans votre site web. Le JavaScript peut faire bien plus que simplement modifier l'affichage d'une page.

Qu'est-ce qu'un code embed ? #

De nombreux services externes fournissent un code dit d'intégration ou d'incorporation.

Cela permet d'afficher un contenu externe sur un site Web ou de charger une fonction externe.

Selon le fournisseur, un tel code peut contenir du HTML, du JavaScript ou une combinaison des deux.

Des exemples typiques peuvent inclure des fonctions de réservation externes, des formulaires, des calendriers, des vidéos, des services d'évaluation ou d'autres widgets.

N'accepter le code d'intégration que du fournisseur réel. #

Si vous souhaitez intégrer un service externe, vous devez copier le code prévu à cet effet directement depuis l'interface d'administration officielle ou la documentation de ce service.

N'utilisez pas n'importe quel code provenant d'un ancien article de blog ou d'un forum simplement parce que le nom du service souhaité y est mentionné.

Les fournisseurs externes peuvent modifier leurs méthodes d'intégration au fil du temps.

Privilégier les fonctions Copage existantes #

Pour divers contenus externes fréquemment utilisés, Kopage propose déjà des fonctionnalités adaptées.

Nous traitons par exemple les liens vers Google Maps, YouTube et les réseaux sociaux sous Intégrer Google Maps, YouTube et les réseaux sociaux dans Kopage.

Si une telle possibilité intégrée suffit pour ton cas d'usage, tu n'as pas besoin d'utiliser en plus ton propre code d'intégration.

Où insérer son propre code ? #

Pour HTML, CSS ou JavaScript, utilisez exclusivement les fonctions prévues à cet effet du constructeur de sites Web classique Kopage.

La zone appropriée dépend de la question de savoir si le code concerne un contenu de page spécifique, la mise en page ou une fonction externe.

N'insérez pas de code au hasard dans des champs de texte normaux.

Important : HTML, CSS et JavaScript sont des types de code différents. Un code CSS ne va pas automatiquement dans le même champ qu'un code HTML intégré, et JavaScript ne doit être utilisé que là où le type de code correspondant est prévu.

Comprendre le code avant de l'insérer #

Tu n'as pas besoin de savoir programmer toi-même chaque détail d'une intégration complexe. Tu dois cependant savoir au moins à quoi sert le code inséré et de quel fournisseur il provient.

Pour un widget externe, vous devriez par exemple être capable de répondre :

De quel fournisseur provient le code ?
Qu'est-ce qui est intégré sur mon site web ?
Des serveurs externes sont-ils contactés ?
Des données sont-elles transmises ?
La fonction nécessite-t-elle des cookies ?
Puis-je supprimer le code plus tard ?

Si ces questions sont totalement floues, vous ne devriez pas déployer le code sans l'avoir vérifié sur un site web de production.

Sauvegarder le code existant avant les modifications #

Si tu souhaites modifier du code personnalisé qui fonctionne déjà, sauvegarde la version précédente au préalable.

Cela peut par exemple signifier que tu enregistres le code actuel dans un fichier texte local avant de le modifier.

Si la nouvelle version pose des problèmes, cela vous permet de revenir plus facilement à la version précédente.

Conseil pratique : Pour un code plus complexe, ne modifiez si possible qu'une seule chose à la fois. Si une erreur survient ensuite, il est beaucoup plus facile d'en identifier la cause.

Utiliser des commentaires dans son propre code #

Si vous maintenez vous-même du CSS ou un autre code, de courts commentaires peuvent vous aider à comprendre plus tard le उद्देश्य de chaque adaptation.

Un exemple CSS :

/* Abstand für speziellen Hinweisbereich */
.hinweis {
    padding: 20px;
}

C'est particulièrement utile lorsque plusieurs adaptations individuelles ont été réalisées sur une longue période.

Ne pas insérer le code plusieurs fois #

Si une intégration n'est pas immédiatement visible, tu ne dois pas simplement insérer le même code plusieurs fois à différents endroits.

Cela peut entraîner le chargement multiple de scripts externes ou l'exécution multiple de fonctions.

Vérifiez plutôt d'abord si le code a été inséré au bon endroit et si la page concernée a été publiée ou mise à jour.

Prendre en compte le code externe et les performances #

Les scripts et widgets externes peuvent charger des fichiers et des données supplémentaires à partir de serveurs tiers.

Plus on intègre de services externes, plus de ressources supplémentaires peuvent être nécessaires lors du chargement de la page.

Cela peut affecter le temps de chargement et le comportement du site Web.

Utilisez donc les intégrations externes de manière ciblée et supprimez les fonctionnalités qui n'ont plus d'utilité réelle.

Ce n'est pas chaque widget qui vaut la peine de faire des efforts #

Un widget supplémentaire peut être visuellement intéressant, tout en chargeant des scripts externes, en transmettant des données et en entraînant une charge de maintenance supplémentaire.

Demandez-vous donc avant l'intégration si la fonction est vraiment pertinente pour vos visiteurs.

Dans certains cas, un simple lien vers un service externe peut s'avérer plus judicieux que son intégration complète.

Vérifier son propre code et le design adaptatif #

Kopage lui-même est conçu pour des sites web adaptatifs. Par conséquent, le code inséré individuellement ne fonctionnera pas non plus automatiquement et correctement sur tous les écrans.

Un widget externe peut, par exemple, avoir une largeur fixe et, de ce fait, dépasser de la zone visible sur un smartphone.

Testez donc votre code individuel sur ordinateur, tablette et smartphone.

Vous trouverez d'autres informations sur l'affichage mobile sous Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes.

Utiliser avec précaution les largeurs fixes #

Pour le HTML ou le CSS rédigé par vos soins, vous devez prêter une attention particulière aux dimensions rigides.

Un élément doté d'une grande largeur fixe peut poser des problèmes sur les petits appareils.

La conception adaptative tient compte, quant à elle, de la disponibilité de différentes tailles d'écran.

Code personnel et protection des données #

Une attention particulière est requise pour le JavaScript externe et le code d'intégration.

Un tiers intégré peut établir une connexion avec des serveurs externes lors du chargement de la page et ainsi traiter des données.

Cela peut par exemple être pertinent pour les services d'analyse, de cartographie, de vidéo, de chat, de réservation ou de médias sociaux.

Important : Le fait qu'un service externe puisse être techniquement intégré par du code ne signifie pas automatiquement qu'il peut être utilisé sans mesures supplémentaires de protection des données.

Prendre en compte la solution de consentement #

Si un service externe installe des cookies ou utilise d'autres technologies nécessitant un consentement, une configuration correspondante relative au consentement peut s'avérer nécessaire.

La question de savoir si des exigences existent, et lesquelles, dépend du service utilisé, de ta configuration et des réglementations juridiques applicables à ton site web.

Vérifiez ceci avant de publier une intégration correspondante.

Code propre et sécurité #

Le code a fondamentalement la possibilité d'influencer le comportement d'un site web.

Utilisez par conséquent uniquement du code provenant de sources fiables et supprimez les intégrations qui ne sont plus nécessaires.

Tu dois faire particulièrement preuve d'esprit critique si une personne inconnue te demande d'insérer un code dont tu ne peux pas comprendre le fonctionnement.

Attention : N'insérez jamais de code sur votre site Web simplement parce que quelqu'un prétend qu'il est nécessaire pour le „ référencement (SEO) “, la „ vérification Google “, la „ sécurité “ ou une réparation prétendument nécessaire. Vérifiez d'abord l'origine et le but.

Les services externes peuvent changer #

Une intégration peut fonctionner aujourd'hui, mais poser des problèmes plus tard si le fournisseur externe modifie son service, ses URL ou son code d'intégration.

En ce qui concerne les fonctions externes, tu dois donc garder à l'esprit que leur fonctionnement n'est pas entièrement sous ton contrôle.

Si un widget cesse soudainement de fonctionner, vérifiez également si le fournisseur externe a modifié ou arrêté son intégration.

Que faire si le site Web a un aspect incorrect après une modification du code ? #

Si un problème d'affichage survient immédiatement après une modification CSS ou HTML, vous devez d'abord annuler la dernière modification effectuée.

As-tu sauvegardé le code précédent, peux-tu restaurer l'état fonctionnel ?.

Vérifie ensuite si le site web s'affiche à nouveau correctement.

Ne modifiez pas simultanément d'autres zones tant que la cause n'a pas été élucidée.

Que faire si une fonction ne fonctionne plus après l'exécution de code JavaScript ? #

Commence par supprimer ou désactiver le code JavaScript ajouté en dernier, puis teste à nouveau le site web.

Si la fonction se remet ensuite à fonctionner, un lien avec le code inséré est probable.

Cela ne signifie pas encore nécessairement que le code est fondamentalement défectueux. Il peut aussi s'agir d'un conflit avec des scripts existants ou avec la manière dont il est intégré.

Console du navigateur pour le débogage technique #

Les utilisateurs avancés peuvent utiliser les outils de développement de leur navigateur en cas de problèmes avec JavaScript.

La console du navigateur peut afficher des indications sur des erreurs JavaScript ou des ressources non chargées.

Ces messages sont toutefois de nature technique et doivent être interprétés en fonction du contexte.

Conseil pour les utilisateurs avancés : Un message d'erreur dans la console du navigateur ne signifie pas automatiquement que Kopage lui-même en est la cause. L'erreur peut également provenir d'un script externe, d'un widget ou d'un code inséré individuellement.

Tester les modifications dans une fenêtre de navigation privée #

Si vous continuez à voir la présentation précédente après une modification de code, un cache de navigateur peut jouer un rôle.

Testez la page éventuellement dans une fenêtre privée de navigateur ou sur un autre appareil.

De cette manière, vous pouvez mieux distinguer si la modification n’est pas fonctionnelle en principe ou si une version plus ancienne est simplement affichée dans le navigateur.

Code propre et optimisation pour les moteurs de recherche #

Le code HTML propre peut affecter la structure d’une page. Le code mal conçu ou les contenus qui ne sont disponibles que grâce à des fonctionnalités externes complexes peuvent donc également avoir un impact sur la qualité technique d’un site web.

JavaScript ne devrait pas non plus être utilisé pour rendre les contenus simples inutiles à cause de la complexité, lorsque ceux-ci peuvent être facilement présentés comme une page normale.

Nous abordons les bases générales du SEO sous SEO avec Kopage : titres de pages, métadonnées, URL et optimisation pour les moteurs de recherche.

Ne pas intégrer Google Analytics deux fois avec un code quelconque #

Si vous avez déjà intégré un service externe via une fonction de copie prévue à cet effet, vous ne devriez pas l’intégrer de nouveau, sans raison, avec votre propre code.

Une intégration double peut entraîner, entre autres, une collecte de données multiples ou des problèmes difficiles à comprendre.

Nous traitons les fonctions prévues par Google et Analytics dans la section Google, Sitemap, Analytics et statistiques de site Web dans Kopage.

Quand devrais-je mieux renoncer à mon propre code ? #

Évitez le code personnalisé lorsque vous ne pouvez ni comprendre son objectif ni les conséquences possibles.

Cela vaut particulièrement pour les brèves JavaScript de provenance inconnue.

Même si une fonction souhaitée peut déjà être réalisée avec les outils de copie standard, un code supplémentaire n’apporte souvent pas d’avantage.

Le code propre devrait être documenté #

Si vous utilisez plusieurs ajustements personnalisés, vous devez documenter pour quelle raison ils sont nécessaires.

Une vue d'ensemble simple pourrait ressembler par exemple à ceci :

Adaptation : élément de réservation
Source : Fournisseur du système de réservation
Ajouté pour : page de rendez-vous
Objet : réservation en ligne de rendez-vous

Adaptation : CSS personnalisé
Objet : représentation spécifique d'une zone d'indication
Modifié : Août 2026

Une telle documentation facilite considérablement les modifications ultérieures et la recherche d'erreurs.

Contrôler le code après les modifications apportées au service externe #

Si un service intégré change sa configuration, vous devriez vérifier si votre code embed actuel est toujours valide.

Ne remplacez pas automatiquement le code existant par une nouvelle variante sans d’abord vérifier quelles modifications le fournisseur exige réellement.

Préserver le site avant de procéder à des modifications majeures #

Lors d’ajustements plus importants, une sauvegarde actuelle est généralement judicieuse.

Cela vaut particulièrement s’il s’agit d’une page web productive où vous apportez des modifications dont l’impact vous échappe totalement.

Bien que la sauvegarde ne remplace pas le travail minutieux, elle facilite la restauration en cas de modification plus importante qui entraînerait des problèmes inattendus.

Testez complètement la modification du code #

Après une adaptation personnalisée, contrôlez non seulement la zone directement modifiée.

Un test sensé comprend :

Ouvrir la page concernée
        ↓
Testez la fonctionnalité
        ↓
Examiner d'autres sites importants
        ↓
Contrôler la navigation
        ↓
Testez les formulaires
        ↓
Contrôler le smartphone
        ↓
Tester un deuxième navigateur
        ↓
Contrôler un site public

Des erreurs typiques dans le code propre #

Les problèmes les plus courants comprennent du code provenant de sources inconnues, des scripts insérés à plusieurs reprises, des positions d’insertion incorrectes et des règles CSS qui modifient involontairement plusieurs zones.

Les widgets externes avec des largeurs fixes peuvent également causer des problèmes sur les appareils mobiles.

Un autre problème fréquent est de procéder à plusieurs modifications simultanément. Lorsqu’une modification ne fonctionne plus après cela, il est presque impossible de déterminer quelle modification a été à l’origine du problème.

Liste de contrôle avant d’insérer votre propre code #

Copage propose-t-il déjà une fonctionnalité appropriée ?
        ↓
Est-il vraiment nécessaire d’avoir son propre code ?
        ↓
La source est-elle fiable ?
        ↓
Comprend-je l’objectif du code ?
        ↓
Le code existant est-il sécurisé ?
        ↓
La protection des données personnelles a-t-elle été vérifiée ?
        ↓
Le code a-t-il été inséré à la bonne place ?
        ↓
Le site web public testé ?
        ↓
Le smartphone testé ?
        ↓
Modification documentée ?

Quelle est la suite ? #

Les codes individuels et les intégrations externes ne doivent pas seulement fonctionner sur un écran d’ordinateur.

Surtout lors de vos propres modifications, il est important de vérifier soigneusement la présentation sur les smartphones et les tablettes.

C'est pourquoi nous continuons avec Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes.

Résumé #

Le site-éditeur classique de Kopage permet d’utiliser du code HTML, CSS et JavaScript propre pour répondre à des besoins qui vont au-delà des fonctionnalités des éditeurs standard.

HTML décrit les contenus et les structures, CSS influence la présentation et JavaScript permet des fonctionnalités dynamiques supplémentaires.

Utilisez le code personnalisé uniquement lorsque cela présente une raison concrète, et privilégiez les fonctions de copie existantes si elles répondent déjà à vos besoins.

Utilisez uniquement des codes externes provenant de sources fiables, protégez les modifications existantes contre les modifications et tenez compte de la performance, de la confidentialité et de la sécurité lors des intégrations externes.

Testez ensuite les modifications sur le site web publié et sur différents appareils.

Un code personnalisé peut enrichir utilement le processus de copie. Toutefois, plus l’adaptation est personnalisée, plus la documentation doit être propre, les modifications doivent être contrôlées et les tests rigoureux doivent être effectués.