 |
|
"Hé ! Un <META> dans Ta TETE (<HEAD>) ?"
"Une ouverture plus rapide... et j'ai un meilleur look sur les moteurs de recherche !"
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.
Dans cette leçon, nous allons voir deux utilisations des tags <META>. Cette syntaxe HTML a été créée pour permettre d'inclure de la "méta" information ou information "supplémentaire" dans une page web, dans une partie qui n'est pas affichée par les navigateurs web. Vous pourrez rencontrer bien d'autres types de balises META, mais nous parlerons des deux plus utiles.
Ces tags se placent à l'intérieur de la section <HEAD> ... </HEAD> de votre document HTML, dont nous avons parlé tout au début dans la leçon 1.
Le premier type de tag META vous permet d'écrire du HTML qui affichera votre page web, attendra un nombre de secondes déterminé et passera automatiquement à une autre page ou URL. Pourquoi voudriez-vous faire une chose pareille ?
Nous allons vous montrer comment réaliser le troisième exemple ci-dessus, en ajoutant un écran d'accueil à notre Web Volcan. Le tag <META> se trouve dans la partie <HEAD>..</HEAD> du document HTML :
<head> <title>Titre de ma page</title> <META HTTP-EQUIV="REFRESH" CONTENT="X; URL=nouvelle_page_ou_URL.html"> </head>
où X est le nombre de secondes pendant lesquelles cette page sera affichée avant de passer au fichier HTML ou à l'URL spécifié après URL=. Notez que toute la chaine après CONTENT= doit être entre guillemets, et qu'il doit y avoir un point-virgule après la valeur du nombre de secondes.
Pour cette leçon, nous allons créer une page d'accueil qui remplace notre actuel point d'entrée sur le site, index.html.
Avant de faire quoi que ce soit, nous devons modifier le nom de la page et tous les liens qui la référencent.
<A HREF="index.html">Index</A> /que vous devez changer en :
<A HREF="index1.html">Index</A> /Le second endroit est au bas de chaque page,
<ADDRESS> <b><A HREF="index.html">Volcano Web</A> :que vous devez remplacer par :
<ADDRESS> <b><A HREF="index1.html">Volcano Web</A> :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR">
<html>
<head>
<title>Web Volcan</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
<!-- La première table centre tout le contenu quelle que soit la taille de la fenêtre de navigateur -->
<table border=0 width=100% height=100%>
<tr>
<td valign=middle align=center>
<!-- La seconde table étire le mot "volcan !" sur toute la largeur de l'écran -->
<table border=0 width=100%>
<tr>
<td width=13% align=center><font face="verdana,helvetica,arial" size=+4><b>v</b></font></td>
<td width=13% align=center><font face="verdana,helvetica,arial" size=+4><b>o</b></font></td>
<td width=13% align=center><font face="verdana,helvetica,arial" size=+4><b>l</b></font></td>
<td width=13% align=center><font face="verdana,helvetica,arial" size=+4><b>c</b></font></td>
<td width=13% align=center><font face="verdana,helvetica,arial" size=+4><b>a</b></font></td>
<td width=13% align=center><font face="verdana,helvetica,arial" size=+4><b>n</b></font></td>
<td width=12% align=center><font face="verdana,helvetica,arial" size=+4><b>!</b></font></td>
</tr>
</table>
<p>
<A HREF="index1.html">
<IMG SRC="../pictures/cover.gif" ALT="volcan!" WIDTH="206" HEIGHT="186" BORDER="0"></A>
<p>
<font face="verdana,helvetica,arial" size=2><A HREF="index1.html">entrez</A></font>
</td>
</tr>
</table>
</body>
</html>
NOTE : Nous utilisons quelques astuces de table mentionnées à la fin de la leçon 21. Tout le contenu de cette page est dans une table avec une hauteur et une largeur de 100% ; elle reste donc parfaitement centrée quelles que soient les dimensions de la fenêtre du navigateur. Puis, à l'intérieur de cette table, nous incluons du texte, des images et une autre table avec une largeur de 100% de la taille de la fenêtre, étirant les 7 lettres"v o l c a n !" sur l'écran (en plaçant chaque lettre dans une cellule de table d'à peu prés 1/8 ou 13% de la largeur de l'écran). Essayez, et regardez ce qui se passe si vous redimensionnez la fenêtre de votre navigateur !
Nous avons également utilisé les styles <font face=..> qui peuvent ne pas être présents sur tous les ordinateurs ; si la première fonte est absente, le navigateur cherche la deuxième, puis la troisième...
Bien que nous allions ajouter le tag <META> pour passer automatiquement à la page suivante, il est bon de fournir également les hyperliens ; nous avons ajouté l'image et quelques liens texte vers notre page d'accueil principale, index1.html
<title>Web Volcan</title>ajoutez la ligne du tag META :
<META HTTP-EQUIV="REFRESH" CONTENT="3; URL=index1.html">
NOTE : Le tag META indique au navigateur de faire une pause de 3 secondes, puis de passer automatiquement à la page web index1.html
Vous faites tous ces efforts pour apprendre le HTML et créer vos pages web. Finalement, vous voudrez probablement que des gens puissent les trouver parmi les autres 10 trizillions de pages présentes sur le Net. Les tags META vous permettent d'ajouter de l'information supplémentaire visant à identifier votre page web quand les internautes utilisent la recherche Internet.
Nous n'allons pas rentrer dans le détail des moteurs de recherche sur le web (mais nous vous invitons à visiter un didacticiel ami, "Comment devenir un Webchasseur"). En fait, de brillants programmeurs ont écrit du code essayant de suivre autant de liens internet que possible ; ces programmes renvoient ensuite une partie de l'information de chaque page vers une base de données centralisée, puis présentent une page dans laquelle vous pouvez entrer une description en quelques mots. Le site vous affiche alors une liste des entrées de la base de données qui pourrait correspondre à ce que vous cherchez.
Si vous ne connaissez pas, essayez d'utiliser les fonctions de recherche de sites comme Altavista, HotBot, Excite, Lycos, etc.
Dans la plupart de ces sites web, les résultats retournés affichent le texte des premières lignes de la page web d'accueil. A moins que les tous premiers mots de votre page soient très explicites, les résultats ne présenteront pas une explication claire du contenu de la page. Par exemple, pour notre page d'accueil de didacticiel Ecrire le HTML sur http://www.mcli.dist.maricopa.edu/tut/, l'absence de tags META présenterait quelque chose comme cela dans un résultat de moteur de recherche :
|
|
Ce n'est pas trop mal ; nous pouvons avoir une idée de ce dont parle le site, mais nous voyons le texte des liens en haut des pages du didacticiel. Pourtant, en insérant un tag META, nous pouvons changer ces résultats en :
|
|
le format HTML pour ajouter ce type de tag META est :
<META name="description" content="Le texte est réellement une bonne description de cette page web. Une seconde phrase pourra peut-être également aider.">
Si vous êtes tentés d'écrire une longue description, gardez à l'esprit que la taille maximum d'un tag META, du premier < au dernier > est de 1024 caractères, c'est-à-dire 998 caractères entre le début du tag
<META name="description" content="
et la fin
">
vous laissant entrer une centaine de mots.
Un autre tag META utile à votre site web lors des recherches vous donne la possibilité d'ajouter les mots importants pouvant être tapés par un internaute qui rechercherait un site tel que le vôtre. Par exemple, pour la page d'accueil de notre didacticiel Ecrire le HTML sur http://www.mcli.dist.maricopa.edu/tut/, nous avons entré ces mots-clefs en utilisant le format du tag META :
<META name="keywords" content="HTML, didacticiel, apprendre,
faire, créer, concevoir, page web, page d'accueil, éducation,
maricopa, mcli, Ecrire, formulaire, tables, frames,
javascript">
Maintenant, nous allons ajouter les deux tags de description META à la page principale d'accueil de notre site
<META HTTP-EQUIV="REFRESH" CONTENT="2; URL=index1.html">ajoutez ces deux tags META supplémentaires :
<META name="description" content="Une mini leçon sur le vaste monde des
volcans en exemple pour le didacticiel Ecrire le HTML">
<META name="keywords" content="HTML, volcan, apprendre, page web, terre, mars, Mont St Helens,
Long Valley, Pline">
NOTE : l'ajout des deux tags META ne fera pas apparaître votre page web de manière différente. (Pourquoi ?) mais une fois sur le serveur web, ils amélioreront la façon dont votre site est "indexé" par les différents moteurs de recherche.
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.
Revoyons les grandes lignes de cette leçon :
Pouvez-vous trouver une ou deux phrases qui décriraient votre site à une personne qui ne l'a jamais vu ? Ajoutez les tags META pour la description et les mots-clefs dans votre propre page.
Essayez de créer une première page présentant votre site et utilisez les tags META REFRESH pour passer automatiquement à votre page d'accueil. Pouvez-vous rendre votre première page assez attractive pour "inviter" quelqu'un à entrer dans votre site ? Pensez-vous que cette page doive contenir beaucoup ou, au contraire, peu d'images ? Pourquoi ou pourquoi pas ?
Pour en savoir plus sur les moteurs de recherche et leur fonctionnement, consultez La Surveillance des Moteurs de Recherche, et leur section spéciale sur Comment utiliser les tags Meta.
Si vous voulez vous informer sur les techniques de recherche, essayez notre Didacticiel Webchasseur (il est aussi fun que celui-ci, si ce n'est plus !)
Faites apparaître vos hyperliens dans une autre fenêtre de navigateur.
Ecrire le HTML : Leçon 24 : Tags META
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut24.html