Que cela vous plaise ou non, tôt ou tard vous devrez entrer dans votre Fichiers WordPress et modifiez-les en fonction de vos besoins. Il existe également la possibilité d'attirer des programmeurs, mais chacune de ces demandes vous coûtera de l'argent, dans la plupart des cas. argent décent derrière travail simple prenant peu de temps. Afin d'économiser votre argent, qui peut être dépensé pour la promotion de votre site, et non pour un programmeur, je vais vous apprendre à trouver rapidement les sections de code nécessaires dans le plugin ou les fichiers de thème.

Pourquoi avez-vous besoin d’une recherche rapide dans les fichiers php, CSS, html ?

La plupart d'entre vous, après avoir consulté cet article, savent déjà pourquoi ils ont besoin d'une telle fonction, en recherchant dans tous les fichiers à la fois, mais si vous êtes entré au tribunal par accident, je vais vous donner des exemples typiques qui correspondent à ce sujet.

Vous devrez peut-être trouver :

• Des classes. Lorsque vous décidez de réparer une classe, ou de la configurer différemment, vous devrez trouver l'endroit où elle est utilisée. S'agira-t-il de fichiers CSS ou de tout autre fichier .
• Fonctions d'édition. Si vous décidez de corriger une fonction, c'est bien de pouvoir la trouver dans les fichiers de fonction, mais vous devrez alors également déterminer où elle est appelée dans d'autres fichiers.
• Nettoyer le thème de . Il est tout aussi important de réduire le nombre de requêtes sur la base de données, que WordPress génère très un grand nombre de, en appelant des fonctions intégrées, par exemple .

Tout autre problème que vous pourriez rencontrer lors de la recherche d'éléments dans un fichier inconnu sera résolu par le guide présenté ci-dessous.

Comment rechercher des sections de code dans des fichiers ?

Pour commencer, nous devons télécharger et installer un logiciel rapide et utile Éditeur de bloc-notes++ qui peut être téléchargé à partir de ce lien.

Après l'installation, allez dans l'éditeur et ouvrez les fichiers dont nous avons besoin, je prendrai les fichiers du thème Twenty Fourteen, vous pouvez utiliser le vôtre.

Pour ouvrir tous les fichiers de thème, vous devez tous les sélectionner et les faire glisser dans la fenêtre de l'éditeur.

Les fichiers ont été transférés, en général nous ne pouvions pas le faire, mais à l'avenir il sera plus rapide de les éditer.

Fichiers dans l'éditeur ? Super, maintenant nous appelons la fenêtre de recherche en appuyant sur les touches Maj + Ctrl + F, nous verrons ce qui suit :

Dans l'exemple, j'ai indiqué le nom de la classe pour indiquer la marque de l'auteur de l'article dans les publications ; cela peut être nécessaire pour ceux qui créent des pages en double.

Dans le champ « Dossier », indiquez le dossier avec le thème dans lequel se trouvent nos fichiers. Après cela, cliquez sur le bouton « Rechercher tout ».

Si vous saisissez correctement le paramètre, en bas de l'écran, vous verrez une liste de fichiers dans lesquels cette classe et ces lignes de code sont utilisées, pour une recherche rapide.

Dans mon cas, ce sont deux fichiers situés à l'emplacement spécifié vert adresse. La classe elle-même est surlignée en rouge, que l'on peut trouver en faisant défiler horizontalement.

Après avoir déterminé le répertoire du fichier et la ligne dans laquelle le paramètre est utilisé, vous pouvez procéder à l'édition.

Pour plus de clarté, définissons également une balise « maligne » infos sur le blog, lorsqu'elle est appelée, des requêtes sont créées dans la base de données.

Vous serez probablement surpris du nombre d'appels à cette fonction, qui peut facilement être rendue statique sans ralentir le moteur.

Et qu'au moins 8 appels à la base de données à partir de chaque chargement de page pour chaque utilisateur peuvent être évités si vous ajustez correctement le code du modèle.

Si vous rencontrez des difficultés, écrivez dans les commentaires, nous essaierons de vous aider, ou si vous en savez plus façon rapide recherche information nécessaire dans les fichiers, je serai également heureux d'y jeter un œil.

Chaque internaute a ses sites favoris sur lesquels il passe beaucoup de temps. Et seuls les paresseux n'ont pas pensé à regarder comment il avait été créé et en quoi il consistait. Il est impossible de répondre à toutes ces questions, car il existe de nombreuses façons de créer un site Web, mais regarder les commandes et les codes qui le composent est possible et accessible à tous.

Une autre question est de savoir si une personne qui n'est pas impliquée dans la programmation comprendra l'un des symboles qui composent le code. Mais d'après les exemples qui seront donnés ci-dessous, tout Utilisateur Google Chrome pourra voir éléments individuels des sites.

Comment afficher le code source d'une page html dans un navigateur Google

Pour pouvoir afficher le code de la page dans Chrome, vous devez vous rendre sur le site qui vous intéresse et effectuer les étapes suivantes :

Ces deux éléments diffèrent par leurs fonctionnalités et leurs informations pour l'utilisateur, le programmeur ou le pirate informatique.

Quelle est la différence entre le code de la page et simplement la commande « Afficher le code » ?

En analysant chacune de ces fonctions, vous pouvez rédiger un article séparé. Pour les programmeurs, cette différence est significative et ils comprennent dans quels cas il faut utiliser « Afficher le code », et dans quels « Afficher le code de la page » dans Navigateur Google Chrome.

Mais pour l'utilisateur moyen, ces fonctions peuvent être divisées selon les objectifs suivants :

1. « Afficher le code de la page » n'est nécessaire que pour voir la combinaison principale de la page. En gros, il s'agit de la structure du site (sans modèles supplémentaires sous forme de fichiers CSS et autres ajouts qui restent dans le dossier du créateur du site). Cette structure n'est pas adapté pour créer votre propre page par « copier-coller », mais il vous permettra de voir exactement ce que le programmeur a fait et dans quel ordre pour que le site apparaisse dans le navigateur Google Chrome avait cette conception externe.
2. « Afficher le code » affiche une structure détaillée, mettant en évidence toutes les zones concernées sur la page. Si vous survolez un code de liste spécifique, il mettra en évidence l'élément du site auquel il appartient.
3. Afficher le code de la page qui s'ouvre dans navigateur séparé sans possibilité de le modifier. Autrement dit, il ne convient que pour copier et lire le code du site. Mais ce n'est pas une fonction moins utile.
4. « Afficher le code » est modifiable et vous pouvez modifier n'importe quel élément de la manière qui vous convient. Bien sûr, tous ces changements «vivront» jusqu'à ce que la page soit actualisée, mais il est parfois amusant de parcourir ces paramètres et de simplement comprendre pourquoi telle ou telle valeur est nécessaire et ce qui se passera si vous la modifiez. Vous ne devez pas supposer que de telles actions vous feront du mal ou feront du mal au site - ces modifications n'affectent que le code de votre Google Chrome et ne sont pas mises en ligne.

Nous réfléchissons à la question de savoir comment afficher le code de l'élément

Si nous devions répondre à une telle question, la seule option qui s’impose serait un exemple. Parce que dans un article, il est très difficile de devenir une personne qui comprend ce sujet (développeur Web), mais montrer avec un exemple pour que la question soit réglée est beaucoup plus facile.

La fonctionnalité du code de l'élément est très large, nous prenons donc l'un des mots du site Web du navigateur Google Chrome. Nous voulions réfléchir aux mots-clés (dans le code, il sera écrit « mots-clés ») qui ont été utilisés pour notre site. Pour ce faire, nous exécutons l'algorithme suivant :

Autres façons d'utiliser cette fonctionnalité dans le navigateur Google Chrome

En général, en continuant à répondre à la question de savoir comment examiner le code d'un élément et pourquoi il est nécessaire, vous devez lister ses fonctions. A savoir, grâce à la possibilité de visualiser le code d'un élément de n'importe quel site dans le navigateur Google Chrome, nous pouvons :

• Voir la structure du site en commençant par head (« en-tête du site ») et en terminant par end (la commande finale de tout programme) ;
• Visualiser toutes les fonctionnalités du site, à savoir : des liens vers d'autres sites, des modules supplémentaires issus de sites externes et la présence de compteurs intégrés permettant de collecter diverses informations ;
• Découvrez si la copie à partir du site est interdite ou non ;
• Le code enregistrera tous les liens vers d'autres pages du site, ainsi que leur conception et les actions ultérieures après avoir cliqué dessus.

Il ne s’agit en aucun cas d’une liste finie. Mais il faut rappeler que sans connaissances particulières– « lire » le code Pages Google Chrome est presque impossible et les données obtenues à l'utilisateur moyen pratiquement pas nécessaire.

L'élément « Afficher le code de l'élément » ne fonctionne pas

Il faut dire d'emblée que chaque site aura accès libre aux codes des éléments. Autrement dit, même les sites les plus populaires et les plus chers seront ouverts à la visualisation de leur code. Par conséquent, si l'élément dans le navigateur Google Chrome n'est pas actif ou génère une erreur, les raisons possibles sont les suivantes :

• Le profil utilisateur est corrompu ;
• La présence de logiciels malveillants sur l'ordinateur ;
• Blocage par une certaine extension pour augmenter les performances (même cela peut arriver).

Réparation d'un profil utilisateur endommagé

Créer nouveau profile, vous devez supprimer l'ancien de votre ordinateur. Pour ce faire, nous procédons comme suit :

1. Fermez Google Chrome et lancez le module intégré Navigateur Windows Explorateur.
2. Entrez la commande suivante dans la barre d'adresse : %LOCALAPPDATA%\Google\Chrome\User Data\.
3. Lorsque le répertoire s'ouvre, recherchez le dossier « Default » et ajoutez « Backup » à son nom pour qu'il ressemble à ceci : « Backup Default ».
4. Désormais, après avoir redémarré le navigateur Chrome, un nouveau profil sera créé.

Nous supprimons les logiciels malveillants ou leurs restes

Si le nouveau profil ne nous donne pas accès au code de l'élément de page et que l'erreur persiste, nous devons procéder comme suit :

1. Ouvrez la ligne de commande Chaîne Windows(« Exécuter ») et entrez la commande « cmd » ici.
2. Entrez la commande suivante dans la ligne : RD /S /Q « %WinDir%\System32\GroupPolicyUsers ».
3. Après avoir confirmé l'action, saisissez ceci : RD /S /Q « %WinDir%\System32\GroupPolicy ».
4. Maintenant « gpupdate /force » (sans les guillemets).

Si tout a été fait correctement, alors après le redémarrage Ordinateur Google Chrome ouvrira le code des éléments et le navigateur fonctionnera normalement.

1 voix

Bonjour, 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 un grand nombre de ces fonctionnalités et créer votre propre site Web unique en peu de temps.

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 y 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 à constater 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 vos propres forces et 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. Ensuite, nous examinerons plus en détail toutes les autres questions.

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 comment Plus d'informationécrire en 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 souhaitez savoir comment cela fonctionne 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 bouton de droite 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 connecter le CSS à ce document et copier un autre code du site à partir duquel nous avons copié 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!

Nous avons libéré nouveau livre"Le marketing de contenu dans dans les réseaux sociaux: Comment entrer dans la tête de vos abonnés et les faire tomber amoureux de votre marque.

S'abonner

Le code source du site est une combinaison de balisage HTML, de 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 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:

1. Html – l’intégralité du document.
2. Tête – section des en-têtes de service.
3. Titre – titre de la page (affiché sur l'onglet).
4. Corps – le corps du document.
5. H1-H6 – titres de texte de page.
6. Article – article.
7. Section - section.
8. Menu – menu.
9. Div – bloquer.
10. Portée – chaîne.
11. P – paragraphe.
12. 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".

Le fichier spécifié s'ouvrira dans un nouvel onglet, que vous pourrez 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. Mais des erreurs de code JavaScript sont visibles 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 les éléments sont difficiles à trouver code requis tout au long du 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 connaissances de base de HTML et CSS, et d'utiliser 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.

En parcourant d’innombrables sites sur Internet, vous pouvez en trouver qui nous plaisent beaucoup. Plusieurs questions se posent immédiatement. Le site a-t-il été réalisé à l’aide d’un code fait maison ou d’une sorte de CMS ? Quels sont ses Styles CSS? Quelles sont ses balises méta ? Et ainsi de suite.

Il existe de nombreux outils qui peuvent être utilisés pour extraire des informations sur le code d’une page d’un site Web. Mais nous avons toujours le bouton droit de la souris à portée de main. C'est ce que nous utiliserons, en prenant mon site comme exemple.

Comment afficher le code de la page ?

Pour afficher le code source d'une page du site, vous devez passer votre souris sur n'importe quelle zone de la page Web (à l'exception des images et des liens). Après cela, cliquez sur le bouton droit de la souris. Une fenêtre avec plusieurs options s'ouvrira devant nous (en différents navigateurs ils peuvent différer légèrement). Dans le navigateur Google Chrome, par exemple, voici les commandes :

• dos;
• avant;
• redémarrer ;
• enregistrer sous;
• joint;
• traduire en russe ;
• voir le code de la page;
• voir le code.

Nous devons cliquer sur voir le code de la page, et le code html de la page du site s'ouvrira devant nous.

Visualisation du code de la page : à quoi faut-il faire attention ?

Ainsi, le code de la page HTML est une liste numérotée de lignes, chacune contenant des informations sur la façon dont ce site est créé. Pour apprendre rapidement à comprendre ce grand nombre de signes et caractères spéciaux, vous devez faire la distinction entre les différentes sections du code.

Par exemple, les lignes de code à l'intérieur de la balise head contiennent des informations pour moteurs de recherche et les webmasters. Ils ne sont pas affichés sur le site. Ici vous pouvez voir comment mots clés Cette page est promue en fonction de la façon dont son titre et sa description sont rédigés. Vous trouverez également ici un lien, à la suite duquel nous découvrirons la famille de polices Google utilisée sur le site.

Si le site est réalisé sur CMS WordPress ou Joomla, alors il sera également visible ici. Par exemple, cette zone affiche des informations sur Thème WordPress ou un modèle de site Web Joomla. Vous pouvez le voir en lisant le contenu des liens surlignés en bleu. Un lien montre un modèle de site Web.

Par exemple:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Nous verrons les styles de police CSS de la page. Dans ce cas, la police est utilisée. Cela peut être vu ici - font-family : 'Source Sans Pro'.

Ce site est optimisé grâce à un plugin SEO Yoast SEO. Cela peut être vu dans cette section de code commentée :

Ce site est optimisé avec le Plugin Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Toutes les informations contenues dans la balise body sont affichées par le navigateur sur l'écran du moniteur. Ici, nous voyons le code html de la page, et tout en bas se trouve le code du script Yandex Metrics. Il est entouré d'une balise commentée avec le texte :

/Compteur Yandex.Metrika

Résumons-le

Après avoir procédé à une analyse assez superficielle du code page d'accueil site, nous pouvons tirer une conclusion sur les outils avec lesquels cette page a été réalisée. Nous avons vu dessus :

• CMS WordPress ;
• Police Google Source Sans Pro ;
• Thème WordPress – Sydney ;
• Plugins Yoast ;
• Compteur de métriques Yandex.

Maintenant le principe de l'analyse Code HTML La page du site est assez claire. Il n'est pas du tout nécessaire de garder la page que vous recherchez ouverte dans le navigateur. Vous pouvez enregistrer le code de la page sur votre ordinateur à l'aide des combinaisons de touches ctrl+a, ctrl+c, ctrl+v. Collez-le dans n'importe quel éditeur de texte(de préférence Notepad++) et enregistrez avec l'extension html. De cette façon, vous pouvez l’étudier plus en profondeur à tout moment et trouver des informations plus utiles pour vous-même.