Ouvrez le code HTML source de la page Web. Comment afficher le code source d'une page dans Google Chrome

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 les utilisateurs ordinaires, pour qui le code source leur 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 :

  1. Utiliser des touches de raccourci ;
  2. Ouvrir à partir 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,Opéra, 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.

Instruction 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éder rapidement à l’inspection des éléments.

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 de la page Web s'ouvrira dans la même fenêtre du navigateur :

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 du 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/

En parcourant d’innombrables sites sur Internet, vous pouvez en trouver qui nous plaisent beaucoup. Un certain nombre de 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 bouton de droite 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;
  • afficher le code.

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

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 manière 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, cela sera également visible ici. Par exemple, cette zone affiche des informations sur Thème WordPress ou Modèle Joomla site. 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é à l'aide du plugin 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.

Désormais, le principe de l’analyse du code html d’une page de site Web est assez clair. 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.

Le service SendPulse est un outil marketing permettant de créer une base d'abonnement et de convertir les visiteurs occasionnels de votre site Web en visiteurs réguliers. SendPulse regroupe sur une seule plateforme les fonctions les plus importantes pour attirer et fidéliser les clients :
● newsletters par courrier électronique,
● poussée Web,
● Envois SMS,
●SMTP,
● newsletters dans Viber,
● envoyer des messages à Facebook Messenger.

Bulletins d'information par courrier électronique

Vous pouvez utiliser différents tarifs pour effectuer des envois par e-mail, y compris des tarifs gratuits. Forfait gratuit a des restrictions : base d'abonnement pas plus de 2500.
La première chose par laquelle vous devez commencer lorsque vous travaillez avec le service de newsletter par e-mail est de créer la vôtre. carnet d'adresses . Définissez un titre et téléchargez une liste d'adresses e-mail.


C'est pratique de créer sur SendPulse formulaires d'abonnement sous la forme d'une fenêtre pop-up, de formulaires intégrés, flottants et fixés dans une certaine partie de l'écran. À l'aide des formulaires d'abonnement, vous collecterez une base d'abonnés à partir de zéro ou ajouterez de nouvelles adresses à votre base.
Dans le concepteur de formulaires, vous pouvez créer exactement le formulaire d'abonnement qui répond le mieux à vos besoins, et les conseils de service vous aideront à faire face à cette tâche. Il est également possible d'utiliser l'un des formulaires prêts à l'emploi disponibles.


Lors de la création de formulaires d'abonnement, veillez à utiliser une adresse e-mail avec un domaine d'entreprise. Lisez comment.
Modèles de messages vous aidera à concevoir magnifiquement vos lettres aux abonnés. Vous pouvez créer votre propre modèle de lettre dans un concepteur spécial.


Envois automatiques. Les gestionnaires de contenu utilisent activement le mailing automatique. Cela permet d'automatiser le processus de travail avec les clients. Vous pouvez créer une newsletter automatique de plusieurs manières :
Série séquentielle de lettres. C'est l'option la plus simple lorsque, quelles que soient les conditions, plusieurs lettres sont écrites qui seront envoyées aux destinataires dans un certain ordre. Il peut y avoir des options ici - série de messages(simple chaîne de messages), date spéciale(les lettres sont programmées à des dates précises), lettre de déclenchement– la lettre est envoyée en fonction des actions de l’abonné (ouverture d’un message, etc.).
Automatisation360– mailing avec certains filtres et conditions, ainsi que prise en compte des conversions.
Chaînes prêtes à l'emploi selon le modèle. Vous pouvez créer une série de lettres à l'aide d'un modèle donné ou modifier le modèle et l'ajuster à vos besoins.
Tests A/B vous aidera à expérimenter différentes options d'envoi d'une série de lettres et à déterminer Meilleure option par des ouvertures ou des transitions.

Envoi de notifications push

Les mailings push sont un abonnement dans une fenêtre de navigateur, c'est une sorte de remplacement des abonnements RSS. Les technologies Web push sont rapidement entrées dans nos vies, et il est déjà difficile de trouver un site Web qui n'utilise pas les mailings push pour attirer et fidéliser les clients. Script de demande pour , vous pouvez envoyer des lettres manuellement ou créer des envois automatiques en créant une série de lettres ou en collectant des données à partir de RSS. La deuxième option implique qu'après l'apparition d'un nouvel article sur votre site Web, une notification à ce sujet sera automatiquement envoyée à vos abonnés avec une brève annonce.


Nouveau depuis EnvoyerImpulsion– vous pouvez désormais monétiser votre site à l’aide des notifications Push en y intégrant des publicités. Une fois 10 $ atteints, les paiements sont effectués tous les lundis sur l'un des systèmes de paiement - Visa/mastercard, PayPal ou Webmoney.
Les messages push sur le service sont absolument gratuits. Le paiement est effectué uniquement pour les envois en marque blanche sans mentionner le service SendPulse, mais si le logo du service ne vous dérange pas, vous pouvez utiliser les notifications push gratuitement et sans restrictions.

SMTP

La fonction SMTP protège vos mailings contre la mise sur liste noire en utilisant des adresses IP sur liste blanche. Les technologies de signature cryptographique DKIM et SPF, utilisées dans les mailings SendPulse, augmentent la confiance dans les lettres envoyées, rendant ainsi vos lettres moins susceptibles de finir dans le spam ou sur la liste noire.

Bots de messagerie Facebook

Le chatbot Facebook est en version bêta. Vous pouvez le connecter à votre page et envoyer des messages aux abonnés.

Envoi de SMS

Grâce au service SendPulse, il est facile d'envoyer des mailings à travers la base de données numéros de téléphone. Tout d'abord, vous devez créer un carnet d'adresses avec une liste de numéros de téléphone. Pour ce faire, sélectionnez la section « Carnet d'adresses », créez un nouveau carnet d'adresses et téléchargez les numéros de téléphone. Vous pouvez désormais créer une newsletter SMS en utilisant cette base de données. Le prix de l'envoi de SMS varie en fonction des opérateurs de télécommunications du destinataire et est en moyenne de 1,26 roubles à 2,55 roubles pour 1 SMS envoyé.

Programme d'affiliation

Implémentations de SendPulse Programme d'affiliation, dans lequel un utilisateur enregistré utilisant votre lien et ayant payé le tarif vous rapportera 4 000 roubles. L'utilisateur invité bénéficie d'une réduction de 4 000 roubles pour les 5 premiers mois d'utilisation du service.

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.

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 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 ou si elles incluent un composant logiciel. 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 ci-dessous en utilisant Google Chrome comme exemple.

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.

Dans la section 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 à la balise Link. 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".

Ouvre 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 contenant de nombreux éléments, il est difficile de trouver le code nécessaire 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 connaissances de base du HTML et du CSS, et à l'aide d'outils de développement pratiques, vous pourrez déboguer vos propres documents HTML.

La révision du code des ressources sur Internet vous permettra d'apprendre non seulement de votre propre expérience, mais également d'utiliser 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.

La taille et la couleur de certains éléments importants du blog, tels que 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 passé au crible un tas de littérature sur cette question, j'ai réalisé une chose simple : chacun donne des exemples à partir de ses 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 : sans se plaindre, Je le trouverai toujours en recherchant - en utilisant la méthode poke.

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 le code HTML requis sur n'importe quel site Web. 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 le principe simple évoqué 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 titres dans la barre latérale, alors vous devez chercher tout cela dans le tableau Styles CSS. C'est la seule chose qu'il vaut la peine de comprendre 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 est réalisé de la manière la plus simple, modèle 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.

  1. Ouvrez le site dans le 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).
  2. 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 pas besoin de la page entière pour le moment, juste é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ù ce qui est recherché :

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.

Ouvrez maintenant la ligne de recherche à l'aide des 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 valeur dans la feuille de style (en orange sur l'image) :

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 :




2024 wisemotors.ru. Comment ça fonctionne. Fer. Exploitation minière. Crypto-monnaie.