Afficher le code source de n’importe quelle page HTML est un bon moyen d’apprendre le HTML pour les programmeurs débutants comme intermédiaires. De plus, si vous devez extraire des données de sites qui ne restreignent pas de telles actions pour vos projets de web scraping, vous devez comprendre les blocs de code et les balises du code source.
Google Chrome vous permet de vérifier le code source de n'importe quelle page Web de deux manières. Une solution consiste à afficher le code HTML source directement à partir du serveur Web. Il s'ouvre généralement sous la forme d'un seul onglet « Afficher la source ».
Une autre façon consiste à vérifier le code une fois que le navigateur Web a optimisé le code source réel et ajouté toute manipulation Javascript. Chrome le présente comme l'outil Inspecter les éléments, et cet utilitaire est en fait là pour le bénéfice de tout développeur.
Utiliser des raccourcis
Le moyen le plus simple d’ouvrir le code source d’une page Web dans Chrome consiste à utiliser le raccourci clavier.
Pour ouvrir l'onglet Afficher la source, appuyez surCtrl + Usous Windows. Sur Mac, ce raccourci est⌘-Option-U.
Si vous devez ouvrir l'outil Inspecter les éléments, vous devez appuyer surCtrl + Maj + C. Vous pouvez également appuyer sur F12 ou Ctrl + Shift + I pour ouvrir l'outil Développeurs, puis accéder à l'onglet Éléments.
Utilisation du menu contextuel
Le menu contextuel (menu contextuel) des pages Web de Google Chrome comprend également les options permettant d'ouvrir le code source. Vous pouvez choisir d'afficher le code source inchangé ou le code après optimisation par le navigateur.
- Faites un clic droit n’importe où lorsque vous êtes dans la page Web.
- SélectionnerAfficher la source de la pageouInspecterselon votre besoin. Inspect vous amènera au bloc de code exact correspondant à l’élément graphique sur lequel vous avez cliqué avec le bouton droit.
En modifiant l'URL
Une autre façon d'afficher le code source consiste à ajouter un extrait de code à l'URL. Si vous utilisez les options ci-dessus pour afficher la source de la page, vous avez peut-être vuview-source:dans l’adresse URL du code source. Vous pouvez en fait saisir ce code manuellement pour effectuer la même tâche.
Cette méthode est également utile si vous souhaitez afficher le code source sur des appareils mobiles, car ils ne proposent généralement pas d'autres méthodes.
- Cliquez sur la barre d'adresse.
- Appuyez sur Accueil ou maintenez la touche gauche enfoncée jusqu'à ce que le curseur du clavier se place devant l'URL, avant même
https:// - Tapez view-source: et appuyez sur Entrée. Donc, si l'URL était
https://www.google.com, cela devrait maintenant devenirview-source:https://www.google.com
Via le menu Chrome
Il est également possible d'ouvrir l'outil Inspecter les éléments à partir du menu de contrôle de Chrome. Ici, vous pouvezqui comprend Elements ainsi que d'autres outils tels que la console Chrome.
- Cliquez sur l'icône à trois points dans la fenêtre Chrome.
- Aller àPlus d'outilset sélectionnezOutils de développement.
Comprendre les codes sources
Après avoir visualisé le code source, vous devez connaître le langage HTML (Hypertext Markup Language) pour pouvoir analyser et lire le code source. Si vous n'êtes pas très familier avec ce langage de programmation, voici quelques éléments sur le code pour vous aider à démarrer.
Balises ou éléments
Ce sont les principaux mots-clés d’un code HTML. Ils sont fermés par « <> » et représentent le type de contenu. Un élément se compose généralement de la balise d’ouverture et de fermeture pour afficher respectivement le début et la fin du contenu de l’élément. Mais certains éléments n’utilisent qu’une seule balise.
Par exemple : <p>Voici un paragraphe</p>
« Voici un paragraphe » est un élément de paragraphe entouré des balises <p> et </p> qui spécifient ce contenu comme un paragraphe.
Les balises ne sont pas sensibles à la casse.
Attributs
Ce sont les mots-clés qui déterminent les propriétés supplémentaires des éléments HTML. Ils sont également présents à l’intérieur des crochets angulaires mais après le mot-clé de la balise d’ouverture. Certains attributs courants incluent la classe, le titre, le style, l'identifiant, etc.
Par exemple : <p id="para">Voici un paragraphe</p>
Le paragraphe a l'attribut « para » comme identité (id).
Certains attributs spécifiques sont sensibles à la casse, tandis que les autres ne le sont pas.
Éléments importants du code source
- Tête(<head>…</head>) – Il fournit les informations de la page Web.
- Titre(<title>…</title>) – Il affiche le titre de la page Web. Les moteurs de recherche comme la recherche Google indexent le contenu du titre afin de pouvoir trouver ces pages Web lorsque quelqu'un les recherche.
- Corps(<body>…</body>) – Il spécifie tout le contenu de la page Web.
- Rubriques– Différents niveaux de titres sont accompagnés de balises distinctes telles que <h1>…</h1>, <h2>…</h2>, etc. Ceux-ci fournissent également des marges automatiques avant et après le titre.
- Paragraphes<p>…</p> – Contient tout le texte à l’intérieur ou à l’extérieur d’un titre.
- Listes– Les listes ordonnées qui utilisent des alphabets ou des chiffres pour classer la liste utilisent les balises <ol>…</ol> et les listes non ordonnées qui utilisent des puces utilisent les balises <ul>…</ul>. À l'intérieur de ces balises racine, tous les éléments de la liste sont placés dans <li>…</li>.
- Images() – Il n'a besoin d'aucun contenu et utilise l'attribut src pour spécifier la source de l'image. L'attribut alt spécifie le texte alternatif qui décrit l'image.
- Liens hypertextes(<a>…</a>) – Il utilise l'attribut href pour spécifier le lien de référence. Habituellement, il est préférable d’ajouter l’attribut rel="noopener noreferrer" aux liens externes.
Si l'attribut href contient un hashtag puis du texte, tel que <a href="#link">link</a>, il affiche un lien interne vers l'élément avec le lien d'identification. - Commentaires– Tous les textes à l'intérieur de « <!– » et « –> » sont des commentaires et peuvent être ignorés. Ils fournissent généralement des informations complémentaires sur les éléments successifs.