" Le même point est dans menu contextuel, qui si vous cliquez clic-droit texte de la souris pages. Vous pouvez également utiliser le raccourci clavier CTRL + U. Mozilla FireFox n'utilise pas de programmes externes - original code pages avec coloration syntaxique sera ouvert dans une fenêtre de navigateur séparée.
Dans le navigateur Internet Explorer Cliquez sur la section « Fichier » dans le menu et sélectionnez « Modifier dans le Bloc-notes ». Au lieu du nom Bloc-notes, un autre nom peut être écrit, vous l'avez attribué dans les paramètres du navigateur pour afficher l'original code UN. Sur clic pages avec le bouton droit de la souris, un menu contextuel apparaît, qui comporte également un élément qui permet d'ouvrir la source code pages dans programme externe- "Afficher HTML" code UN".
DANS Navigateur Opéra ouvrez le menu, allez dans la section « Page » et vous aurez la possibilité de sélectionner l'élément « Source » dans la sous-section « Outils de développement » code" ou l'élément " Original code cadre." Cette sélection est affectée à chaud Touches CTRL+ U et CTRL + MAJ + U respectivement. Dans un menu contextuel lié à un clic pages faites un clic droit, il y a aussi un élément « Initial code" Source d'opéra pages dans un programme externe attribué dans le système d'exploitation ou dans les paramètres du navigateur pour l'édition de fichiers HTML.
Navigateur Google Chrome a sans aucun doute la meilleure organisation visionner l'original code UN. En cliquant avec le bouton droit de votre souris, vous pouvez sélectionner Afficher code UN pages"et ensuite le code source avec coloration syntaxique sera ouvert sur onglet séparé. Ou vous pouvez sélectionner la ligne « Affichage » dans le même menu codeélément" et dans le même onglet ouvrira deux cadres supplémentaires dans lesquels vous pourrez inspecter HTML et CSS codeélément pages. Le navigateur répondra au déplacement du curseur sur les lignes code et, en mettant en évidence les éléments de la page qui correspondent à cette section du HTML code UN.
Les développeurs de navigateurs ont veillé au confort de ceux qui créent des sites qui s'ouvrent dans ces mêmes navigateurs, à savoir les webmasters. Ils ont ajouté caractéristiques standards des outils de développement qui facilitent l'ouverture et regarder source pages du site dans un navigateur: HTML, CSS, JavaScript (JS), obtenir diverses données utiles sur la structure du site, procéder à son analyse technique. En général, voyez beaucoup de choses utiles.
Bien entendu, ces outils sont utilisés non seulement par les créateurs de sites Web à des fins professionnelles, mais également par utilisateurs ordinaires, dont le code source vous permet de visualiser diverses données utiles.
A partir de cet article vous apprendrez comment visualiser le code source d'une page de site web dans un navigateur (comment ouvrir le code HTML, CSS, JavaScript d'un site web).
Comment ouvrir le code source d'une page dans un navigateur
Il existe deux manières d'ouvrir le code source d'une page Web dans un navigateur :
- Utiliser des touches de raccourci ;
- Ouvrir à partir du menu contextuel.
Ctrl+U– une combinaison de touches de raccourci pour afficher le code source de la page entière du site dans une nouvelle fenêtre séparée. Standard pour tous les navigateurs : Google Chrome, Opera, Mozilla Firefox, navigateur Yandex, c'est à dire.
Vous pouvez également accéder aux outils de développement comme suit :
Pour trouver rapidement code requis, mot ou texte sur la page, vous pouvez utiliser la combinaison de touches de raccourci de recherche standard pour tous les navigateurs : Ctrl + G.
Instructions vidéo :
Afficher le code de l'élément | explorer l'élément | inspecter l'élément
Si vous avez soudainement besoin de ne pas afficher l'intégralité du code source, mais d'en afficher seulement une partie distincte, une zone de la page, alors l'outil précédent ne fonctionnera pas. À cette fin, les outils de développement ont une autre fonction, qui sera abordée ci-dessous.
Comment visualiser le code d'un élément sur une page :
Vous pouvez également utiliser des raccourcis clavier pour accès rapide pour inspecter l'élément.
Raccourcis clavier (boutons) :
Google Chrome : Ctrl+Maj+I et Ctrl+Maj+C
Opéra : Ctrl+Maj+I et Ctrl+Maj+C
Mozilla Firefox : Ctrl+Maj+I et Ctrl+Maj+C
Navigateur Yandex : Ctrl+Maj+I et Ctrl+Maj+C
Après ces étapes, le code source s'ouvrira dans la même fenêtre du navigateur. les pages Web:
Tout le code HTML sera dans la grande colonne de gauche. Et les styles CSS sont à droite.
Avantage cette méthode, bien sûr, c'est que l'utilisateur a la possibilité de modifier le code source et d'éditer les styles. Autrement dit, vous pouvez modifier les styles sur le site et voir à quoi cela ressemblera avec certains styles, sans avoir à apporter immédiatement des modifications aux fichiers situés sur les serveurs d'hébergement. Pour modifier ou ajouter code de programme, vous devez double-cliquer sur le fragment requis ou complot. Bien entendu, la correction du code dans le navigateur ne sera pas effectuée sur les serveurs d'hébergement. Par conséquent, à l'avenir, vous devrez dans tous les cas copier ce code et l'écrire dans des fichiers.
Cette instruction vidéo décrit en détail et montre comment travailler avec les outils de développement :
Juste comme ça, juste en ligne, directement dans votre navigateur, vous pouvez visualiser le code source de la page du site, obtenir des données de base sur le code HTML et CSS, les modifier et les copier, sans avoir à télécharger les fichiers de ce site sur votre ordinateur .
D'ailleurs, les internautes inexpérimentés qui ont modifié le code de la page et s'attendent à ce qu'il soit enregistré seront déçus. Après tout, après avoir actualisé la page, toutes les modifications apportées disparaîtront. Cela ne suffit pas pour pirater le site :)
Comment afficher le code source sur un téléphone Android
Je voudrais également noter que les outils de développement ne sont pas disponibles uniquement dans la version de bureau des navigateurs, c'est-à-dire sur les ordinateurs et les ordinateurs portables. Sur les téléphones et tablettes (Android, iOS), vous pouvez également consulter le code source.
Pour ce faire, ajoutez le préfixe view-source à l'URL de la page en cours d'inspection :
Par exemple:
voir la source :https://site/turbo-rezhim-opera/
Nous avons publié un nouveau livre « Content Marketing in dans les réseaux sociaux: Comment entrer dans la tête de vos abonnés et les faire tomber amoureux de votre marque.
Le code source du site est un ensemble de balises HTML, Styles CSS Et Scripts JavaScript, que le navigateur reçoit du serveur Web.
Plus de vidéos sur notre chaîne - apprenez le marketing Internet avec SEMANTICA
Cela peut être comparé à un ensemble de commandements donnés aux soldats par un commandant. Imaginez que le public ne voit ni n’entende le patron. De leur point de vue, les militaires mènent leurs actions de manière indépendante. Dans notre cas, le commandant est le navigateur, les commandes sont le code source et les soldats en marche sont le résultat final.
Le site est stocké sur un serveur Web, qui envoie la page à la demande de l'utilisateur. Une demande consiste à saisir une URL dans la barre d'adresse, à cliquer sur un lien ou à cliquer sur un bouton d'envoi d'un formulaire. Peu importe la langue dans laquelle les pages Web sont écrites, qu'elles incluent partie logicielle. Le résultat final de tout algorithme côté serveur est un ensemble de balises HTML et de texte.
Le code source de la page est un ensemble de données qui comprend :
- balisage HTML ;
- feuille de style ou lien de fichier ;
- programmes écrits en JavaScript ou liens vers des fichiers avec du code.
Ces trois sections sont traitées par le navigateur. Pour le serveur, il s'agit simplement du texte qui doit être envoyé en réponse à la requête.
Pourquoi nous pourrions avoir besoin d'étudier le code source
Tout ce que nous voyons, nous pouvons l'analyser et l'appliquer pour résoudre certains problèmes qui surviennent lors de l'utilisation du site, notamment lors de son optimisation. En regardant le code source, nous pouvons :
- Consultez les balises méta de votre site ou de celui de quelqu’un d’autre pour les analyser.
- Voir la présence ou l'absence de certains éléments sur le site : compteurs, codes d'identification dans divers systèmes, certains scripts et d'autres choses.
- Découvrez les paramètres des éléments : tailles, couleurs, polices.
- Trouvez le chemin d’accès aux photos et autres éléments situés sur la page.
- Explorez les liens de la page.
- Trouver des problèmes avec le code qui interfèrent avec le processus d'optimisation du site Web : ceux qui ne sont pas abordés dans fichiers séparés styles, scripts, code invalide.
Ce sont les fonctionnalités de base, mais en fait, en étant capable de lire le code, vous pouvez en apprendre beaucoup plus sur la page.
Comment afficher le code source d'un site
Il ne sera pas possible de le faire complètement sous la forme dans laquelle il est publié sur le serveur depuis le navigateur. Mais vous pouvez voir tout le balisage en cliquant avec le bouton droit sur la page. Ici et plus loin Exemple Google Chrome.
Sélectionnez l’option « Afficher le code de la page » et obtenez la liste complète dans un onglet séparé.
C'est juste un texte qu'il faut analyser pour comprendre. Mais vous pouvez obtenir du code interactif à l'aide des outils de développement.
Comment trouver le code source d'une page de site Web
Cliquez sur l'icône de menu dans le navigateur. Le plus souvent, il se trouve à droite et ressemble à trois points ou rayures.
Au chapitre outils supplémentaires sélectionnez « Outils de développement ».
Une fenêtre s'ouvrira montrant l'état actif du code. Cela signifie que lorsque vous cliquez sur le balisage, le style de l'élément apparaîtra à côté et les blocs sélectionnés seront mis en surbrillance sur la page.
Dans l'onglet « Source » vous pouvez visualiser le contenu de certains fichiers : scripts, polices, images.
Dans l’onglet « Sécurité », vous pouvez vérifier le certificat du site.
L'onglet « Audits » vous aidera à vérifier la ressource publiée sur l'hébergement.
Si l'emplacement du panneau de droite n'est pas pratique, vous pouvez cliquer sur les trois points et le modifier en sélectionnant l'élément souhaité.
Comment afficher les balises méta
Chaque document HTML comprend des balises de structure. En voici quelques uns:
- Html – l’intégralité du document.
- Tête – section des en-têtes de service.
- Titre – titre de la page (affiché sur l'onglet).
- Corps – le corps du document.
- H1-H6 – titres de texte de page.
- Article – article.
- Section - section.
- Menu – menu.
- Div – bloquer.
- Portée – chaîne.
- P – paragraphe.
- Tableau – tableau.
Les éléments sont conçus pour délimiter logiquement les sections d'une page ; si nécessaire, ils sont conçus à l'aide de styles. Ils contiennent du texte visible d’une manière ou d’une autre sur la page. Mais la balise Head contient des informations sur le service. Les balises méta sont utilisées pour l'indiquer. Tout ce qui y est écrit est destiné au serveur et aux moteurs de recherche.
Leur contenu ne peut être découvert d'aucune autre manière.
Faisons attention à Balise de lien. Avec son aide, des liens vers des fichiers externes inclus sont spécifiés. Si vous le souhaitez, vous pouvez voir le contenu et l'enregistrer sur le disque. Pour ce faire, déplacez le pointeur sur l'adresse et appuyez sur RMB. Sélectionnez "Ouvrir dans un nouvel onglet".
S'ouvrira dans un nouvel onglet fichier spécifié, que vous pouvez visualiser ou enregistrer.
Comment afficher le code source d'une page pour déboguer un script
Dans ce cas, il est plus pratique d’ouvrir la page sur la machine locale. Si vous avez uniquement besoin de corriger le balisage, les styles et les scripts, cela peut être fait directement à partir du dossier. Le code HTML est visualisé de la même manière. Voici les erreurs Code JavaScript peut être vu dans l’onglet « Console ». Ceci affiche la description de l'erreur et le numéro de ligne où elle s'est produite.
La syntaxe est visible directement dans le code. C'est à cela que sert l'onglet « Source ».
Comment afficher le code d'un élément spécifique
Pour les grandes pages avec gros montantéléments, il est difficile de trouver le code requis dans tout le balisage. Dans ce cas, vous devez utiliser équipe spéciale menu contextuel. Déplacez la souris sur le fragment et appuyez sur RMB. Sélectionnez la commande « Afficher le code ».
La même fenêtre s'ouvrira, mais avec le focus sur l'objet sélectionné.
Résumé
Nous vous avons expliqué quel est le code source de la page. Il suffit de maîtriser les bases Connaissance HTML et CSS, et en utilisant des outils pratiques développeur, vous pouvez déboguer vos propres documents HTML.
La visualisation du code de ressource sur Internet vous permettra d'apprendre non seulement de expérience personnelle, mais utilisez également des exemples concrets. Et pour les spécialistes du référencement, les balises méta seront utiles, dont les informations peuvent en dire long sur le site.
1 voixBonjour, chers lecteurs de mon blog. Parfois, vous trouvez une belle fonctionnalité sur un site Web et commencez à vous demander comment le créateur a obtenu un effet aussi intéressant.
Il s’avère que la réponse est assez simple. Et si vous avez quelques compétences, vous pouvez collecter beaucoup de ces jetons pour un bref délais créez votre propre site Web unique.
Aujourd'hui, nous allons parler de la façon d'ouvrir le code d'une page, d'un certain élément, et apprendre à utiliser cette compétence à votre avantage.
Connaissance de base du code
Mon site est destiné aux débutants et je voudrais d'abord parler brièvement des sites et du code en général.
Pour dessiner une image, puis la découper en petits morceaux, écrivez du code pour que le navigateur rassemble tous les éléments en un seul tout. Tout vous semble très compliqué ? Pas du tout, et cela ne sert à rien de s’en affliger.
C’est ainsi que sont créés des sites Web de haute qualité. Si vous le souhaitez, impliquez-vous dans cette affaire et étudiez-la ; si vous ne le souhaitez pas, personne ne peut vous forcer.
Je ne dirai qu'une chose... il n'y a rien de plus agréable que de voir comment des mots incompréhensibles que vous avez écrits se transforment en un tout et prennent vie : les liens fonctionnent, les boutons bougent, les images bougent, le texte explore. Je pense que je sais ce que ressentait Victor Frankenstein.
Lorsque vous commencez à comprendre le langage secret et que vous voyez que tout est en réalité beaucoup plus simple qu'il n'y paraissait au départ, vous ne pouvez vous empêcher de croire en propre force et les capacités cérébrales. C'est très cool.
Comment sont créés les sites Web ? Idéalement, d'abord. Il peint juste un tableau. Par exemple, comme le montre l'image ci-dessous. Pour l'instant, ce n'est qu'une image, une photographie. Aucun lien ne fonctionne, quand vous cliquez vous n’allez nulle part, aucune recherche n’est effectuée.
D'après ce dessin. Regardez la capture d'écran ci-dessous. Vous pensez peut-être qu’il s’agit d’un ensemble de symboles ridicule et très complexe. En fait, tout n'est pas si compliqué, il existe un certain algorithme.
Il n'y a qu'environ 150 balises et chacune d'elles est responsable d'une action spécifique : lien, césure, gras, couleur, titre, etc. Les comprendre n’est pas si difficile si vous en avez l’envie et que le temps ne vous dérange pas.
Grâce à la connaissance de ces attributs, vous pouvez résoudre presque tous les problèmes. Mais chaque développeur trouve ses propres moyens d'atteindre son objectif.
Les créateurs expérimentés voient immédiatement comment obtenir des résultats, tandis que d'autres doivent réfléchir, chercher la réponse dans des articles ou dans le code source des concurrents. Ils récupèrent simplement la partie nécessaire sur un site tiers et la modifient eux-mêmes. Cela raccourcit considérablement le processus de travail.
Un peu plus tard, je vais vous montrer un exemple précis.
Voir le code
Alors, laissez-moi d'abord vous montrer comment agir si vous avez besoin de découvrir le code HTML de quelqu'un d'autre. Nous examinerons ensuite toutes les autres questions plus en détail.
La meilleure façon
La méthode que je vais décrire en premier est un peu compliquée pour les débutants, mais en guise d’introduction, lisez-la. Ouvrez la page et cliquez sur le bouton droit de la souris. Sélectionnez « Enregistrer sous... »
Enregistrez la page Web entière. Comme vous pouvez le voir sur la capture d'écran, j'ai déjà tout téléchargé à l'avance. Ici, nous avons deux dossiers.
Tout ce dont vous avez besoin est ici. Chaque élément. Si vous comprenez cela, vous pouvez rapidement obtenir tout ce dont vous avez besoin. Mais une telle tâche devient de plus en plus impossible. Il n'y a pas de téléchargement. Que faire s'il est interdit de copier une page ?
C'est Google Chrome
Comme vous l'avez peut-être déjà remarqué, j'utilise le plus souvent Google Chrome et apprendre le code de quelqu'un d'autre dans ce navigateur est aussi simple que décortiquer des poires. Comme en principe avec n'importe quel autre. Le schéma sera non seulement similaire, mais identique. Ouvrez la page dont nous voulons connaître le code et faites un clic droit n'importe où. Dans la fenêtre qui apparaît, cliquez sur « Afficher le code de la page ».
Une feuille de code s'ouvrira dans une nouvelle fenêtre, ce qui est assez difficile à comprendre pour un débutant. Mais ne vous inquiétez pas à l'avance.
Si vous avez besoin de connaître le code d'un seul élément, survolez-le simplement avec la souris et faites un clic droit. Sélectionnez une autre fonction Chrome : « Afficher le code de l'élément ».
Par exemple, je pourrais être intéressé par la manière dont le logo a été réalisé, à l’aide d’une image ou d’un langage de programmation ? Après tout, vous pouvez dessiner un carré avec aide css. De nombreux experts conseillent d’écrire autant d’informations que possible dans le code. Comment fonctionnent-ils sur les sites populaires ?
Il est donc apparu information nécessaire. html en haut, CSS en bas. Ce sont deux langues. Le premier est responsable du composant texte et le second de la conception. S'il n'y avait pas de CSS, vous devrez alors spécifier la couleur et la taille de la police à chaque fois. Pour chaque page, c'est très long. Mais s’il n’y avait pas de HTML, nous n’aurions pas de textes. Je l’ai expliqué grossièrement, mais en général, c’est comme ça.
À propos, si vous êtes intéressé par son fonctionnement ici, vous pouvez consulter le lien vers l'image ci-dessous. Voici votre réponse.
Mozilla Firefox
Si vous aimez travailler le mastic, tout sera exactement pareil. Ouvrez la page et cliquez sur le bouton droit de la souris. « Code source de la page » si vous souhaitez voir l'intégralité du code.
Lorsque vous survolez un élément, vous pouvez ouvrir son code.
Ici, les données sont affichées en bas de l’écran, mais sinon tout est exactement pareil.
Navigateur Yandex
Dans le navigateur Yandex, tout est exactement comme dans les deux options précédentes, ouvrez la page, faites un clic droit, voyez le code de la page.
On passe le curseur sur un élément si l'on veut connaître exactement son code.
Tout est affiché ici exactement de la même manière que dans Chrome.
Opéra
Et enfin, Opéra.
D’ailleurs, vous avez peut-être remarqué que vous n’êtes pas obligé d’utiliser une souris. Pour ouvrir le code il y a combinaison rapide touches et c'est pareil pour tous les navigateurs : CTRL+U.
Pour les éléments : Ctrl+Maj+C.
Voilà à quoi ressemble le résultat.
Ce sera intéressant pour les débutants
Maintenant, regardez comment tout fonctionne. Vous trouvez un site et aimez vraiment certains éléments. Par exemple, celui-ci. Vous savez déjà comment ouvrir le code de l'élément.
Maintenant, copiez-le.
Je l'utilise, colle ce code dans un nouveau fichier HTML, dans la balise body (body en anglais).
Voyons maintenant à quoi tout cela ressemblera dans le navigateur.
Prêt. Pour que le texte soit aligné sur les bords et acquière une couleur verdâtre, vous devez vous y connecter document css et copiez un autre code du site sur lequel nous avons volé celui-ci.
Je ne ferai pas ça maintenant. Cela demande plus de temps : le mien et le vôtre. Je pense que je décrirai tous les détails dans mes prochaines publications. Abonnez-vous à la newsletter et soyez le premier informé lorsqu'un article paraît.
Si vous ne pouvez pas le supporter, mais que vous souhaitez en savoir plus sur le HTML et le CSS dès maintenant, je peux traditionnellement vous recommander des formations gratuites.
Voici 33 leçons qui vous permettront de maîtriser le html - « Cours gratuit par HTML" .
Et ici informations complètesà propos du CSS - « Cours gratuit sur CSS (45 leçons vidéo !) » .
Maintenant, vous en savez un peu plus. Je vous souhaite du succès dans vos efforts. À la prochaine!
Ctrl+U
Comment puis-je visualiser le code source d'un élément ?
Faites un clic droit sur l'élément de page qui vous intéresse.
Google Chrome: "Afficher le code de l'élément"
Opéra: "Inspecter l'élément"
FireFox : « Analyser l'élément »
Dans d'autres navigateurs, recherchez un élément de menu ayant une signification similaire.
Salut tout le monde!
J'ai spécialement exposé tout le sujet au début de l'article, pour ceux qui recherchent une réponse rapide.
L'information est peut-être connue de beaucoup, mais comme j'écris pour les blogueurs débutants, les programmeurs Web et autres prospecteurs, cet article de référence est un incontournable.
À l'avenir, vous étudierez certainement le code source des pages et des éléments individuels.
Jetons un coup d'oeil à exemple spécifique comment utiliser l'affichage du code source d'une page.
Par exemple, nous voulons voir ce que mots clés(mots-clés) sont utilisés pour page spécifique. Nous allons à la page Web qui nous intéresse et appuyons sur Ctrl+U. Le code source de cette page s'ouvrira dans une fenêtre séparée ou dans un onglet séparé. Appuyez sur Ctrl+F pour rechercher un extrait de code. DANS dans ce cas tapez le mot « dans le champ de recherche » mots clés". Vous serez automatiquement redirigé vers un morceau de code contenant cette balise méta et le mot recherché sera mis en surbrillance.
Par analogie, vous pouvez rechercher et étudier d'autres fragments de code.
L'affichage de l'intégralité du code source d'une page n'est dans la plupart des cas pas très pratique, donc dans tous les navigateurs, il est possible d'afficher le code d'un élément ou d'un fragment individuel.
Utilisons un exemple spécifique de visualisation du code d'un élément. Par exemple, voyons si le lien a un attribut nofollow. Faites un clic droit sur le lien qui nous intéresse et dans le menu contextuel déroulant, faites un clic gauche sur l'élément "Afficher le code de l'élément" ou similaire (selon votre navigateur). Ci-dessous, dans une fenêtre spéciale pour l'analyse du code, nous obtenons quelque chose de similaire.
On voit que le code du lien contient rel=”nofollow” . Cela signifie que les relations publiques ne « fuiront » pas via ce lien. Nous en parlerons plus en détail dans les articles suivants. Maintenant, l'important est que vous sachiez maintenant comment afficher le code source de la page et le code source d'un élément individuel.