Taille, couleur de certains éléments importants blog - comme le titre du blog ou de l'article, la balise more, etc. J'ai recherché manuellement le code requis, en expérimentant avec le domaine de test, sur la base duquel l'article a ensuite été rédigé.
Et récemment, j'ai dû changer la couleur des liens. Après avoir parcouru un tas de littérature sur cette question, je me suis rendu compte d'une chose simple : chacun donne des exemples de propres modèles, mais nous avons tous des modèles différents et c'est bien si le code de l'exemple est au moins un peu similaire : si vous ne vous plaignez pas, je le trouverai toujours en cherchant - au hasard.
Le numéro n'a pas fonctionné avec le code de lien. Tout le monde a montré des chemins complètement différents. Je me demandais s'il existait un outil simple et précis, comment trouver code requis html sur n'importe quel site. De nombreux blogueurs, même expérimentés, ont des difficultés à apporter des modifications mineures au modèle. Il n’y a rien de mal à cela, car chacun a ses propres intérêts et objectifs en matière de création d’un site Web.
Si vous souhaitez apporter de petites modifications au modèle, par ex. modifier n'importe quel titre, titre des articles et sections, couleur et taille des polices et des liens, Il suffit généralement d'apprendre principe simple, dont il est question dans cet article. Mais il existe aussi des cas complexes qui nécessitent soit une étude plus approfondie du html et du css, soit l'aide d'un spécialiste.
Un jour, une connaissance m'a demandé de trouver où changer la couleur du panneau de catégorie dans son modèle. Téléversé un sujet dans un sous-domaine de test. Les paramètres de cet élément n'étaient pas stockés dans style.css, mais dans un autre fichier, donc une personne ne pouvait pas le trouver.
Comment trouver et modifier le code html et css d'un site
Si vous n'aimez pas les longs articles, c'est pour vous à la fin de l'article un didacticiel vidéo qui explique comment voir le code HTML du site Web à l'aide de Notepad++ et apporter des modifications à la conception de n'importe quel modèle en utilisant un exemple de modification de la couleur de la police. Dans la vidéo, il y a d'autres subtilités dans la gestion d'un blog. Et pour ceux qui sont plus proches et plus clairs du texte, ci-dessous analyse détaillée thèmes avec captures d'écran.
httpv://youtu.be/uIlVvwCt2ho
Termes et concepts
Il serait plus juste de titrer l’article « Comment trouver code CSS ", mais j'ai décidé d'utiliser le "mauvais" nom, car fondamentalement, la réponse à cette question se trouve en HTML. CSS et HTML sont des choses très différentes, même s’ils constituent deux parties du même système. Il existe de nombreux articles techniques sur Internet, ici il nous suffira de comprendre que :
- HTML— est responsable de la structure du site (ce qui suit quoi, dans quel ordre, etc.). C'est la base sur laquelle le site est créé. Si on la compare à une maison, alors c'est sa disposition, la disposition des pièces.
- CSS— est responsable de la conception (quelles polices, tailles, couleurs, etc.). C'est le style général de la maison et le style de ses pièces individuelles : quel type de papier peint il y aura, lampes, rideaux, meubles. Par conséquent, le document qui indique codes CSS, appelé "feuille de style"
Et si vous vous demandez comment changer, par exemple, la couleur du titre du site, la taille de la police dans les textes ou la couleur des en-têtes dans la barre latérale, alors vous devez rechercher tout cela dans la feuille de style CSS. C'est la seule chose qui mérite d'être comprise en premier afin d'apporter vous-même des modifications au code.
J’aime rendre le complexe simple. Je me souviens qu'il y a longtemps, lorsque j'avais ma première voiture, elle était très vieille, le câblage était pourri, les fusibles sautaient souvent et à chaque fois je la remorquais jusqu'à la station-service. Imaginez combien d'argent a été gaspillé, étant donné que auto-remplacement Il s'est avéré que cela coûte un centime.
Un jour, j'ai regardé ce que faisait exactement le maître. Je ne sais toujours pas comment fonctionne le fusible. Mais je sais où le changer). Je ne réparerais pas le moteur moi-même et il n’est pas difficile de remplacer le fusible. C'est la même chose avec les sites Web.
Si vous ne voulez pas devenir programmeur, il n’est pas nécessaire d’avoir une compréhension approfondie de la programmation. Il est suffisamment clair pour comprendre ce qui est destiné à quoi, où le chercher et comment le changer. Il est préférable de changer ce que vous pouvez vous-même et de laisser tout le reste aux spécialistes. L'article sur contient un lien utile sur ce sujet.
Avez-vous besoin d’être un expert en tout ?
Il y a souvent des discussions sur les blogs SEO pour savoir si un débutant doit avoir une compréhension approfondie du HTML, ou mieux encore, apprendre à écrire lui-même des sites Web pour que tout soit unique. Eh bien, je ne sais pas - chacun son goût, et ici, ce qui est le plus proche de qui est le plus proche. Je m'intéresse un peu plus, donc j'apprends maintenant davantage de Vladimir. En novembre de cette année, Vladimir a ouvert son propre blog. Son blog a été réalisé sur le modèle le plus simple et gratuit, il ne l'a que légèrement modifié à sa convenance.
Après 10 jours d'existence, le blog a pris la 104ème place dans le classement de tous les sites Runet avec un trafic d'environ 1,5 mille personnes par jour. En 10 jours. Alors, quel est le problème ? Vladimir connaît bien le HTML et peut commander et acheter lui-même un modèle unique. Donc tu dois comprendre que Le secret ne réside pas dans les modèles, mais dans l’utilité des informations.
Où est caché le code HTML ?
Désolé pour la digression, revenons à nos codes). Supposons que vous souhaitiez modifier la couleur de la police du titre de votre blog. Regardons l'exemple de mon site de test.
- Ouverture du site dans un navigateur Google Chrome (si vous ne l'utilisez pas encore, installez-le - il est bien conçu pour travailler avec des sites Web, il contient de nombreux outils intégrés).
- Nous déplaçons le curseur de la souris sur l'élément que nous allons modifier . Dans ce cas, le nom du blog. Nous faisons un clic droit dessus et dans la fenêtre qui apparaît, sélectionnez AFFICHER LE CODE DE L'ÉLÉMENT.
IMPORTANT : ne confondez pas cela avec AFFICHER LE CODE DE LA PAGE ! Nous n'avons plus besoin de la page entière maintenant, juste d'un élément séparé.
Cliquez dessus - une fenêtre de visualisation du code apparaît en bas du navigateur :
La ligne de code que nous modifions est surlignée en rouge.
Mais la zone surlignée en bleu contient ce que nous recherchons. C'est ici que vous pouvez trouver la ligne de code exacte (et non approximative) responsable des polices, de la couleur, de la taille, de la surbrillance, etc. De cette façon, vous pouvez découvrir N'IMPORTE QUEL code de n'importe quel élément de n'importe quel modèle.
Recherchez la ligne souhaitée dans le bloc surligné en bleu. Il y a un curseur sur la droite, vous pouvez faire défiler et trouver la ligne dont vous avez besoin.
Principe général où chercher quelque chose :
Nom de la police - dans la ligne FONT FAMILY
Taille de la police - dans la ligne FONT SIZE
Couleur de police - dans la ligne COULEUR
Voici trois lignes principales dans lesquelles le nom, la taille et la couleur de la police de tout élément changent. A droite dans le style ligne css la position de la ligne dans le document est indiquée. Si vous devez modifier un autre élément (par exemple, vous devez savoir où se trouve la ligne où vous pouvez changer la couleur de la barre de menus ou la couleur des liens), tout se fait exactement de la même manière.
ATTENTION:
La ligne que nous allons copier est surlignée en rouge sur la figure,
afin que vous puissiez le retrouver plus tard dans la feuille de style.
4. Copiez la ligne. Puisque dans cet exemple nous souhaitons changer la couleur du nom du site, je copie la ligne mise en évidence dans le rectangle rouge de la deuxième image. Dans mon template, il se charge de changer la couleur du titre du site :
#header h1 a, #header h1 a:visité (
Recherchez la ligne souhaitée dans le fichier « feuille de style (style.css) ». Cela est déjà fait dans le panneau d'administration. Je demande fortement que, même s'il n'y a pas de confiance et de compréhension complète, toutes les expériences soient effectuées sur un sous-domaine de test afin d'exclure .
Alors, allez dans le panneau d'administration : CONSOLE - APPARENCE - EDITEUR. Dans la barre latérale droite, nous trouvons le fichier STYLE TABLE (STYLE.CSS), ouvrez-le.
Maintenant, ouvrez la barre de recherche Touches CTRL+ F : une fenêtre de ligne vide apparaîtra dans la fenêtre supérieure. Nous y collons la ligne que nous avons copiée à l'étape 4.
Et vous verrez comment cette ligne sera mise en évidence dans la feuille de style (dans l'image - orange):
Nous apportons une modification à l'élément. Dans notre cas, nous modifions la couleur de la police, donc dans la ligne COULEUR, nous substituons une autre valeur - la couleur que nous voulons. Dans l’exemple, la couleur est noire, sa signification est :
Vous pouvez choisir une couleur dans n'importe quel service de palette de couleurs Web : tapez « Palette de couleurs Web » dans un moteur de recherche et sélectionnez celle que vous souhaitez. Nous sélectionnons une couleur, copions sa valeur numérique et la remplaçons soigneusement par l'ancienne. après quoi nous cliquons sur UPDATE FILE et allons voir ce qui s'est passé.
Si les modifications ne sont pas affichées, au cours de la dernière heure, revenez à la page - cette fois, tout devrait être affiché.
C'est long à décrire, mais en pratique tout se fait rapidement, surtout lorsque la compétence initiale apparaît.
Plus en détail, comment modifier certains éléments :
C'est tout pour aujourd'hui, je ne vous dérangerai plus avec les codes. J'espère que maintenant vous pourrez facilement trouver et modifier n'importe quel élément du code html, ou plutôt du code css - que les experts me pardonnent de le simplifier. Et si vous ne comprenez pas, visitez quand même la page. Ne perdez pas votre temps en bêtises.
Je suggère de regarder la vidéo d'Artem Abramovich sur la façon de rechercher et de trouver n'importe quel mot ou élément dans n'importe quel thème/modèle, pour n'importe quel moteur (wordpress, joomla, etc.) et de le remplacer par ce dont vous avez besoin :
Merci de partager si vous avez aimé :
Vous pourriez également être intéressé de savoir :
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 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, collez ce code dans nouveau code HTML fichier, 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!
Depuis longtemps pour moi l'option "afficher source pages" était inutile et sans intérêt. Jusqu'à présent, apprendre le HTML sur Codecademy et concevoir mes propres sites Web ne sont pas devenus mon nouveau passe-temps. C'est là que s'est posée la question : où trouver des cas réels et emprunter des solutions intéressantes pour sa « tirelire » ? La réponse était étonnamment simple, comme toutes les choses ingénieuses : regardez le code source de la page dans Google Chrome ! Je partage avec vous mes modestes trouvailles.
Quel est le code source de la page
Si, comme moi, vous faites tout juste vos premiers pas en programmation HTML, ce serait une bonne idée de découvrir quel est le code source d'une page.
Le code source, également connu sous le nom de code de page HTML, est du texte en Hyper Text Markup Language (HTML). Il inclut le contenu réel de la page (texte, tableaux) et les balises. Ces dernières font office d'instructions pour le navigateur : comment afficher le contenu, quel type de formatage utiliser, où insérer un lien hypertexte ou un fichier média. Eh bien, pour nous, programmeurs débutants, le code source est le meilleur terrain d'entraînement : nous trouvons un site intéressant, l'espionnons, le sauvegardons et utilisons des fragments réussis. Comment?
Comment afficher le code source sur la page du navigateur Google Chrome
Trouvez la page que vous aimez. Par exemple, j'étais intéressé par la conception du menu du site. Il existe trois manières d'ouvrir le code source dans le navigateur Google Chrome :
- Cliquez sur l'icône menu dans le droit coin supérieur navigateur et sélectionnez " Outils supplémentaires" Entre autres, il existe une option « Afficher le code source ». Franchement, j'utilise rarement cette méthode : il y a beaucoup de mouvements inutiles. Cela peut être encore plus simple.
- Appuyez sur la combinaison de touches Ctrl+U– une nouvelle fenêtre avec le code source s'ouvre ;
- Pour les fans du menu contextuel : cliquez clic-droit passez la souris sur la page et sélectionnez l’option « Afficher le code de la page ».
Nous avons fait face à la tâche de visualiser le code HTML de la page dans le navigateur. Passons à l'étape la plus intéressante.
Comment modifier et enregistrer le code source
Pour apprendre à créer des sites Web, il ne suffit pas de lire le code HTML de quelqu'un d'autre. Vous devez jouer avec, expérimenter, apporter des modifications et vérifier le résultat. Vous pouvez même commencer par compiler quelques échantillons réussis. Comment éditer et sauvegarder le code source ?
Option 1. « Manuellement »
Après avoir ouvert le code source de la page, appelez le menu contextuel et sélectionnez l'option « Enregistrer sous » et enregistrez le fichier dans Disque dur. Nous modifions le fichier dans le Bloc-notes ou le Bloc-notes, enregistrons les modifications et l'ouvrons via le navigateur. Les résultats de nos modifications (réussies et moins réussies) seront reflétées dans la fenêtre du navigateur.
Option 2. Pour les pros
Lorsque vous « jouez » avec le code source tous les jours, le processus « enregistrer - ouvrir - modifier - enregistrer - vérifier » devient fatiguant. Pour ma part, j'ai trouvé une solution sous la forme d'installer un plugin pour Google Chrome - Firebug Lite. Il vous permet de modifier et d'enregistrer le code source sans quitter la fenêtre du navigateur.
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 une 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 ce cas, on tape le mot « 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 attribut nofollow. Faites un clic droit sur le lien qui nous intéresse et dans le menu déroulant menu contextuel 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.
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 afficher le code source de la page du site dans le navigateur: HTML, CSS, JavaScript (JS), obtenez diverses données utiles sur la structure du site, naviguez dessus 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 :
Afin de trouver rapidement le code, le mot ou le texte souhaité sur une 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 ou la zone souhaitée. 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/