Les deux méthodes sont universelles et devraient fonctionner dans tous les navigateurs.

Au début, certains penseront que ce n'est pas du tout le cas. le bon outil, 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.

À l'aide de la combinaison de touches de raccourci + ouvrez la fenêtre de recherche ; dans le navigateur Chrome, elle apparaît en haut à droite :

Figure 3. Recherche par code de site

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 :

Figure 4. Recherche par Code HTML site

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.

Comme ça outil utile toujours disponible dans votre navigateur, expérimentez d'autres commandes qui faciliteront l'édition de votre site.

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.

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.

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

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.

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.

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.

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 pour tous les navigateurs c'est pareil : CTRL+U.

Pour les éléments : Ctrl+Maj+C.

Voilà à quoi ressemble le résultat.

Maintenant, regardez comment tout fonctionne. Vous trouvez un site et aimez vraiment certains éléments. Par exemple, celui-ci. Vous savez déjà comment ouvrir le code de l'élément.

Maintenant, copiez-le.

Je l'utilise, colle ce code dans un nouveau fichier HTML, dans la balise body (body en anglais).

Voyons maintenant à quoi tout cela ressemblera dans le navigateur.

Prêt. Pour que le texte soit aligné sur les bords et acquière une couleur verdâtre, vous devez connecter le CSS à ce document et copier un autre code du site à partir duquel nous avons copié celui-ci.

Je ne ferai pas ça maintenant. Cela demande plus de temps : le mien et le vôtre. Je pense que je décrirai tous les détails dans mes prochaines publications. Abonnez-vous à la newsletter et soyez le premier informé lorsqu'un article paraît.

Si vous ne pouvez pas le supporter, mais que vous souhaitez en savoir plus sur le HTML et le CSS dès maintenant, je peux traditionnellement vous recommander des formations gratuites.

Voici 33 leçons qui vous permettront de maîtriser le html - « Cours gratuit par HTML".

Et ici informations complètesà propos du CSS - « Cours gratuit sur CSS (45 leçons vidéo !) ».

Maintenant, vous en savez un peu plus. Je vous souhaite du succès dans vos efforts. À la prochaine!

Capacité à changer source les pages sont une compétence utile pour les utilisateurs Internet avancés. En remplaçant le code HTML, vous pouvez modifier ouvrir une page Web comme vous voulez. Dans cet article, nous vous expliquerons comment modifier 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é.

Chaque page que vous ouvrez dans votre navigateur possède son propre code de langue 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. La page peut également être connectée Styles CSS, qui définit apparenceéléments de page. Pour modifier le code source d’un site, vous n’avez pas besoin de connaître parfaitement HTML et CSS, et vous le constaterez bientôt par vous-même.

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 page d'accueil 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.

Faites un clic droit sur l'élément de page qui vous intéresse.

Google Chrome : "Afficher le code de l'élément"

Opera : "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 fragment 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.

Visualiser l'intégralité du code source d'une page n'est pas très pratique dans la plupart des cas, il est donc possible de visualiser le code dans tous les navigateurs élément individuel ou un fragment.

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 Faites un 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.

La fête approche - la Journée internationale de la femme. Préparons-le à l'avance. Vous pouvez féliciter les filles et les femmes de manière originale en utilisant les services de cartes postales évoqués ci-dessous.

Utilisez les services suivants pour créer une carte postale pratiquement à partir de zéro.

J'espère qu'en utilisant l'un de ces générateurs, vous pourrez féliciter adéquatement vos dames le 8 mars !

Le contenu de l'article :

Confirmez la transition vers et entrez votre nom ou votre pseudo.

N'oubliez pas de télécharger un avatar sur votre profil Blogger.

Aujourd'hui, je vais vous expliquer ce qu'est CSS3, avec quoi il est utilisé, où le chercher et comment l'écrire correctement. Je vous préviens, je vais le raconter moi-même, simplifié pour le grand public, tel que je le vois + exemples. Alors commençons de loin.
Les CSS sont des styles dans lesquels les propriétés d'un objet sont écrites. Donc ils sont en tout le monde moteurs existants, si vous ne les trouvez pas, soit vous cherchez au mauvais endroit, soit ils n’existent vraiment pas ( site tortueux). Où les trouve-t-on habituellement ? Il s'agit généralement de la racine du site, du nom du fichier style.css, même si, en principe, le nom n'est pas aussi important que l'extension .css si le fichier avec une telle extension est un fichier de style.
Voir aussi sur mon blog.