Comment afficher la source HTML dans Google Chrome

Cet article explique comment accéder à un site Web code source HTML dans le navigateur Web Google Chrome, ainsi que l'accès et l'utilisation des outils de développement de Chrome. Afficher le code source d'un site est un excellent moyen pour les débutants d'apprendre le HTML.

Afficher le code source dans Chrome

Alors, comment visualisez-vous le code source d'un site Web? Voici les instructions étape par étape pour le faire à l'aide du navigateur Google Chrome.

1. Ouvrez le Navigateur Web Google Chrome (si vous n'avez pas Google Chrome installé, C'est un téléchargement gratuit).

2. Naviguez vers le page Web que vous voudriez examiner.

3. Clic-droit la page et regardez le menu qui apparaît. Dans ce menu, cliquez sur Afficher la source de la page.

   

4. Le code source de cette page apparaîtra désormais sous la forme d'un nouvel onglet dans le navigateur.

5. Alternativement, vous pouvez également utiliser les raccourcis clavier de Ctrl+U sur un PC pour ouvrir une fenêtre avec le code source d'un site affiché. Sur un Mac, ce raccourci est Commander+Option+U.

Utiliser les outils de développement de Chrome

En plus des simples Afficher la source de la page capacité qu'offre Google Chrome, vous pouvez également profiter de leur excellente Outils de développement pour creuser encore plus profondément dans un site. Ces outils vous permettront non seulement de voir le HTML, mais aussi le CSS qui s'applique pour afficher les éléments de ce document HTML.

Pour utiliser les outils de développement de Chrome:

1. Ouvert Google Chrome.

2. Aller vers la page Web que vous souhaitez examiner.

3. Sélectionnez le menu à trois points dans le coin supérieur droit de la fenêtre du navigateur.

4. Dans le menu, survolez Plus d'outils puis choisissez Outils de développement dans le menu qui s'affiche.

   

5. Une fenêtre s'ouvrira qui affichera le code source HTML à gauche du volet et le CSS associé à droite.

6. Sinon, si vous faites un clic droit un élément dans une page web et sélectionnez Inspecter dans le menu qui apparaît, les outils de développement de Chrome apparaîtront et mettront en évidence la partie spécifique que vous avez choisie dans le code HTML avec le CSS correspondant affiché à droite. C'est très utile si vous voulez en savoir plus sur un élément particulier d'un site.

L'affichage du code source est-il légal?

Au fil des ans, de nombreux nouveaux concepteurs de sites Web se sont demandé s'il était acceptable d'afficher le code source d'un site et de l'utiliser pour leur éducation et, en fin de compte, pour le travail qu'ils font. Bien que copier le code d'un site en gros et le faire passer pour le vôtre sur un site Web n'est certainement pas acceptable, utiliser ce code comme tremplin pour apprendre est en fait le nombre d'avancées réalisées dans ce industrie.

Comme nous l'avons mentionné au début de cet article, vous auriez du mal à trouver aujourd'hui un professionnel du Web qui n'a pas appris quelque chose en consultant la source d'un site! Oui, voir le code source d'un site est légal. L'utilisation de ce code comme ressource pour créer quelque chose de similaire est également sûre. Prendre le code tel quel et le faire passer pour votre travail est l'endroit où vous commencez à rencontrer des problèmes.

En fin de compte, les professionnels du Web apprennent les uns des autres et améliorent souvent le travail qu'ils voient et dont ils s'inspirent, alors n'hésitez pas à consulter le code source d'un site et à l'utiliser comme outil d'apprentissage.

Plus que du HTML

Une chose à retenir est que les fichiers source peuvent être très compliqués (et plus le site Web que vous consultez est complexe, plus le code de ce site est susceptible d'être complexe). En plus de la structure HTML qui compose la page, il y aura également des CSS (feuilles de style en cascade) qui dicteront l'apparence visuelle de ce site. De plus, de nombreux sites Web incluront aujourd'hui des fichiers de script inclus avec le code HTML.

Il est probable que plusieurs fichiers de script soient inclus; en fait, chacun alimente différents aspects du site. Franchement, le code source d'un site peut sembler écrasant, surtout si vous êtes nouveau dans ce domaine. Ne soyez pas frustré si vous ne pouvez pas comprendre immédiatement ce qui se passe sur ce site. L'affichage de la source HTML n'est que la première étape de ce processus. Avec un peu d'expérience, vous commencerez à mieux comprendre comment toutes ces pièces s'emboîtent pour créer le site Web que vous voyez dans votre navigateur. Au fur et à mesure que vous vous familiariserez avec le code, vous pourrez en apprendre davantage et cela ne vous semblera pas si intimidant.