Inspecter et remixer votre première page web

Dernière mise à jour: 68% des utilisateur·rice·s ont trouvé cela utile

Assurez-vous d'avoir installé X-Ray Goggles

À chaque fois que vous tombez sur une page que vous voulez inspecter, cliquez sur le bouton X-Ray Goggles dans votre barre de marque-pages et commencez à bidouiller.

Inspecter les éléments

Une fois X-Ray Goggles activé, vous remarquerez qu'en survolant les différents élements de la page web, ceux-ci seront mis en valeur par des boîtes colorées.

Ces boîtes représentent les élements de la page. En cliquant dessus, vous appellerez l'éditeur de code avec lequel vous pourrez modifier l'élément à votre convenance.

Commencer à remixer

Selon le type d'élément sélectionné, vous pourrez en modifier différents aspects.

Changer un texte

Sélectionnez un bloc de texte, et modifiez son contenu dans l'éditeur de code. Vous aurez un aperçu de ce que vont donner vos modifications dans le panneau principal ci-dessus.

Échanger une image

Les images utilisent toutes la balise <img> dans leur code HTML. Vous verrez que chaque balise <img> pointe vers une adresse URL qui indique à la balise où l'image se trouve.

Vous pouvez changer l'image originale comme bon vous semble. Ouvrez simplement un nouvel onglet de votre navigateur et cherchez l'image que vous souhaitez utiliser, cliquez dessus avec le bouton droit, et sélectionnez Copier l'adresse de l'image

Collez l'URL de l'image copiée dans l'éditeur de code et vous devriez la voir changer dans l'aperçu.

Modifier un lien hypertexte

Vous pouvez faire pointer un lien hypertexte où bon vous semble.

Chaque lien hypertexte débute par <a href=" et contient l'adresse vers laquelle pointe le lien. Changez cette adresse contenue entre deux guillemets, et vous modifierez la destination du lien.

Vous souhaiterez peut-être modifier également le « texte d'ancre ». Il s'agit du texte, souvent affiché avec un soulignement en bleu, qui donne au visiteur une indication sur la page de destination.

Appliquer et publier !

En cas d'erreur, vous pouvez cliquer sur le bouton Annuler dans l'éditeur de code.

Si vos modifications vous plaisent, cliquez sur le bouton vert Mettre à jour pour voir à quoi ressemble votre page.

Quand vous êtes prêt(e) à publier, appuyez sur la touche p , ou cliquez sur le bouton Publier de la barre à droite.

Si vous êtes connecté(e) à teach.mozilla.org (en anglais), vos remixes créés avec X-Ray Goggles seront ajoutés à la page "Your projects" sur teach.mozilla.org, et une adresse URL unique vous sera communiquée pour la partager avec vos amis.

Cet article vous a-t-il été utile ?

Veuillez patienter…

Ces personnes ont aidé à écrire cet article :

Illustration of hands

Participer

Développez et partagez votre expertise avec les autres. Répondez aux questions et améliorez notre base de connaissances.

En savoir plus