Que vous soyez nouveau dans le secteur Web ou un ancien combattant chevronné, l'affichage de la source HTML de différentes pages Web est quelque chose que vous ferez probablement plusieurs fois au cours de votre carrière.
Pour les débutants en conception Web, l'affichage du code source d'un site est l'un des moyens les plus simples de voir comment certaines tâches sont effectuées afin de pouvoir en tirer des enseignements et commencer à utiliser certains codes ou techniques dans votre propre travail. Comme tout concepteur Web travaillant aujourd'hui, en particulier ceux qui y travaillent depuis les débuts de l'industrie, il est fort à parier qu'ils vous disent qu'ils ont appris le HTML simplement en consultant la source des pages Web qu'ils ont vues et intriguées. par. En plus de lire des livres de conception Web ou d'assister à des conférences professionnelles, l'affichage du code source d'un site est un excellent moyen d'apprendre le HTML.
Plus que du HTML
Une chose à garder à l'esprit 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). Outre la structure HTML qui constitue la page affichée, des feuilles de style CSS (feuilles de style en cascade) déterminent l’aspect visuel de ce site. De plus, de nombreux sites Web aujourd'hui incluent des fichiers de script inclus avec le code HTML.
Il est probable que plusieurs fichiers de script soient inclus, chacun alimentant différents aspects du site. Franchement, le code source d'un site peut sembler accablant, surtout si vous êtes novice dans ce domaine. Ne soyez pas frustré si vous ne pouvez pas comprendre ce qui se passe avec ce site immédiatement. La visualisation 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'assemblent 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 plus et il ne vous semblera plus aussi intimidant.
Alors, comment voyez-vous le code source d'un site Web? Voici les instructions étape par étape pour le faire à l'aide du navigateur Google Chrome.
Instructions étape par étape
-
Ouvrez le Navigateur Web Google Chrome (Si Google Chrome n'est pas installé, le téléchargement est gratuit).
-
Naviguer vers le page Web que vous souhaitez examiner.
-
Clic-droit la page et regardez le menu qui apparaît. Dans ce menu, cliquez sur Voir la source de la page.
-
Le code source de cette page apparaîtra maintenant comme un nouvel onglet dans le navigateur.
-
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 Commande + Option + U.
Outils de développement
En plus du simple Voir la source de la page Avec les fonctionnalités offertes par Google Chrome, vous pouvez également tirer parti de leurs excellents outils de développement pour aller encore plus loin dans un site. Ces outils vous permettront non seulement de voir le code HTML, mais également le code CSS qui s’applique à l’affichage des éléments de ce document HTML.
Pour utiliser les outils de développement de Chrome:
-
Ouvrir Google Chrome.
-
Aller vers la page Web que vous souhaitez examiner.
-
Clique le icône avec trois lignes dans le coin supérieur droit de la fenêtre du navigateur.
-
Sur le menu, survolez Plus d'outils puis cliquez sur Outils de développement dans le menu qui apparaît.
-
Cela ouvrira une fenêtre affichant le code source HTML à gauche du volet et le code CSS associé à droite.
-
Alternativement, 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 s'affichent et l'élément exact que vous avez sélectionné est mis en surbrillance dans le code HTML, le code CSS correspondant étant affiché à droite. C'est très utile si vous voulez en savoir plus sur la création d'un élément spécifique 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 de visualiser le code source d’un site et de l’utiliser pour son éducation et, finalement, pour le travail qu’il accomplissait. Bien que copier le code d'un site en gros et le faire passer pour vous sur un site ne soit certainement pas acceptable, utiliser ce code comme un tremplin pour apprendre est en fait combien d'avancées ont été réalisées dans ce secteur.
Comme nous l'avons mentionné au début de cet article, vous auriez du mal à trouver un professionnel du Web professionnel qui n'a pas appris quelque chose en consultant le code source d'un site! Oui, l'affichage du code source d'un site est légal. Utiliser ce code en tant que ressource pour créer quelque chose de similaire convient également. En prenant le code tel quel et en le faisant passer pour votre travail, vous commencez à rencontrer des problèmes.
Au final, les professionnels du Web apprennent les uns des autres et améliorent souvent le travail qu'ils voient et inspirent. N'hésitez donc pas à consulter le code source d'un site et à l'utiliser comme outil d'apprentissage.
