Créer son propre site Web en language HTML

Transcription

1 Tutorial Créer son propre site Web en language HTML Voici un tutorial qui, comme vous devez vous en douter, va prendre un certain temps à assimiler. Je n'ai aucunement la prétention d'être un bon programmeur, mais il existe tellement d'outils à notre disposition sur le Net que j'ai quand même réussi à créer le site Tutopat seul... Il ne s'adresse donc pas à un internaute débutant, mais bien à une personne ayant déjà acquis quelques notions de base indispensables. Bien que le language HTML soit presque dépassé aujourd'hui, cela reste encore l'option la plus simple pour une première création, Rien ne vous empêchera de passer par la suite au XHTML ou même au Flash... Mais il s'agit bien ici de vous apprendre à créer un site simple. Voici donc la liste des logiciels que nous allons successivement employer et dont vous aurez besoin : Un décompresseur : IZArc34 pour lequel un tuto est à votre disposition ici. Un éditeur HTML : Nvu 1.0 Ce logiciel gratuit et en français est une excellente alternative au fameux FrontPage que tout créateur de site a un jour essayé, mais qui est lui, payant. Un logiciel de transfert FTP : Filezilla pour lequel un tuto est disponible là.

2 Les opérations vont être multiples et se diviser en plusieurs étapes consécutives, accessibles par lien direct à partir du sommaire ci-dessous Le téléchargement d'un kit de page Sa décompression L'installation du logiciel d'édition HTML Les droits d'auteur du concepteur La personnalisation et la mise en forme visuelle de la page index du site A- Ouvrir notre page index. B- Insérer sa bannière personnelle. C- Insérer son logo. D- Personnaliser les couleurs des objets. E- Changer la couleur du fond de page. F- Insérer une image supplémentaire dans la page. 6. La personnalisation et la mise en forme textuelle de la page index du site A- Insérer du texte dans la page. B- Insérer un lien hypertexte dans la page. C- Insérer un lien hypertexte sur une image de la page. D- Déterminer les couleurs des liens hypertexte. 7. La création des pages supplémentaires A- La création. B- L'enregistrement des pages supplémentaires. C- La navigation interne entre les pages du site. 8. Les méta-tags 9. Les scripts A- Présentation. B- Intégration d'un script. 10. Conclusion de la première partie 11. La recherche et la création d'un espace d'hébergement en ligne A- La recherche d'un hébergement en ligne. B- L'hébergement sur sa page perso. C- L'hébergement chez un hébergeur gratuit : Ifrance. 12. La mise en ligne A- La mise en ligne sur sa page perso. B- La mise en ligne sur un hébergement gratuit. 13. Le référencement A- Passer par les copains. B- Inscrire le site dans les principaux moteurs de recherche. C- Inscrire votre site dans des annuaires. D- Le partenariat. 14. Conclusion générale. ces différentes manipulations vont être décrites dans l'ordre, ci-après.

3 1 Le téléchargement d'un kit de page. Deux solutions s'offrent à vous quand vous désirez créer un site Web : 1. Créer totalement la page vous-même, mais cela n'est pas à la portée de tout le monde. En effet, vous devez posséder un certain nombre de connaissances en matière de feuille CSS, notamment. 2. Utiliser un kit tout prêt que vous aurez trouvé sur le Net. Je choisis donc cette seconde solution car plus simple. En fait, il est possible de trouver en ligne trois types de kits de page : 1. Les kits totalement gratuits. Généralement de qualité jugée inférieure, ils n'en demeurent pas moins tout à fait corrects. 2. Les kits «Allopass». Pour le montant d'un appel téléphonique, vous pouvez télécharger ces kits, un peu plus évolués. 3. Les kits professionnels. Là, on retrouve des tarif assez effarants pour le commun des mortels que je suis. De quelques dizaines d'euros, cela peut aller très, très haut... Dans le cas de ce tuto, j'ai choisi l'option du kit totalement gratuit. Le kit en question date de 2003 et nous est fourni par un des partenaires de Tutopat, le site WebDiz. Il est une réalisation de son Webmaster KingLouis qui m'a donné l'autorisation de l'utiliser dans ce tuto. Commençons donc par aller le télécharger ICI

4 Voici donc notre kit téléchargé. 2 La décompression du kit. Avant tout chose, il est nécessaire de créer un dossier spécifique sur notre disque dur, afin d'y stocker tout ce qui concernera notre site. Non seulement nous y retrouverons tous les éléments du kit de départ, mais nous y insèrerons tout ce que nous ajouterons : images supplémentaires, boutons, bannière, etc... Nommez le comme vous l'entendez, voici le mien : Décompressons à présent notre kit dans ce dossier. Si vous ne savez pas décompresser un fichier, un tuto spécifique est à votre disposition ICI

5 Etudions à présent le contenu du dossier en l'ouvrant. Trois choses différentes apparaissent : 1. Un document texte qui contiendra généralement un petit message de l'auteur du kit, vous demandant ou vous précisant certaines choses. 2. Un document «HTML» qui est en fait le code notre page. En effectuant un double-clic sur ce fichier, la page suivante va s'ouvrir dans votre navigateur :

6 Vous voyez là le kit de page tel qu'il se présente dans votre navigateur. Même s'il ne vous semble pas formidable, sachez que nous allons l'améliorer. 3. Enfin, un dossier images qui contient toute les images faisant partie du kit de page. Regardons d'un peu plus près son contenu.

7 Nous trouvons ici la totalité des portions des images de notre kit. Nous pourrons utiliser n'importe quel logiciel de graphisme pour les modifier à notre guise... Notre kit est à présent prêt à ce que nous nous en occupions. Il nous faut donc penser à installer l'outil indispensable : L'éditeur HTML.

8 3 L'installation du logiciel d'édition HTML. J'ai opté dans ce tuto pour le logiciel gratuit et en français appelé Nvu 1.0. Pour le télécharger, il vous suffit de cliquer ICI Procédez ensuite à son installation complète, elle est tout à fait classique. Et retrouvez vous avec votre raccourci vers le programme sur le bureau (ou dans la barre de lancement rapide). Lancez le, il apparaitra ainsi :

9 Nvu va devenir à compter de cet instant, notre outil principal pour la création de notre site. C'est grâce à lui que nous allons insérer ou modifier des textes, des images, des liens hypertexte, créer toutes les pages de notre site... Nous y créerons et gèrerons aussi nos méta-tags (indispensables à un bon référencement), entrerons des scripts, etc... Je n'entrerai pas dans toutes les fonctions disponibles, mais vous montrerai les principales. 4. Les droits d'auteur du concepteur. Ce passage est impératif! Sachez que tout réalisateur graphique vous demandera de laisser le lien inséré dans son kit, vers son propre site. Le fait de supprimer ce lien peut entrainer pour vous des poursuites judiciaires pour plagiat. Respectez donc son travail, c'est la moindre des choses... De la même façon, vous avez la possibilité d'ajouter votre propre copyright, concernant le contenu de votre site.

10 5 La personnalisation et la mise en forme visuelle de la page index du site. Maintenant que nous sommes prêts, voici venir l'étape la plus importante dans la création de notre site. Quelques conseils de base. En effet, le succès rencontré sera fonction, non seulement du contenu, mais aussi de la présentation de notre page d'accueil. Premier point : sachez que la présence de fautes d'orthographe par exemple, sera le plus sûr moyen de faire fuir les éventuels visiteurs. Pensez donc à utiliser les correcteurs à votre disposition, que ce soit dans Word ou sur le Net. Utilisez aussi un langage correct en évitant notamment le sms. Second point crucial : le poids de votre page. Evitez les pages de plus de 30 Ko, vous conseillent la plupart des sites pour Webmasters ; ce en quoi ils n'ont pas tort! L'internaute qui arrive sur votre site n'aura pas la patience d'attendre 20 secondes, voire une minute si sa connexion n'est pas très rapide, l'ouverture de la page ; il sera déjà reparti ailleurs... Le troisième point : les méta-tags. Cela fera l'objet du chapitre suivant car plus délicat et pointu à traiter. Le dernier point : le référencement. Il fera l'objet de la dernière partie du tuto, ne se justifiant que lorsque votre site sera réellement mis en ligne. Sachez prendre le temps lors de cette étape! Mettre en ligne un site non fini n'est pas souhaitable. Cela ne vous empêchera pas de l'étoffer ou le modifier par la suite... A titre indicatif, cela m'a pris un bon mois pour Tutopat... Afin de procéder à la personnalisation, il est nécessaire d'accéder à notre page du kit.

11 5/A- Ouvrir notre page index. La commande est simple. Un clic sur puis, allez chercher le fichier HTML ; Il se nomme toujours «index». Le fichier s'ouvre maintenant dans Nvu.

12 Nvu nous offre la possibilité de voir notre page de quatre façons différentes qui sont chacune matérialisée par une touche. L'image que nous visualisons ci-dessus est celle correspondant à la touche Elle est située en bas à gauche de la fenêtre de Nvu, ainsi que les suivantes. C'est là que nous pourrons modifier les textes, liens, images, etc...

13 La touche Elle va ouvrir le fichier en vous indiquant la position de toutes les balises HTML, le langage utilisé dans la programmation de la page. Nous n'utiliserons pas cette fonction dans le tuto car elle s'avère peu maniable pour un débutant en création de site,

14 La touche Elle va nous permettre de visualiser directement le code HTML de la page. Nous y interviendrons ultérieurement lors de l'implantation de scripts ou pour entrer nos méta-tags...

15 Pour finir, la touche Celle-ci va nous permettre après chaque modification, mais aussi à tout instant, de visualiser le résultat tel qu'il apparaitra dans un navigateur. Nous utiliserons donc dans notre cas alternativement les onglets «Normal» et «Aperçu» pendant toute la configuration de notre site.

16 Noubliez pas surtout... Cette manoeuvre est à faire impérativement après chaque modification, à moins que nous ne souhaitiez repartir de zéro à cause d'une erreur...

17 5/B- Insérer sa bannière personnelle. Il est bien évident que vous souhaiterez insérer une bannière personnelle en lieu et place de celle du kit. La méthode la plus simple va consister à remplacer tout simplement celleci dans le dossier images du kit. Ouvrons donc ce dossier afin d'y voir la dimension qu'elle a, afin que la nôtre soit au même format. En effet, une bannière plus grande ou plus petite risquerait de déformer le kit... Ouvrez donc le dossier Mon site Web / images. Il s'agit là d'un format standard assez répandu pour lequel vous n'aurez aucun mal à trouver un éventuel générateur sur le Net grâce à Google. Tutopat vous propose aussi un service de création graphique gratuite Ce qui vous permettra une personnalisation encore plus poussée.

18 Vous trouverez aussi un bon nombre de tutos graphisme pour vous aider dans une conception totalement personnelle ici. Il est indispensable de souligner ici l'importance d'une bannière aussi légère que possible! Toujours dans le but de permettre un affichage rapide de nos pages... Voici donc celle que j'ai réalisée pour mon site : Elle est au bon format et porte le même nom : banniere. Un seul petit détail va poser un semblant de problème: elle est au format.gif alors que celle existante est en.png... Qu'à cela ne tienne, nous allons faire le nécessaire! Placez la bannière créée dans le dossier images de votre site.

19 Revenons à présent dans notre éditeur HTML, Nvu. Dans la fenêtre, Vous voyez votre curseur clignoter au niveau du code correspondant à la bannière. Je vous ai surligné l'ensemble du code de celle-ci.

20 Et là, comme par miracle... Noubliez pas de procéder à un enregistrement de la modification!

21 5/C- Insérer son logo personnel. Passons à présent au logo. Toujours dans l'esprit de ne pas dénaturer notre kit, vérifions la taille à utiliser pour créer notre version personnalisée. Dans l'onglet Normal, faites un clic gauche sur le logo situé en haut à gauche de la page. Vous retrouvez alors votre curseur qui clignote au beau milieu de la ligne de code concernant cette image. Il vous est expliqué dans la capture ci-dessous comment reconnaître les propriétés d'une image insérée dans le kit.

22 Résumons donc les propriétés de l'image que nous devons créer : elle doit faire 156 X 100 pixels. être de préférence en.png, mais pas obligatoirement. être mise dans le dossier images des fichiers de notre site. Il ne reste qu'à créer ce logo... Voici donc celui que j'ai créé pour ce site de démonstration.

23 Ayant fait le choix du format.gif pour celui-ci, je l'insère donc dans le dossier images de mon site sous le nom entetegauche,gif.

24 Il ne me reste plus qu'à modifier la ligne de code pour changer de logo. Pour cela, je change juste la terminaison du nom de l'image dans l'onglet Sources, tout simplement. Et là, nous constatatons que...

25 5/D- Personnaliser les couleurs des objets. En choisissant votre kit, vous vous êtes probablement demandé(e) si il existait une possibilité de changer les couleur des objets qui le consituent? Rien de plus simple! Ouvrez votre logiciel de retouche favori, puis modifiez le à votre guise. Est devenu pour moi ceci :

26 De ce fait, mon site change de look... Afin de visualiser ce changement, procédez à un enregistrement de votre fichier, puis fermer le et réouvrez. Les images de mon site sont à présent modifiées.

27 5/E- Changer la couleur du fond de page. Dans la continuité de la personnalisation de notre site, voyons à présent comment changer la couleur de fond de la page afin de l'adapter à notre goût personnel. Cliuqez sur la touche donnant accès au code : Dans la fenêtre, rendez vous au début du code afin d'y trouver la balise <body>. Vous la repèrerez facilement, juste après </head>. Le terme background-color signifie couleur d'arrière-plan. Elle est ici mentionnée au format RGB. Un logiciel comme ColorCop pour lequel un tuto est à votre dispositon ici vous permettra d'obtenir les codes de la couleur que vous désirez.

28 Mon choix s'est porté dans le cas présent sur une couleur saumon dont le code RGB est : 255, 151, 103. Je modifie donc mon code en conséquence.

29 En cliquant sur la touche Vous visualisez alors le changement d'apparence de votre page. Nous nous rendons alors compte que la couleur de fond ne couvre pas l'emplacment de certaines images qui ont gardé celle d'origine.

30 Il convient donc de reprendre les images suivantes afin de mettre la partie bleu-ciel dans la nouvelle couleur :

31 Servez vous de votre logiciel de retouche d'images afin de procéder à l'opération, en remplaçant les autres au fur et à mesure. Une fois cette opération terminée, profitons en pour enregistrer à nouveau notre fichier pour prendre en compte nos modifications. Ouvrons le à nouveau et là... Comme vous le constatez, notre page commence à vraiment prendre tournure sur le plan de son graphisme. Il est également possible de remplacer la couleur de fond par une image que vous aurez choisie. Dans ce cas, il vous faudra tout d'abord mettre en transparence la partie bleu-ciel des images ci-dessus, de façon à avoir toujours la même homogénéité, Ensuite, vous devrez modifier le code background. L'ajout d'une image en fond à la place d'une couleur étant susceptible d'alourdir considérablement la page, je vous déconseille fortement cette option et vous laisse donc découvrir éventuellement la façon de procéder.

32 5/F- Insérer une image supplémentaire dans la page. Les images faisant partie de notre kit sont une chose, mais nous pouvons désirer en rajouter une ou plusieurs supplémentaires dans notre page. Voici encore une manipulation simple si'lon respecte une règle première : mettre toujours les images dans le même dossier que les autres, Ainsi, notre site fonctionnera immédiatement dès sa mise en ligne. Nous n'aurons aucun mal à les retrouver si nous prenons en plus le soin de les nommer de manière aisément mémorisable! Prenons comme exemple l'image suivante à insérer : Je commence donc par la mettre dans le dossier images dans celui que j'ai créé sous le nom de Mon site Web.

33 Je clique gauche à présent directement à l'emplacement où je souhaite insérer l'image en question. Cliquez ensuite sur Puis

34 Volontairement, dans le cadre d'une création de premier site simple, je n'aborde pas les propriétés supplémentaires de l'image qu'il est possible d'apporter. Vous êtes cependant libre de les découvrir par vous-même,

35 Voici note image insérée. Nous sommes arrivé(e)s au terme de la configuration et de la mise en forme graphique de notre page. Il est encore une fois primordial de bien choisir votre kit en fonction du contenu images que vous souhaitez intégrer. Le texte est toujours modulable, l'image bien moins facilement intégrable à un kit inadapté...

36 6 Le personnalisation et la mise en forme textuelle de la page index du site. 6/A- Insérér du texte dans la page Insérer du texte pur est la manoeuvre la plus simple à effectuer. Revenez sur l'onglet Puis effacez la partie de texte dans le kit que vous désirez remplacer.

37 Grâce au pavé texte Insérez simplement le votre. N'hésitez pas à utiliser des polices sortant un peu de l'ordinaire, mais pensez toujours à vos lecteurs quand à la taille et la compréhension. Il est usuellement conseillé de ne pas utiliser beaucoup plus de trois couleurs de texte différentes. Ce qui donne dans mon cas, le résultat suivant : Il s'avère ici que la déformation est due au fait que ce kit n'accepte pas que l'on y entre des images, hormis dans l'en-tête. Ce fait est ponctuel et du uniquement au kit choisi, Vous n'aurez aucun souci à insérer vos images dans des réalisations mieux adaptées à cet effet.

38 6/B- Insérér un lien hypertexte dans la page. Il nous faut maintenant penser à finaliser notre page avec les liens de navigation vers nos autres pages, nos partenaires, des sites externes, etc... Pour cela, nous allons rendre un texte ou un mot cliquable ; on appelle cela un lien hypertexte. Dans l'exemple qui suit, nous allons ajouter un lien hypertexte sur le mot Tutopat située dans le cadre de navigation de gauche, cela va se faire dans l'onglet Procédez comme suit. Puis agissez comme indiqué sur la capture suivante.

39 Voici les choix dont vous disposez quand à la façon dont va agir le navigateur de vos visiteurs lors d'un clic sur le lien que nous venons de créer ici. Nous en avons fini avec le lien hypertexte. Il va de soi que cette manoeuvre sera à recommencer pour chaque lien externe à votre site. Le cas particulier d'un lien vers une autre page de votre propre site sera évoquée ultérieurement, lorsque nous en aurons créé au moins une seconde.

40 Voici donc le lien installé. Petit rappel : n'oubliez pas d'enregistrer vos modifications au fur et à mesure, sous peine de devoir recommencer! Pensez bien à en prendre systématiquement l'habitude afin de vous éviter des déconvenues qui peuvent mettrent vos nerfs à rude épreuve... Ceci était le conseil du jour, qui sert aussi de pause détente à ceux d'entre vous qui ont décidé d'avaler d'un trait ce tutorial en forme de pavé. Un petit café, un petit pipi, une cigarette (éventuellement) et l'on continue? Si vous vous sentez d'attaque, bien sûr!

41 6/C- Insérér un lien hypertexte sur une image de la page. Il peut vous être nécessaire de mettre un lien hypertexte, non plus sur un mot, mais sur une image de la page. Cela sera notamment le cas pour des bannières de partenaires, entre autres. La méthode est semblable à la précédente. Puis...

42 A dessein, je vous ai emmené au message d'erreur qui suit. La validation entraine la réouverture de la fenêtre précédente, mais dans un autre onglet : celui de l'emplacement. Nous resterons dans une configuration simple et ne mettrons donc pas de texte alternatif.

43 Notre lien hypertexte sur l'image est à présent en place. A vous de peaufiner le contenu texte de votre page d'accueil. N'oubliez pas que c'est là que la plupart des internautes jugent un site auquel ils rendent visite pour la première fois! Une syntaxe douteuse, un language type SMS et surtout des fautes d'orthographe, seront autant de risques de voir les visiteurs potentiels fuir à grands pas... Prenez donc le temps d'une rédaction soignée, en vous aidant au besoin d'un correcteur orthographique comme celui de Word par exemple.

44 6/D- Déterminer les couleurs des liens hypertexte. Voici un point de détail qui peut avoir une grande importance. Il est parfois difficile de repérer les liens hypertexte dans certaines pages Web que nous visitons... Nous allons donc faire en sorte que les notre soient bien visibles en configurant leur couleur suivant qu'ils sont simplement affichés, que le curseur du visiteur passe dessus ou qu'il l'ait déjà visité. Pour cela, cliquez sur la touche Puis sur... Voici comment procéder.

45 Faites vos propres essais. Dans la fenêtre de droite apparaissent les couleurs choisies. Vous pouvez ainsi visualiser leur lisibilité sur le fond. Voici mon choix personnel pour cette démonstration. Voici le résultat de cette opération.

46 Mes liens hypertexte sont devenus repérables. Nous en avons à présent fini de notre page d'accueil. Je vous le répète encore une fois,,,,, Soignez cette page, c'est la plus importante du site! Nous allons continuer notre parcours, non pas du combattant, mais du Webmaster... Une petite sauvegarde, juste pour la route?

47 7-La création de pages supplémentaires 7/A- La création. Un site Web, ce n'est pas qu'une seule page, c'est un ensemble! Si l'accueil est plutôt destiné à présenter succintement le contenu du site en essayant d'attirer le client, il va falloir créer des pages supplémentaires, à raison d'une (voire de plusieurs) par sujet, objet, motif, etc... Je vous invite à respecter pour cela deux règles d'or de la simplicité et de la fonctionnalité d'un site: Toujours garder le même habillage de page, tant que faire se peut. Cela permettra, en gardant les images dans le cache du navigateur, d'ouvrir les pages suivantes bien plus rapidement. Garder ainsi une uniformité du site qui vous rendra plus crédible auprès des internautes qui vous rendront visite. Ouvrez donc votre page index.

48 Suivant le principe appliqué pour notre page index, insérez votre contenu dans la page, comme vous l'entendez. Spécialement pour ce tutorial, j'ai rédigé rapidement une seconde page à titre d'exemple. Le moment est maintenant venu d'enregistrer cette page supplémentaire que nous venons de créer.

49 7/B- L'enregistrement des pages supplémentaires. Là encore, deux règles sont à respecter : Toujours enregister les nouvelles pages dans le même dossier que la page index. Donner un nom simple mais pertinent à chaque nouvelle page! Cela permettra de s'y retrouver facilement lors de modifications ultérieures à apporter à l'une plutôt qu'à l'autre. Je procède donc à l'enregistrement de ma seconde page. Je clique sur Puis... Ma seconde page est enregistrée, Cette opération est à répéter autant de fois que le site contiendra de pages, tout en sachant que vous pourrez toujours en rajouter par la suite en cas de besoin.

50 7/C- La navigation interne entre les pages du site. A partir de l'instant où un site comporte plusieurs pages, il va de soi qu'il est nécessaire de mettre en place un système de liens hypertexte entre elles, permettant ainsi de naviguer librement de l'une à l'autre... Nous allons pour cela utiliser un cadre sur la gauche de la page. Comme il s'agit encore là d'un lien hypertexte, surlignons le texte que nous désirons utiliser en guise de lien vers notre seconde page. Puis cliquons sur la touche de lien.

51 La fenêtre déjà vue de détermination de l'adresse URL du lien hypertexte s'ouvre. Le fait de cliquer la touche déclenche l'ouverture d'une nouvelle fenêtre, normalement déjà positionnée à l'intérieur du dossier du site.

52 Le fait de valider a mis en place le lien hypertexte de navigation à l'intérieur même du site.

53 Réitérez cette manipulation pour chacune des pages vers lesquelles vous souhaitez mettre en place un lien sur votre page index. Vous n'aurez plus ensuite qu'à faire la même chose sur chacune des pages que vous créerez, de façon à permettre la navigation complète indifféremment à partir de n'importe laquelle. Nous en avons à présent fini avec la construction même de notre site. Les images sont en place Les textes également Les liens de navigations interne et externes aussi les prochaines étapes vont maintenant avoir pour but la préparation à la mise en ligne de tout cela, en cherchant bien évidemment le but de tout site, attirer le client, si j'ose m'exprimer ainsi...

54 8 Les méta-tags. Voici encore un point crucial dans la construction de notre site! Que sont tout d'abord ces fameux méta-tags? En fait, le but premier que nous allons rechercher ici sera de chercher le meilleur moyen de faire connaître notre site. Une partie de ces méta-tags est une suite de mots-clés que nous allons ajouter dans le code de notre page afin de permettre aux moteurs de recherche de nous référencer lorsqu'un internaute tapera un mot ou une expression dans celui-ci. Il va vous falloir déterminer des mots-clés qui ciblent réellement le contenu de votre ou de vos pages. Un site comme Tutopat ne va par exemple pas se contenter du mot tutorial ou tuto pour permettre un bon référencement. Il va plutôt choisir d'y ajouter créer son site, tutoriaux Photofiltre, tutorial emule 0.46a ou tutorial création site HTML. Ce qui lui permettra un ciblage plus précis et donc de meilleures chances de se retrouver dans les premiers résultats d'un moteur de recherche. La seconde partie des méta-tags est elle destinée à permettre d'identifier certains critères de votre site comme le language utilisé, le système de codage du site, les coordonnées du Webmaster, etc... Tutopat a réalisé dans ce domaine deux tutoriaux concernant le sujet. Il s'agit de deux logiciels qui vont vous permettre de créer ces métas très facilement, surtout dans le cadre d'un premier site. GenerMTag et son tuto vous créera vos métas simples alors que si vous optez pour le tuto N1busMetaEditor, il vous poussera un peu plus dans le domaine. Libre à vous d'utiliser l'un ou l'autre pour créer les votres.

55 A titre d'exemple, voici les méta-tags que j'ai mis personnellement en place pour favoriser un bon référencement de Tutopat. Ces balises datent un peu et je dois les remettre à jour prochainement, mais elles vous donnent un aperçu réaliste. <title>accueil Tutopat</title> <meta NAME="description" CONTENT="Plus de 470 tutoriaux à votre service dans tous les domaines : logiciels, P2P, Graphisme, Vidéo, Bureautique, etc..."> <meta NAME="keywords" CONTENT="tuto, tutorial, tutos, tutoriaux, tutoriels, emule, azureus, vidéo, graphisme, sécurité, XP, logiciels, avatars, tutorial Shareaza, tutorial Bittornado, création bannières, création boutons, création signatures, tutorial emule 0.45b, tutoriaux Photofiltre, fonds d'écran"> <meta http-equiv="content-language" content="fr"> <meta NAME="author" CONTENT="Patarien"> <meta NAME="rating" CONTENT="general"> <meta NAME="classification" CONTENT="Tout public"> <meta NAME="copyright" CONTENT="patarien@hotmail.com"> <meta NAME="expires" CONTENT="never"> <meta NAME="rating" CONTENT="general"> <meta NAME="revisit-after" CONTENT="5 days"> <meta NAME="Robots" CONTENT="all"> <meta NAME="Reply to" CONTENT="patarien@hotmail.com"> <meta NAME="publisher" CONTENT="Patarien"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso "> Soignez particulièrement cette étape, cela vous évitera la déconvenue d'un site totalement ignoré des internautes...

56 Et voici celles générées avec N1busMetaEditor, spécialement pour ce site de démonstration : Notez que j'ai remplacé certaines coordonnées personnelles par des * <meta http-equiv="content-type" content="text/html;charset=iso "> <Title>le titre de ma page</title> <meta name="keywords" content="255 caractères maximum de mots clés, séparés par une virgule. <meta name="description" content="description du contenu du site/moins de 200 caractères"> <meta name="abstract" content="description du contenu du site/moins de 200 caractères"> <meta name="author" content="patarien"> <meta name="generator" content="nvu ou Frontpage, etc..."> <meta name="publisher" content="patarien"> <meta name="reply-to" content="tutopat@yahoo.fr"> <meta name="contactcity" content="**********"> <meta name="contactzipcode" content="49***"> <meta name="contactstate" content="france"> <meta name="identifier-url" content="adresse URL"> <meta http-equiv="content-language" content="fr"> <meta name="copyright" content="copyright <meta name="revisit-after" content="15"> <meta name="category" content="computing/software"> <meta http-equiv="refresh" content="30;url= <meta name="distribution" content="global"> <meta name="rating" content="general"> <meta name="robot" content="index,follow"> <meta name="date-creation-yyyymmdd" content=" "> <meta name="date-revision-yyyymmdd" content=" "> <!-- METAS éditées par N1busMetaEditor v3.0 FREEWARE //--> <!-- WEB : //--> <!-- FEEDBACK : th.godin@n1bus-exp.com //--> <!-- Copyright N1bus-Expériences //-->

57 Il ne me reste qu'à les intégrer dans la page, à la place de celles existantes. Après enregistrement de la modification, ouvrez à nouveau votre page index et vous vous rendrez compte qu'elle a changé de nom et pris celui que vous lui avez donné par l'intermédiaire des méta-tags.

58 Répétez cette opération pour chacune de vos pages en ayant soin de les nommer de façon différente, même si vous gardez les mêmes méta-tags. La balises à modifier pour changer le titre qui apparaitra dans l'onglet du navigateur est la suivante : <Title>le titre de ma page</title>

59 9 Les scripts. 9/A- Présentation. Nous abordons à présent le dernier point de la conception d'un site avec l'ajout de scripts. Sachez tout de suite que vous n'avez aucune obligation d'en intégrer à vos pages car il ne s'agit la en fait que de l'agrémenter par quelques effets visuels, voire sonores. Leurs fonctions et leur utilité peut varier grandement et le choix de ceux que vous apporterez éventuellement à votre site vous incombe. Pensez malgré tout au poids de vos pages ; plus vous aurez de choses, plus votre page sera lourde et donc longue à ouvrir par de petites connexions... Il existe de très nombreux scripts proposés par un très grand nombre de sites de Webmastering. Je vous invite à rechercher parmi les partenaires de Tutopat qui s'avèrent très sérieux. Vous trouverez leurs adresses en page d'accueil. A titre d'exemple de mise en place d'un script, je vais vous donner ici deux exemples simples : Un effet de fondu-enchainé sur la navigation entre les pages. Un second effet...