Vous venez de voir comment insérer du texte et des entrées. Mais cela se passe dans le tag <body>... Et tout le reste, vous verrez, se trouvera entre le tag d'ouverture et celui de fermeture body !
Mais à quoi peut bien servir ce mystérieux tag <head>. Je vous ai dit qu'il s'adresse plus particulièrement aux moteurs de recherche. C'est vrai. Mais il ne faut pas l'oublier, même si l'internaute ne verra rien de ce qui se trouve dedans.
Assez de bavardages, voyons un peu les tags que l'on trouve dans l'en-tête...
Les titres
L'élément le plus connu et le plus utilisé de l'en-tête est sans aucun doute le titre. Le titre s'affiche généralement en haut de la fenêtre du navigateur. On le retrouve aussi dans l'historique. Et les moteurs de recherche s'en servent pour donner un titre aux pages qu'ils trouvent.
Bref, ces quelques raisons devraient, je l'espère, vous faire réfléchir un bon moment au titre de votre page.
Chaque page doit avoir un titre pas trop long et si possible différent.
Le tag qui indique un titre est <title>. Ecrivez votre titre après <title> puis fermez le tag par </title>. Par exemple :
<html> <head> <title>La page perso de Jean Dupont</title> </head> <body> Bonjour, bienvenue sur la page personnelle de Jean Dupont, qui a été créée il y a peu.<p>Vous m'excuserez du manque d'informations et de rubriques que je ne tarderai pas à vous proposer...<br>En attendant, vous trouverez quelques adresses susceptibles de vous intéresser. </body> </html>
Vous avez sans doute pu remarquer que le titre s'est affiché en haut de la fenêtre.
Pensez aux titres, c'est souvent eux qui déterminent si le site est intéressant ou pas, et par conséquent, ce peut être grâce à lui que vous verrez le nombre de visiteurs augmenter !
Les tags <meta>
Les tags <meta> sont un autre moyen (plus complexe) qui permet aux moteurs de recherche d'indexer (référencer) votre site. Ils donnent des informations sur l'auteur, sur le programme avec lequel vous avez créé vos pages ou bien des mots clés...
Vous devrez mettre un tag <meta> par type d'information. Ce qui donnera plusieurs même tags à la fin.
Commençons par l'auteur, c'est-à-dire vous. Ajoutez l'attribut name au tag <meta>. Et, comme je vous l'ai déjà expliqué, précisez l'attribut en indiquant "author". Le tag devrait ressembler à ça : <meta name="author">. Ajoutez l'attribut : content. Et précisez cet attribut par votre nom. Jean Dupont écrira :
<meta name="author" content="Jean Dupont">Le moteur de recherche saura et fera savoir que l'auteur de la page web est Jean Dupont.
Un deuxième tag <meta> important est celui avec l'attribut name="description". Précisez cette fois-ci content par un petit paragraphe qui résume votre page. Exemple :
<meta name="description" content="Voici la page personnelle de Jean Dupont. Je suis vétérinaire. Ma page personnelle vous propose des conseils pour votre animal et vous pouvez m'envoyer des messages en cas d'urgence. Je saurai vous conseiller.">Le moteur de recherche affichera ce texte en guise de présentation de votre site.
Vous pouvez aussi indiquer avec quel programme vous avez créé votre page web. Ici, il s'agit de Bloc-notes. L'attribut name doit avoir pour valeur : "generator". Exemple :
<meta name="generator" content="Microsoft Bloc-notes">
Un dernier <meta> non moins important : celui qui donne des mots clés. Précisez name="keywords" puis donnez dans l'attribut content une liste de mots clés se rapportant à votre site. Espacez chaque mot par une virgule :
<meta name="keywords" content="Dupont, vétérinaire, chien, chat, oiseau, tortue, blessure, urgence, conseils">N'hésitez pas à en mettre bien plus (pas trop quand même) ! Si un internaute tape vétérinaire dans un moteur de recherche, il verra à coup sûr la page de Jean Dupont parmi les autres (il ne reste plus qu'à espérer qu'il choisisse de voir celle-ci).
Enfin, un dernier tag <meta>, qui ne fonctionne que sous Internet Explorer. Il permet d'obtenir des effets de transition entre les pages du site (essayez vous verrez). Voici un exemple :
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2,Transition=12)">Vous pouvez modifier "Duration" : c'est le temps que met la transition pour s'effectuer, en secondes. Quant à "Transition", c'est le type de transition que vous avez choisi : vous pouvez mettre une valeur de 0 à 22. Si vous mettez 23, l'effet sera aléatoire.
Ainsi se termine ce petit chapitre sur le tag <head>. Il existe peut-être un ou deux autres tags qui se mettent là-dedans, mais je vous le ferai savoir en temps voulu.