Google Chrome - outils pour les webmasters. Comment ouvrir rapidement un code de page dans un navigateur, même si la copie est interdite

27.09.2019

Compétence changer le code source de la page– une compétence utile pour un utilisateur Internet avancé. En remplaçant le code HTML, vous pouvez modifier la page Web ouverte à votre guise. 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. Des styles CSS peuvent également être connectés à la page, qui définissent l'apparence des éléments de la 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.

Pendant longtemps, l’option « afficher la source de la page » m’a été 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 coin supérieur droit du navigateur et sélectionnez « Plus d’outils ». 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 : faites un clic droit 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 sur votre 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.

Si vous ouvrez une page Web, elle contiendra des éléments typiques qui ne changent pas en fonction du type et de l'orientation du site. L'exemple 4.1 montre le code d'un document simple contenant des balises de base.

Exemple 4.1. Code source de la page Web

Exemple de page Web

Titre

Premier paragraphe.

Deuxième paragraphe.

Copiez le contenu de cet exemple et enregistrez-le dans le dossier c:\www\ sous le nom example41.html. Après cela, lancez le navigateur et ouvrez le fichier via l'élément de menu Fichier > Ouvrir un fichier (Ctrl+O). Dans la boîte de dialogue de sélection de document, sélectionnez le fichier exemple41.html. La page Web illustrée sur la figure 1 s'ouvrira dans le navigateur. 4.1.

Riz. 4.1. Résultat de l'exécution de l'exemple

Élémentest destiné à indiquer le type du document actuel - DTD (définition du type de document, description du type de document). Ceci est nécessaire pour que le navigateur comprenne comment interpréter la page Web actuelle, car HTML existe en plusieurs versions, en plus, il existe XHTML (EXtensible HyperText Markup Language), qui est similaire au HTML, mais en diffère par la syntaxe. Pour que le navigateur « ne se confonde pas » et comprenne selon quelle norme afficher la page web, il faut paramétrer dans la première ligne de code .

Il existe plusieurs types, ils diffèrent selon la version de HTML qu'ils ciblent. Dans le tableau 4.1. Les principaux types de documents avec leurs descriptions sont donnés.

Tableau 4.1. DTD valides

DOCTYPE	Description
HTML4.01
	Syntaxe HTML stricte.
	Syntaxe HTML de transition.
	Un document HTML utilise des frames.
HTML5
	Cette version de HTML n'a qu'un seul doctype.
XHTML1.0
	Syntaxe XHTML stricte.
	Syntaxe XHTML de transition.
	Le document est écrit en XHTML et contient des frames.
XHTML1.1
	Les développeurs de XHTML 1.1 s'attendent à ce qu'il remplace progressivement le HTML. Comme vous pouvez le constater, cette définition n'a pas de division en types, puisque la syntaxe est la même et obéit à des règles claires.

La différence entre une description de document stricte et transitoire réside dans une approche différente de l'écriture du code du document. Le HTML strict nécessite le strict respect de la spécification HTML et ne pardonne pas les erreurs. Le HTML transitionnel est plus souple concernant certains défauts de code, ce type est donc préférable à utiliser dans certains cas.

Par exemple, en HTML et XHTML strict la présence de la balise est obligatoire , et en HTML de transition, il peut être omis et non spécifié. Dans le même temps, nous rappelons que le navigateur affichera le document dans tous les cas, qu'il corresponde ou non à la syntaxe. Ce type de contrôle est effectué à l'aide d'un validateur et s'adresse principalement aux développeurs pour traquer les erreurs dans le document.</p> <p>À l'avenir, nous utiliserons principalement des<!DOCTYPE>, sauf indication contraire. Cela nous permettra d’éviter les erreurs courantes et nous apprendra à écrire du code syntaxiquement correct.</p> <p>Vous pouvez souvent trouver du code HTML sans en utiliser<!DOCTYPE>, la page Web sera toujours affichée dans ce cas. Cependant, il peut arriver qu'un même document apparaisse différemment dans le navigateur lorsque vous utilisez<!DOCTYPE>et sans cela. De plus, les navigateurs peuvent afficher ces documents à leur manière, ce qui fait que la page « s'effondre », c'est-à-dire sera affiché complètement différemment de ce dont le développeur a besoin. Pour éviter de telles situations, ajoutez toujours<!DOCTYPE>au début du document.</p><p>Étiqueter <html>définit le début du fichier HTML, l'en-tête est stocké à l'intérieur ( <head>) et le corps du document ( <body> ).</p><p>Titre du document, également appelé bloc <head>, peut contenir du texte et des balises, mais le contenu de cette section n'est pas directement affiché sur la page, sauf dans le conteneur <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Étiqueter <meta>est universel et ajoute toute une classe de capacités, notamment, à l'aide de balises méta, comme on appelle généralement cette balise, vous pouvez modifier l'encodage de la page, ajouter des mots-clés, une description du document et bien plus encore.</p><p> <title>Exemple de page Web

Étiqueter Pour que le navigateur comprenne qu'il s'agit d'un encodage UTF-8 (format de transformation Unicode), et cette ligne est ajoutée.</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>détermine le titre d'une page Web ; c'est l'un des éléments importants conçus pour résoudre de nombreux problèmes. Dans le système d'exploitation Windows, le texte du titre est affiché dans le coin supérieur gauche de la fenêtre du navigateur (Figure 4.2).</p> <p>Étiqueter <title>Riz. 4.2. Vue d'en-tête dans le navigateur</p><p>est obligatoire et doit impérativement être présent dans le code du document.</head> Vous devez ajouter une balise de fermeture</p><p>pour indiquer que le cartouche du document est terminé. <body>Corps du document</p><p> <h1>Titre</h1> </p><p>destiné à placer des balises et le contenu d’une page Web. <h1>HTML propose six titres de texte de différents niveaux qui indiquent l'importance relative de la section suivant le titre. Oui, tague <h6>sert à indiquer le cap du sixième niveau et est le moins significatif. <h1>...<h6>Par défaut, le titre du premier niveau est affiché dans la plus grande police en gras et les titres des niveaux suivants sont plus petits. Balises</p><p>  </p><p>Faites référence aux éléments de bloc, ils commencent toujours sur une nouvelle ligne, et après eux, d'autres éléments apparaissent sur la ligne suivante. De plus, un espace blanc est ajouté avant et après le titre.</p> <p>Certains textes peuvent être masqués et empêchés d'être affichés dans le navigateur en en faisant un commentaire.</p> <p>Bien que ce texte ne soit pas vu par l'utilisateur, il sera quand même transmis dans le document, donc si vous regardez le code source, vous pourrez découvrir des notes cachées.</p> <p>Vous devez voir rapidement toutes les modifications sur le site lui-même, sans affecter les fichiers et le code du site publiés sur Internet. Par exemple, modifier la palette de couleurs d'un bloc, déplacer un élément qui a été déplacé, etc.</p> <h2>Pour ce faire, de nombreux webmasters utilisent des serveurs Denwer ou OpenServer locaux, exécutant une copie complète du site sur leur ordinateur. Cette méthode est universelle et adaptée aux professionnels ; elle peut être utilisée pour tester le fonctionnement de divers scripts et plugins, expérimenter des modifications de conception et modifier tous les fichiers du site, et après le test, transférer les modifications appropriées directement sur le site.</h2> <p>Pour les utilisateurs éloignés de l'art des webmasters, je recommande d'utiliser un navigateur à ces fins. Puisque j'utilise Chrome, je fournirai des instructions avec des captures d'écran pour ce navigateur particulier. Par analogie, vous pouvez travailler avec Opera, Yandex Browser, Mozilla Firefox et d'autres navigateurs, le principe de leurs outils est similaire ;</p> <p>Instruction 1 : comment visualiser l'intégralité du code HTML d'un site dans un navigateur</p> <p><b>Ouvrez la page Web requise de votre site. Faites un clic droit sur l'élément souhaité, un menu déroulant contextuel du navigateur apparaîtra avec les commandes disponibles :</b> Figure 1. Affichage de l'intégralité du code HTML d'une page Web dans le navigateur Chrome</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%92%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0-Chrome.jpg' width="100%" loading=lazy loading=lazy></p><p>Important:</p> <p>Les commandes du menu déroulant peuvent différer, par exemple, pour les éléments actifs (liens, images, vidéos) et inactifs (texte, arrière-plan, divs) :</p> <p>Figure 2. Menu déroulant du navigateur Chrome <b>Donc, si vous ne trouvez pas la commande dont vous avez besoin, faites simplement un clic droit ailleurs ou utilisez les raccourcis clavier de votre navigateur.</b>". Cliquez sur la commande, un nouvel onglet s'ouvrira avec le code complet de la page web source, un gros plus à tout - la visualisation est disponible avec coloration syntaxique :</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%A4%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82-%D0%BA%D0%BE%D0%B4%D0%B0-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>Figure 3. Fragment de code de ce site</p> <p>Cet outil est très utile pour rechercher et éditer les éléments que vous recherchez.</p> <h3>Méthodes alternatives pour afficher tout le code HTML d'une page Web</h3> <p>Pour un accès plus rapide, vous pouvez utiliser d'autres manières d'appeler cet outil</p> <ol><li>Sur la figure 1 on voit également que cette commande est disponible via un raccourci clavier <Ctrl>+<U> ;</li> <li>Collez view-source:site dans la barre d'adresse du navigateur au lieu de mon domaine, insérez votre adresse ;</li> </ol><p>Les deux méthodes sont universelles et devraient fonctionner dans tous les navigateurs.</p> <p>Au début, certains peuvent penser que ce n'est pas du tout un outil nécessaire, mais visualiser l'intégralité du code HTML d'un site est idéal pour trouver les éléments nécessaires dans le code, il peut s'agir de liens, de balises, de balises méta, d'attributs et d'autres éléments. .</p> <p>Combinaison de raccourcis clavier <Ctrl>+<F>ouvrez la fenêtre de recherche, dans le navigateur Chrome elle apparaît en haut à droite :</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%BF%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D1%83.jpg' width="100%" loading=lazy loading=lazy></p><p>Figure 3. Recherche par code de site</p> <p>Après avoir saisi une demande dans le formulaire de recherche, l'écran se déplacera vers le premier élément trouvé, à l'aide des flèches que vous pourrez déplacer entre eux et sélectionner celui dont vous avez besoin :</p> <p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-HTML-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>Figure 4. Recherche par code de site HTML</p> <h2>Instruction 2 : comment afficher et modifier le code HTML et CSS d'un site dans le navigateur Google Chrome</h2> <p>Maintenant, la partie la plus importante, dans laquelle je vais montrer comment modifier le code HTML et CSS d'un site Web dans un navigateur. puis transférez les modifications vers le navigateur.</p> <br><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9A%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0-%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D1%82%D1%8C-%D0%BA%D0%BE%D0%B4.jpg' width="100%" loading=lazy loading=lazy><p>Cet outil utile est toujours disponible dans votre navigateur ; expérimentez d'autres commandes qui vous permettront de modifier plus facilement votre site.</p> 1 voix <p>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.</p> <p>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.</p> <p>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.</p> <h2><span>Connaissance de base du code</span></h2> <p>Mon site est destiné aux débutants et je voudrais d'abord parler brièvement des sites et du code en général.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/cit1-75-537x292.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p>C’est ainsi que sont créés des sites Web de haute qualité. Si vous le souhaitez, impliquez-vous dans cette affaire et étudiez-la ; si vous ne le souhaitez pas, personne ne peut vous forcer.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_1-46.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p>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.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-43.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p>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.</p> <p>Un peu plus tard, je vais vous montrer un exemple précis.</p> <h2>Voir le code</h2> <p>Alors, laissez-moi d'abord vous montrer comment agir si vous avez besoin de découvrir le code HTML de quelqu'un d'autre. Nous examinerons ensuite toutes les autres questions plus en détail.</p> <h3><span>La meilleure façon</span></h3> <p>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... »</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-1-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_2-2-1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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 ?</p> <h3><span>C'est Google Chrome</span></h3> <p>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 cliquez avec le bouton droit n'importe où. Dans la fenêtre qui apparaît, cliquez sur « Afficher le code de la page ».</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_3-40.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_4-36.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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 ».</p> <p>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é en utilisant CSS. De nombreux experts conseillent d’écrire autant d’informations que possible dans le code. Comment fonctionnent-ils sur les sites populaires ?</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_5-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Maintenant, les informations nécessaires sont apparues. 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.</p> <p>À propos, si vous souhaitez savoir comment cela fonctionne ici, vous pouvez consulter le lien vers l'image ci-dessous. Voici votre réponse.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_6-33.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Mozilla Firefox</h3> <p>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.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_7-32.jpg' align="center" width="100%" loading=lazy loading=lazy></p><p>Lorsque vous survolez un élément, vous pouvez ouvrir son code.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_8-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ici, les données sont affichées en bas de l’écran, mais sinon tout est exactement pareil.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_9-29.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Navigateur Yandex</h3> <p>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.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_10-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>On passe le curseur sur un élément si l'on veut connaître exactement son code.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_11-27.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Tout est affiché ici exactement de la même manière que dans Chrome.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_12-25.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Opéra</h3> <p>Et enfin, Opéra.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_13-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>D’ailleurs, vous avez peut-être remarqué que vous n’êtes pas obligé d’utiliser une souris. Il existe un raccourci clavier rapide pour ouvrir le code, et il est le même pour tous les navigateurs : <b>CTRL+U</b>.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_14-24.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Pour les éléments : Ctrl+Maj+C.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_15-22.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Voilà à quoi ressemble le résultat.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_16-23.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <h2><span>Ce sera intéressant pour les débutants</span></h2> <p>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.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_17-20.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Maintenant, copiez-le.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_18-19.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>J'utilise , collez ce code dans un nouveau fichier html, dans la balise body (body en anglais).</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_19-18.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Voyons maintenant à quoi tout cela ressemblera dans le navigateur.</p> <p><img src='https://i0.wp.com/start-luck.ru/wp-content/uploads/Screenshot_20-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_21-16.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p>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.</p> <p>Voici 33 leçons qui vous permettront de maîtriser le html – <i><b><span>"Cours gratuit sur HTML"</span> </b> </i>.</p> <p><img src='https://i2.wp.com/start-luck.ru/wp-content/uploads/Screenshot_22-16-537x476.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Et voici des informations complètes sur CSS - <i><b><span>« Cours gratuit sur CSS (45 leçons vidéo !) »</span> </b> </i>.</p> <p><img src='https://i1.wp.com/start-luck.ru/wp-content/uploads/Screenshot_23-15.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Maintenant, vous en savez un peu plus. Je vous souhaite du succès dans vos efforts. A bientôt !</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="Recherche" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Derniers messages</span></h3> <ul> <li> <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/chem-i-kak-protirat-ekran-monitora-kompyutera-noutbuka-televizora-smartfona/">Quel produit de nettoyage choisir pour les écrans TV LCD, moniteurs, téléphones, tablettes sur Aliexpress ?</a> </li> <li> <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/kak-rabotat-s-programmoi-anvil-studio-sozdanie-midi-melodii-v-programme-anvil-studio-anvil-studio/">Créer une mélodie MIDI dans Anvil Studio</a> </li> <li> <a href="https://olegshein.ru/fr/oshibki-i-devajjsov/vidy-licenzii-windows-vidy-licenzii-windows-licenzionnaya-programma/">Types de licences Windows Programme de licence Windows 10</a> </li> <li> <a href="https://olegshein.ru/fr/download/chto-za-media-set-na-yutube-kak-podklyuchitsya-k-partnerskoi/">Comment se connecter au programme d'affiliation du Groupe VSP ?</a> </li> <li> <a href="https://olegshein.ru/fr/application/chto-delat-esli-gta-sa-ne-rabotaet-professii-v-gta-san-andreas-grand-theft-auto-san/">Métiers dans GTA : San Andreas</a> </li> <li> <a href="https://olegshein.ru/fr/error-itunes/sistemnye-utility-sistemnye-programmy-windows-vstroennaya-utilita-ochistki/">Programmes système Windows Utilitaire de nettoyage de disque intégré</a> </li> <li> <a href="https://olegshein.ru/fr/instructions/proektory-dlp-so-svetodiodnoi-podsvetkoi-do-vintika/">Jusqu'au rouage : des projecteurs multimédia basés sur la technologie DLP</a> </li> <li> <a href="https://olegshein.ru/fr/security/obemnoe-zvuchanie-7-1-kak-vklyuchit-i-ispolzovat-obemnyi-zvuk-windows-sonic/">Son surround 7.1. Comment activer et utiliser le son surround Windows Sonic. Vérification des effets de l'activation de la fonctionnalité Windows Sonic</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">2024 <a href="https://olegshein.ru/fr/" title="olegshein.ru"><span>olegshein.ru</span></a>. Club informatique d'Oleg Shein. <br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">Des questions ?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">Nom</label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">E-mail <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">Message <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-buttons"> <div class="pweb-field"> <button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">Envoyer</button> </div> </div> </div> </div> </div> <div class="pweb-msg pweb-msg-after"> <div id="pwebcontact1_msg" class="pweb-progress"> <script type="text/javascript"> document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..." </script> </div> </div> <input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token"> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(function() { jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block"); new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), { 'background_color': '#000000', 'color': '#ffffff', 'max_width': 250, 'opacity': 0.95, 'position': 'center' }); }); </script> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <div id="mistape_dialog" data-mode="comment" data-dry-run="0"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div id="mistape_confirm_dialog" class="mistape_dialog_screen"> <div class="dialog-wrap"> <div class="dialog-wrap-top"> <h2>Signaler une faute de frappe</h2> <div class="mistape_dialog_block"> <h3>Texte qui sera envoyé à nos rédacteurs :</h3> <div id="mistape_reported_text"></div> </div> </div> <div class="dialog-wrap-bottom"> <div class="mistape_dialog_block comment"> <h3><label for="mistape_comment">Votre commentaire (facultatif) :</label></h3> <textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea> </div> <div class="pos-relative"> </div> </div> </div> <div class="mistape_dialog_block"> <a class="mistape_action" data-action="send" data-id="389" role="button">Envoyer</a> <a class="mistape_action" data-dialog-close role="button" style="display:none">Annuler</a> </div> <div class="mistape-letter-front letter-part"> <div class="front-left"></div> <div class="front-right"></div> <div class="front-bottom"></div> </div> <div class="mistape-letter-back letter-part"> <div class="mistape-letter-back-top"></div> </div> <div class="mistape-letter-top letter-part"></div> </div> </div> </div> <script type="text/javascript">  </script><br> <br> </body> </html>