Se plonger dans le code source d'une page web est comme déchiffrer une langue ancienne. Par l'accès et la modification du code source, des perspectives inédites se dévoilent, ouvrant la voie à une compréhension plus approfondie et une maîtrise accrue des rouages du web. Cet article dévoile les secrets du code source, comment l'explorer et le manipuler de façon simple et rapide.
Qu'est-ce qu'un code source ?
Le code source est l'ensemble des instructions et des commandes, écrites généralement dans des langages de programmation comme HTML, CSS et JavaScript. Il détermine la structure, la mise en forme et les fonctionnalités d'un site web. Ce code est traduit par le navigateur pour afficher la page web.
Comment trouver le code source d'une page web ?
Trouver le code source d'une page web peut sembler compliqué pour les néophytes. Cependant, avec quelques instructions simples, cette tâche peut se révéler relativement facile à accomplir.
Un navigateur web constitue l'outil principal qui permet d'accéder au code source d'une page web. Qu'il s'agisse de Google Chrome, Mozilla Firefox, Safari ou Microsoft Edge, chacun de ces navigateurs offre la possibilité de consulter le code source.
Voici comment procéder avec chacun d'entre eux :
- Google Chrome : effectuer un clic droit n'importe où sur la page web puis sélectionner « Inspecter » qui ouvre la console des développeurs où figure le code source.
- Mozilla Firefox : un clic droit sur la page web, suivi de la sélection de « Inspecter l'élément » mène à la console des développeurs qui présente le code source.
- Safari : après avoir activé le menu de développement dans les préférences, un clic droit puis « Inspecter l'élément » ouvre le code source.
- Microsoft Edge : comme avec Chrome et Firefox, un clic droit et « Inspecter » affiche le code source dans la console des développeurs.
Chacun des navigateurs fournit des explications détaillées sur son site respectif.
Il importe de préciser que le code source affiché par ces outils n'est pas toujours facile à lire, surtout si la page web est complexe ou si le code n'est pas correctement structuré. Heureusement, d'autres outils en ligne, tels que les « beautify » HTML peuvent aider à le rendre plus lisible.
Comment écrire un code source ?
Écrire un code source représente un aspect fondamental de la création de pages web. Il définit l'apparence et les fonctionnalités d'un site web. Son apprentissage nécessite la connaissance de plusieurs langages de programmation, notamment :
- le HTML pour la structure.
- le CSS pour la mise en forme.
- le JavaScript pour l'interaction.
Qu'est-ce qu'un code HTML ?
Le code HTML détermine la structure d'une page. Par exemple, un code source HTML basique peut ressembler à ceci :
|
< ! DOCTYPE html> <html> <head> <title>Titre de la page</title> </head> <body> <h1>Mon premier titre</h1> <p>Mon premier paragraphe.</p> </body> </html> |
Dans cet exemple, < ! DOCTYPE html> est la déclaration de type de document. Le titre de la page est précisé dans la balise <title>, et le contenu réel de la page est présenté entre les balises <body>.
Qu'est-ce que le CSS ?
Le CSS détaille le style de cette page. Il s'agit d'un langage qui permet de définir les couleurs, les polices, la disposition et autres aspects visuels de la page. Les feuilles de style CSS peuvent être intégrées directement dans le fichier HTML ou être des fichiers séparés liés à la page HTML.
Par exemple, pour modifier la couleur du titre et du paragraphe, il suffit d'ajouter les lignes suivantes dans la balise <head> :
|
<style> |
Cela colorie le titre en bleu et le paragraphe en rouge.
À quoi correspond le JavaScript ?
Le JavaScript, quant à lui, permet d'ajouter de l'interactivité à la page. Ce langage modifie le contenu de la page en fonction des actions de l'utilisateur, comme les clics de souris ou les entrées de clavier. Le JavaScript peut être intégré, de la même manière que le CSS, directement dans le fichier HTML ou être un fichier séparé.
Pour afficher une alerte lorsque le visiteur clique sur le titre, il suffit de compléter par ce script :
|
<script> document.querySelector(« h1').onclick = function() { alert('Vous avez cliqué sur le titre !'); }; </script> |
Ce script affiche une boîte d'alerte lorsque le titre est cliqué.
La lisibilité du code
Pour créer un code source clair, de bonnes pratiques sont essentielles. Il est convenu d'ajouter un commentaire au code pour expliquer son fonctionnement, d'indenter correctement (positionner certaines parties en retrait par rapport au corps principal du code) pour améliorer la lisibilité et nommer comme il faut les variables et les fonctions.
Voici comment le JavaScript précédent peut être réécrit :
|
<script> //Fonction qui affiche une alerte lorsque le titre est cliqué function afficherAlerte() { alert('Vous avez cliqué sur le titre !'); } //Appliquer la fonction au titre document. querySelector (« h1'). onclick = afficherAlerte ; </script> |
Ici, la fonction est nommée de manière descriptive et un commentaire est ajouté pour expliquer ce que fait le code. L'indentation et les espaces autour des opérateurs améliorent également la lisibilité du code.
Comment modifier le code source d'une page web ?
Modifier le code source d'une page web peut être entrepris pour diverses raisons, notamment pour effectuer des tests de fonctionnalités, procéder à des corrections de bogues ou perfectionner le design d'une interface. Deux manières se distinguent : l'une temporaire et l'autre permanente.
Modification de code source de façon temporaire
La première méthode consiste à utiliser les outils de développement intégrés dans les navigateurs web. Ils permettent de modifier temporairement le code source d'une page web et sont particulièrement utiles pour tester des changements avant de les implémenter de manière permanente.
Pour modifier le code source via les outils de développement, la procédure suit généralement les mêmes étapes, quel que soit le navigateur :
- Ouvrir les outils de développement. Comme mentionné précédemment, un clic droit sur la page web et sélection d'« Inspecter » (ou « Inspecter l'élément » selon le navigateur).
- Naviguer dans le code source. Une fois les outils de développement ouverts, le code source de la page s'affiche, organisé selon la structure de la page. La navigation à travers ce code est facilitée par des flèches permettant d'ouvrir et de fermer les différentes sections du code.
- Modifier le code source. Pour en modifier une partie, il suffit de cliquer deux fois sur l'élément à changer dans le volet des éléments des outils de développement. Après avoir effectué les modifications, l'appui sur Entrée ou le clic en dehors de la zone de texte valide les changements.
Ces modifications temporaires disparaissent lorsque la page est actualisée.
Changement du code source de façon permanente
La deuxième méthode permet d'effectuer des modifications permanentes sur la page web. Ces modifications ne sont possibles que par l'accès au fichier source du site et si les droits d'auteur doivent être respectés. Voici comment procéder :
- Obtenir le fichier source. Le code source d'un site web se trouve généralement dans des fichiers .html, .css, .js et autres, stockés sur le serveur web. Il faut accéder à ces fichiers pour effectuer des modifications permanentes. Cela peut être réalisé par FTP (File Transfer Protocol) ou via le panneau de contrôle de l'hébergement web si celui-ci est fourni par l'hébergeur.
- Ouvrir le fichier dans un éditeur de code. Une fois les fichiers obtenus, ils doivent être ouverts dans un éditeur de code, comme Sublime Text, Visual Studio Code ou Atom.
- Modifier le code source. Comme mentionné précédemment, le code peut être modifié en double-cliquant sur l'élément à changer. Après avoir apporté les modifications, elles doivent être enregistrées dans l'éditeur de code.
- Télécharger le fichier modifié sur le serveur. Dès que les modifications sont enregistrées, le fichier doit être téléchargé à nouveau sur le serveur, en remplaçant l'ancien fichier. Ceci peut être effectué par FTP ou via le panneau de contrôle de l'hébergement web.
- Actualiser la page. Enfin, pour visualiser les modifications, la page web doit être actualisée. Les modifications apportées au code source doivent maintenant être visibles de manière permanente sur la page web.
Cette procédure est plus complexe que la précédente. Dans tous les cas, le respect des droits d'auteur est primordial et il n'est pas recommandé de modifier le code source d'une page web sans autorisation. La modification du code source est un outil puissant qui peut grandement contribuer à l'amélioration d'un site web, comme elle peut venir la compromettre si elle est utilisée de manière irresponsable ou non maîtrisée.
Pour aller plus loin, téléchargez le guide d'introduction aux langages HTML et CSS.
