" Le même point est dans menu contextuel, qui si vous faites un clic droit sur le texte pages. Vous pouvez également utiliser une combinaison Touches 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." Ces sélections reçoivent respectivement les raccourcis clavier CTRL + U et CTRL + MAJ + U. 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"puis le code source avec coloration syntaxique sera ouvert dans un 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.

Compétence changement source pages– une compétence utile pour un utilisateur Internet avancé. En remplaçant le code HTML, vous pouvez modifier ouvrir une page Web comme vous voulez. Dans cet article, nous vous dirons comment changer le code de la page dans Google Chrome. Cependant, dans d'autres navigateurs, tout se fait de la même manière, il ne devrait donc y avoir aucune difficulté.

Quel est le code HTML de la page ?

Chaque page que vous ouvrez dans votre navigateur possède son propre code dans le langage de balisage HTML. Ce code représente les balises et le texte. Les balises sont des étiquettes uniques qui indiquent au navigateur comment afficher telle ou telle partie du site. Le texte est le contenu de la page, ce que l'utilisateur voit. De plus, des styles CSS peuvent être connectés à la page, ce qui définit apparenceéléments de page. À changer le code source du site vous n’avez pas besoin de connaître parfaitement HTML et CSS, et vous le constaterez bientôt par vous-même.

Pourquoi changer une page web ?

Vous pouvez modifier les données sur le site, modifier le texte du message ou prendre une fausse capture d'écran. Veuillez noter que toutes les modifications ne sont visibles que par vous et disparaîtront lorsque vous rechargerez la page. De plus, les données modifiées ne seront pas réelles. Par exemple, si je n’ai pas 10 dollars et que je le change en 100, alors je n’aurai plus d’argent. Il s'agit simplement de l'affichage de la page par le navigateur. Exemple:

Après:

Par exemple, je vais prendre le même site et modifier l'annonce précédente de l'article « Ouverture de la page principale dans Google Chrome. Je fais un clic droit sur l'élément que je souhaite modifier, par exemple le titre de l'annonce et sélectionne « Afficher le code ».

Dans la fenêtre qui s'ouvre, allez dans l'onglet Éléments et voyez le code HTML de la page. Nous devons y trouver le texte qui nous intéresse. (souligné en rouge)

Maintenant, je vais supprimer l’ancien texte et en écrire un nouveau.

C'est tout, le titre de l'annonce a été modifié. Je vais maintenant modifier l'annonce elle-même, les balises et la catégorie.

Vous pouvez insérer une autre image en modifiant l'attribut src dans la balise img.

Ainsi, aujourd'hui, nous examinerons plusieurs moyens utiles pour les webmasters qui facilitent la vie lors de la conception d'un site Web. Commençons par la console pour webmasters dans Google Chrome. Et passons en revue les questions qui se posent le plus souvent à un webmaster lors de la mise en page d’un site Web.

Pour accéder à la console, ouvrez votre site Web dans Google Chrome, faites un clic droit n'importe où sur la page Web et sélectionnez « Afficher le code de la page » dans le menu déroulant contextuel, ou sur un élément spécifique à étudier en sélectionnant « Afficher le code » élément".

En haut, vous aurez plusieurs onglets répertoriés. Aujourd'hui, nous allons parler de l'onglet « Éléments » , qui présente les éléments d'une page web avec une mise en évidence des balises, des propriétés, une mise en évidence de l'imbrication des éléments, une représentation de la hiérarchie des éléments dans l'arborescence DOM (un indice en bas, du parent racine au courant), la possibilité pour éditer des éléments, une liste de leurs propriétés, pensez à rechercher par éléments, ainsi que Faisons connaissance avec la visualisation des styles CSS, etc., associés aux éléments.

Comment puis-je afficher tous les styles associés à un élément spécifique ? Lequel est utilisé actuellement ? Dans quels fichiers se trouvent-ils ?

Alors rien de plus simple ! Ouvrez le navigateur Google Chrome, ouvrez notre site - la source des questions, faites un clic droit sur l'élément souhaité s'il est visible dans le contexte de la page, et sélectionnez « Afficher le code de l'élément » dans le menu contextuel.

En bas nous avons une console avec un onglet en surbrillance à gauche " Éléments" et tous les styles associés à l'élément à droite, où : Styles calculés- Ce sont les styles généraux "résumés" qui ont été attribués à un élément depuis règles CSS et les paramètres du navigateur de l'utilisateur (son environnement), et l'onglet est réduit.

Mais nous nous intéressons à l'onglet « Styles », développé en dessous, qui liste tour à tour tous les styles attribués à l'élément, ainsi que les fichiers où ces règles sont précisées pour cet élément par son type, son identifiant, sa classe, son nom, sa propriété. , attribut, etc. De plus, si une règle CSS est barrée, cela signifie qu'elle a été redéfinie plus tôt/plus tard (ce qui permet de savoir facilement laquelle des règles CSS est prioritaire et est appliquée dans ce cas à l'élément).

Sous la console se trouve une ligne qui affiche l'élément dans la hiérarchie du document, vous permettant facilement de visualiser la liste complète des éléments parents de la racine à l'élément sélectionné. Quelque chose comme des « miettes de pain ».

Balise html non visible dans le contexte de la page ? Ou avez-vous besoin de rechercher toutes les balises, par exemple, par une classe, un nom, une propriété ou un type spécifique ?

Ouvrez le site dans Google Chrome, faites un clic droit, appelez le menu contextuel, sélectionnez « Afficher le code de la page » . Appuyez en même temps sur la combinaison de touches « CTRL + F », entrez la phrase dont nous avons besoin ( Par exemple: classe = »rembourrage") et parcourez la liste des résultats trouvés, en visualisant simultanément tous les styles associés aux éléments souhaités sur le côté droit de la page.

Comment visualiser le code html d'un ou plusieurs éléments chargés dynamiquement (par exemple : via Ajax)

Nous attendons que la page se charge dans Google Chrome. Nous effectuons les actions nécessaires au fonctionnement d'Ajax. Faites un clic droit sur les données chargées, sélectionnez « Afficher le code de l'élément » dans le menu contextuel et examinez le résultat dans la console dans l'onglet « Éléments » à gauche.

Afficher les changements de style CSS en temps réel

À propos, il est également pratique d'observer, si nécessaire, quels styles sont attribués à un élément à la volée, par exemple lors du défilement d'une galerie et d'autres événements programmés. Tous les styles attribués via javascript en temps réel seront affichés dans la propriété styleélément sélectionné dans la fenêtre de l'onglet « Éléments ».

Visualisez de manière interactive l'impact des règles CSS sur la présentation des balises HTML

Google Chrome fournit une console interactive pour les styles CSS. Cela signifie que vous pouvez non seulement voir quels styles sont appliqués à un élément, mais également déplacer le curseur de la souris vers un élément spécifique. propriétés CSS, activez-le à l'aide de la case à cocher contextuelle à droite, ou désactivez-le en décochant l'indicateur et en affichant le résultat résultant sur la page.

On change la structure de présentation des éléments html à la volée (directement dans le navigateur)

Ainsi, nous avons déjà appris à explorer la structure d'un document Web dans Google Chrome, nous allons maintenant examiner brièvement l'édition d'éléments à la volée. Nous allons à la console de la manière qui nous convient. On retrouve l'élément souhaité dans l'onglet « Éléments », on fait un clic droit dessus, appelant ainsi le menu contextuel contextuel :

• Ajouter un attribut– ajoute un attribut pour l'élément spécifié. Dès que le curseur devient actif, nous commençons à définir la propriété souhaitée. Par exemple: nous écrirons name="itemImage", qui sera immédiatement ajouté à notre élément.
• Modifier l'attribut– si vous faites un clic droit sur un attribut d'élément, l'élément devient disponible modifierattribut. Cliquez et modifiez.

Exemple d'utilisation : Nous avons oublié le mot de passe enregistré sous les astérisques dans Google Chrome (si le mot de passe a été enregistré dans ce navigateur). Faites un clic droit sur l'élément avec le mot de passe saisi, cliquez sur « Afficher Code élément» , dans la console sur l'onglet de gauche Éléments faites un clic droit sur l'attribut type="password", faites un clic gauche sur Modifierattribut changer l'attribut tapez = "mot de passe" sur tapez = "texte", et maintenant, au lieu d'astérisques, le même mot de passe est affiché sous forme de texte.

• ModifierHTML– faites un clic droit sur l’élément dans la console Éléments, sélectionner ModifierHTML, changez le code à votre guise.
• CopiecommeHTML– nous copions la partie du HTML dont nous avons besoin pour des recherches plus approfondies, par exemple dans un bloc-notes, ou à d'autres fins où nous devons appliquer exactement la même mise en page. Nous gagnons du temps.
• CopieXPATH– copie la représentation XPATH de la structure de la racine de l'élément parent vers l'élément sélectionné.
• Supprimernœud– si vous devez supprimer l'élément actuellement sélectionné et tous ses enfants du contexte les pages Web, et voyez le résultat.
• Motenvelopper– affichera une vue de page Web dans le contexte de la console Éléments plus lisible.

Dans les articles suivants, nous continuerons à considérer les outils pour les webmasters, et en particulier nous nous familiariserons avec les onglets restants des outils pour les webmasters dans Google Chrome et pensez également au débogage erreurs javascript en utilisant différents navigateurs

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 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!

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 ? De quels styles CSS dispose-t-il ? 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 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.