Quel est mon-navigateur.com ?

Outils pour les webmasters

Quel est mon-navigateur.com propose aux webmasters un outil permettant d'indiquer aux utilisateurs leur navigateur.
Gadget ou indispensable, n'hésitez pas à l'utiliser.

Cet outil se présente sous la forme de quelques lignes à coller dans le code de votre page web, à l'endroit où vous voulez faire apparaître les informations.

Votre code mon-navigateur.com :

<span id="my_browser_insert">
<script type="text/javascript"><!--
my_browser_width = "400px";
my_browser_height = "50px";
culture = "fr";
//-->
</script>
<script type="text/javascript"
src="http://www.mon-navigateur.com/js/show_browser.js">
</script>
</span>

Les langues disponibles sont fr (français), en (anglais) et es (espagnol)

Guide d'insertion du code

Il n'est pas toujours évident d'effectuer un copier/coller du code mon-navigateur.com, notamment si vous découvrez le langage HTML ou si vous n'avez pas l'habitude de concevoir des sites Web. Nous allons donc vous aider à acquérir des notions de base sur le langage HTML et vous proposer deux exemples sur la façon de copier et de coller le code à l'aide de deux types d'éditeurs Web.

Ce tutoriel est découpée en plusieurs parties. N'hésitez pas à consulter directement la section qui vous intéresse :

Copier le code mon-navigateur.com
Coller le code mon-navigateur.com
Notions de base sur le langage HTML

Affichage du code source dans votre navigateur
Éléments du dans le code HTML source

Coller un code à l'aide d'un éditeur WYSIWYG
Problèmes fréquents

Coller le code au bon endroit
Rechercher du code HTML supplémentaire dans le code mon-navigateur.com
Personnaliser votre widget mon-navigateur.com

1. Copier le code mon-navigateur.com

Le code se trouve sur cette page, dans le cadre Votre code mon-navigateur.com. C'est ce code que vous devez copier et coller dans le code HTML source de votre site.

Pour copier le code, mettez en surbrillance l'ensemble de la zone Votre code mon-navigateur.com en cliquant n'importe où dans la zone. Le code est sélectionné lorsque toute la zone s'affiche en bleu.

Ensuite, dans le menu Edition de votre navigateur, sélectionnez Copier. N'hésitez pas à coller le code dans une application tierce sur vous ne souhaitez pas insérer directement votre code dans le code HTML source de votre site.

Retour au début

2. Coller le code mon-navigateur.com

Si vous n'êtes pas familiarisé avec le langage HTML avant de commencer cette section, reportez-vous à l'étape 3.

Pour afficher le navigateur des visiteurs sur votre site Web, il est indispensable de copier le code exactement comme il se présente et de le coller directement dans le code HTML source de vos pages Web.

Une fois que vous avez trouvé le code HTML source, cliquez à l'endroit où vous souhaitez insérer le code, puis sélectionnez Coller dans le menu Edition.

Une fois le code collé dans vos pages Web, enregistrez les modifications et envoyez ou publiez les pages mises à jour sur votre serveur. Si vous rencontrez des difficultés, contactez votre service d'hébergement Web.

Si le code est correctement inséré, vous devriez voir s'afficher le nom de votre navigateur et son icone.

Retour au début

3. Notions de base sur le langage HTML

"L'Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C'est un langage de balisage qui permet d'écrire de l'hypertexte, d’où son nom. HTML permet aussi de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web."
Source : Wikipedia

3a. Affichage du code source

Pour afficher un document HTML (également appelé "code source") dans Internet Explorer 7, commencez par ouvrir votre navigateur Web. Ouvrez ensuite une page dont vous souhaitez afficher la source et cliquez sur Page dans la barre d'onglet en haut à droite de l'écran. Sélectionnez Afficher la source.

Si vous utilisez Firefox cliquez sur Affichage puis Code source de la page.

Vous avez ainsi accès au code HTML (code source) de la page qui s'affiche sur l'écran.

3b. Éléments du code HTML source

Chaque document HTML se compose de balises entre crochets qui permettent au navigateur Web de savoir comment afficher les éléments HTML. Tous les éléments HTML commencent par une balise d'ouverture (<) et se terminent par une balise de fermeture (/>). Tous les documents HTML sont composés de la façon suivante :

<html>
 <head>
 </head>
 <body>
 </body>
</html>

La balise <html>, obligatoire au début et à la fin de chaque fichier HTML, indique au navigateur le début du document. La balise <head> contient l'entête du document html, c'est à dire toutes les informations non visibles par l'internaute. C'est une balise qu'il ne faut pas oublier. Elle fait partie des 4 balises Html qui doivent être présentes dans tous les documents HTML. La balise <body> contient le corps du document html, c'est à dire toutes les informations visibles par l'internaute.

Pour que le widget s'affiche, vous devez insérer le code mon-navigateur.com entre les balises <body> et </body> de votre code source.

Si vous ne parvenez pas à trouver les balises <body>, vous pouvez effectuer une recherche. Pour ce faire appuyez sur les touches "Ctrl" et "F" de votre clavier (sur un PC) ou sur les touches "COMMANDE" et "F" (sur un Mac) pour ouvrir une fenêtre Rechercher. Entrez ensuite "<body" (sans les guillemets) pour trouver la balise d'ouverture ou "</body" (sans les guillemets) pour trouver la balise de fermeture, puis cliquez sur Suivant.

Combinaison de touches sur un PC.

Combinaison de touches sur un Mac.

Retour au début

4. Coller un code à l'aide d'un éditeur WYSIWYG

Si vous utilisez un éditeur HTML WYSIWYG (What You See Is What You Get), il est possible qu'il utilise le mode Code contenant les modes d'affichage HTML, Conception/Normal et Aperçu. Si vous ne parvenez pas à localiser le code HTML source de votre page Web dans votre éditeur WYSYWIG, contactez le groupe d'assistance de votre éditeur HTML pour obtenir des instructions précises sur la façon de localiser le code.

Retour au début

5. Problèmes fréquents

5a. Coller le code au bon endroit

Si rien n'apparaît sur votre site ou si vous constatez une erreur (le code HTML du widget qui s'affiche, par exemple), vérifiez le code HTML source de votre site : le code mon-navigateur.com doit être identique au code copié sur ce site.

Pour vérifier le code HTML source de votre page Web, procédez comme suit :

Ouvrez une fenêtre de navigateur et affichez votre page Web.
Dans Internet Explorer 7 cliquez sur Pages de votre navigateur, sélectionnez Afficher la source ou Affichage puis Code source de la page pour Firefox. Un document texte contenant le code HTML de votre site apparaît.
Appuyez ensuite sur les touches "Ctrl" et "F" de votre clavier ou si vous utilisez un Mac, sur les touches "COMMANDE" et "F". Une fenêtre Rechercher apparaît. Entrez "mon-navigateur.com" dans la zone de texte et appuyez sur "Entrée" pour localiser votre code mon-navigateur.com.
Vérifiez que le code mon-navigateur.com est bien situé entre les balises <body> de votre page.

5b. Rechercher du code HTML supplémentaire dans le code mon-navigateur.com

Si le code inséré dans votre site en ligne diffère de celui figurant au début de cette page, il est possible que votre hôte Web ait automatiquement inclus ou modifié certaines balises lorsque vous avez inséré le code sur votre site. Il est possible que du code HTML supplémentaire, comme les balises "<br/>" apparaisse dans votre code mon-navigateur.com. Il se peut aussi que les déclarations "Javascript" aient été supprimées de votre code.

Si vous êtes sûr d'avoir collé le code du widget dans le code HTML de votre éditeur WYSIWYG exactement comme il se présente en haut de cette page, contactez votre hôte Web pour lui rapporter les erreurs que vous avez constatées dans votre code (la nouvelle mise en forme ou les balises supplémentaires, par exemple).

5c. Personnaliser votre widget mon-navigateur.com

Pour aller plus loin, vous pouvez personnaliser le code mon-navigateur.com afin de l'insérer aux mieux dans vos pages web.

La valeur my_browser_width correspond à la largeur du widget. Elle n'accepte que des valeurs positives et les toutes les unités html (voir le tableau ci-dessous pour plus d'informations sur les unités).
La valeur my_browser_height correspond à la hauteur du widget. Elle n'accepte que des valeurs positives et les toutes les unités html (voir le tableau ci-dessous pour plus d'informations sur les unités).
La valeur culture permet d'afficher le widget dans les trois langues disponibles "fr" pour français, "en" pour anglais et "es" pour espagnol.

Unités absolues
cm	Le centimètre
in	Le pouce (en anglais « inch ») correspondant à 2,54 cm
mm	Le millimètre
pt	Le point
pc	Le pica (correspondant à 12 pt)
Unités relatives
em	Unité relative à la taille de police de l'élément sélectionné. Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la taille de la police de l'élément parent.
ex	Unité relative à la hauteur de la minuscule de l'élément sélectionné. Seule exception à cette règle : lorsque la propriété font-size est définie, elle se rapporte à la hauteur de la minuscule de l'élément parent.
px	Le pixel. Il s'agit d'une unité dont le rendu dépend de la résolution du périphérique d'affichage.
%	Le pourcentage est une unité relative à la taille de l'élément ou de son parent.

Retour au début