Leçon 10
Les MétasLes métas servent à certains moteurs / annuaires de recherche pour décrire et indexer vos pages, exemple de moteur / annuaire: "Voilà". Pour d'autres annuaires, c'est à vous de décrire, au moment de l'inscription, vos mots clés et la description succincte de votre site.
<META NAME="keywords" CONTENT="mot-clé1,mot-clé2,mot-clé3,...">
Ce méta sert à définir les mots clés qui définissent vos pages. Ne l'oubliez pas car ils sont utilisés par beaucoup de moteurs, principalement sur la page de référence que vous soumettez au moteur.
Quelques commentaires :
- Les mots-clés doivent être séparés par une virgule et sans espace
- Mettez les mots clés en minuscule
- Mettez tous les mots clés indispensables, lesquels ? oui lesquels…à vous de voir, mais ils doivent avoir un rapport avec votre page.
<META NAME="description" CONTENT="une brève description de la page">
Dans ce méta, décrivez succinctement votre site ou votre page en 150 ou 200 mots maxi.
Il existe d'autres métas, mais non indispensables. Ils servent, à faire des renvois automatiques de pages, à donner le nom de l'auteur, la langue utilisée, le logiciel de création de pages, etc.. Pour plus d'info vous pourrez consulter les sites dont je vous donnerai l'adresse à la fin de ces présentations.
Ces métas sont à mettre sur toutes vos pages car un moteur peut adresser directement une page et pas simplement le menu mais ils sont indispensables dans les menus et les pages "d'accueil". (le menu et la page d'accueil peuvent être différents).
Vous allez voir comment utiliser ces métas dans le menu général de vos pages que nous allons créer.
Lancez Dreamweaver. Dans la page vierge de départ mettez en titre par exemple "Les pages perso de Toto" au format "En-tête 3" et centré, "Toto" étant votre nom.
Quelques lignes plus bas en écriture standard, écrivez en centré "la Haute-Marne sans cadre" et établissez un lien de cette ligne vers le fichiers "index.htm" du dossier "haute-marne". Sur une autre ligne "la Haute-Marne avec des cadres" et établissez un lien vers "index.htm" du dossier "h-m-cadre" (ne tenez pas compte des messages d'alerte).
Dans les "Propriétés de la page" définissez le fond en blanc (implicite)et donnez le titre "la Haute-marne". Enregistrez cette page dans le dossier "internet" sous le nom "index.htm".
Vous allez placer des métas dans cette page (normalement, il devrait y en avoir dans toutes les pages d'un site). Avec Dreamweaver, pour voir l'en-tête de votre page, faites "Affichage, Contenu de l'en-tête"
Pour insérer les métas "mots clés", faites "Insertion, En-tête, Mots-clés" et là, saisissez les mots clés "haute-marne,marne,champigny,charmes" sans espace et séparé par une virgule.
Faites de même pour la description, "Insertion, En-tête, Description" et saisissez la description de votre page ou de votre site, ce qui est notre cas puisque nous sommes à la page d'accueil. Nous saisirons "Présentation du département de la Haute-Marne."
En cliquant sur les icônes de l'en-tête, vous pouvez visualiser et / ou modifier vos métas.
Enregistrez votre document par "Ctrl + S".
Comme d'habitude essayez votre site en lançant le fichier "index" du dossier "internet" à l'aide de votre explorateur Windows.
Un retour vers l'accueil général du site.
Avec cet essai, vous vous apercevez qu'il manque un retour des deux sites (avec et sans trame) vers le menu général. Maintenant vous devez être capable d'établir ces retours vers le menu général depuis le fichier "index" du dossier "haute-marne" et du fichier "menu" du dossier "h-m-cadre".
Voici le fichier "index" du dossier "haute-marne" modifié pour ajouter une dernière ligne avec un lien vers le menu général situé dans le dossier "Internet". A vous de jouer.
et le fichier "menu" du dossier "h-m-cadre"
Pour ce dernier, il faut reprendre le tableau et insérer une colonne en remplaçant "3" par "4" dans le champ "Cols" de la fenêtre de propriété du tableau (attention la colonne s'ajoute à la fin du tableau)Reprenez les dimensions des colonnes pour les ramener à 25% en largeur et enfin ajoutez votre choix de "menu général". Attention ici vous devez ajouter l'option "_top" dans le champ "Cible" sinon le menu principal s'affiche seulement dans le petit cadre appelé "menu".
Une question comment choisir parmi les 4 choix "_blank, _self, _parent, _top"?
_blank permet d'ouvrir une nouvelle session de navigateur (nouvelle fenêtre),
_self est implicite,
_parent est utilisé dans les cadres imbriqués
_top, on vient de la voir.La meilleure solution, faites des essais...
Ainsi modifiées, vos pages fonctionnent à la "perfection".
Voici un modèle de ce que vous devriez obtenir.
Avant d'en finir avec Dreamweaver, vous allez regarder le fichier source d'un fichier de type HTM. Ouvrez le fichier "index.htm" du dossier "internet" par appui sur le bouton "Afficher Source HTML"
La fenêtre (redimensionnable) qui s'ouvre permet de voir le code source de la page et éventuellement de le modifier.
Ce type de manipulation vous sera utile pour placer des compteurs et dans vos échanges avec d'autre Internautes. Ce langage source est la seule chose commune aux pages HTML et il est indépendant du logiciel de conception, ou presque… De plus, c'est dans ce format que vous pourrez récupérer des trucs et astuces sur d'autres sites. Mais patientez un peu, attendez d'avoir un peu plus d'expérience.
Votre initiation à la création des pages HTML est arrivée à son terme, il nous reste à mettre ces pages "en ligne".
