Créer son propre site Web en language HTML

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à.

Les opérations vont être multiples et se diviser en plusieurs étapes consécutives, accessibles par lien direct à partir du sommaire ci-dessous. 1. 2. 3. 4. 5. 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.

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

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

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 :

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.

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.

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 :

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.

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.

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.

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...

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,

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...

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.

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...

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.

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.

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.

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

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.

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.

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.

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...

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 :

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.

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.

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.

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.

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

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.

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.

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

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,

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é...

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.

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.

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.

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.

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!

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...

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.

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.

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.

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.

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?

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.

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.

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.

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.

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.

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

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...

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.

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-8859-1"> Soignez particulièrement cette étape, cela vous évitera la déconvenue d'un site totalement ignoré des internautes...

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-8859-1"> <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 www.tutopat.com"> <meta name="revisit-after" content="15"> <meta name="category" content="computing/software"> <meta http-equiv="refresh" content="30;url=http://www.tutopat.com"> <meta name="distribution" content="global"> <meta name="rating" content="general"> <meta name="robot" content="index,follow"> <meta name="date-creation-yyyymmdd" content="20060121"> <meta name="date-revision-yyyymmdd" content="20060121"> <!-- METAS éditées par N1busMetaEditor v3.0 FREEWARE //--> <!-- WEB : http://n1busmeta.n1bus-exp.com //--> <!-- FEEDBACK : th.godin@n1bus-exp.com //--> <!-- Copyright 2001-2003 N1bus-Expériences //-->

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.

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>

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...

9/B- Intégration d'un script. Voici à titre de premier exemple, un script qui donne un effet de fondu-enchainé entre les différentes pages du site. <META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=2,Transition=12)"> Sur le site où je l'ai trouvé, il est précisé qu'il doit être inséré entre les balises <head> du code. Je me rend donc dans le code par la touche Je cherche les balises, puis y intègre mon script par un copier/coller. Il ne reste qu'à enregistrer les modifications après avoir répété l'opération sur toutes les pages du site.

Le second exemple va aborder un script un tout petit peu plus compliqué puisque contenant plusieurs parties de code à insérér en des endroits différents. Il provient du site gratos.be et sert à proposer aux internautes qui visitent votre site de mettre celui-ci en page de démarrage de leur navigateur. Le voici tel qu'il se présente sur le site : il nous faut donc ici insérer deux parties différentes en deux endroits différents. Intéressons nous tout d'abord à la partie à mettre entre les balises <head>et </head>.

</script> <script LANGUAGE="JavaScript"> // fourni par gatos.be web site : http://www.gratos.be function AfficheHomePage() {if (document.all && document.getelementbyid) {document.write('<a HREF="#" onclick="homepage(this);return(false);">gratos AU DEMARRAGE</A><BR>'); } } function HomePage(obj) {obj.style.behavior='url(#default#homepage)'; obj.sethomepage('http://www.gratos.be/'); } </script> Avant d'insérer ce code dans votre page, il faut au préalable remplacer la partie mentionnée en rouge par votre propre texte. Ainsi, par exemple. </script> <script LANGUAGE="JavaScript"> // fourni par gatos.be web site : http://www.gratos.be function AfficheHomePage() {if (document.all && document.getelementbyid) {document.write('<a HREF="#" onclick="homepage(this);return(false);">mettre ce site en page de démarrage</a><br>'); } } function HomePage(obj) {obj.style.behavior='url(#default#homepage)'; obj.sethomepage('http://www.gratos.be/'); } </script>

Entrez alors le code modifié juste avant la balise </head>, emplacement qui vous permettra de le retrouver facilement. Pour ce qui est de la seconde partie du code, on nous demande de la placer entre les balises <body> et </body>.

En fait, cette partie commence juste après la balise </head> et ne se termine qu'à la fin de la page. De ce fait, nous allons pouvoir choir dans toute la page, l'endroit où nous allons insérer cette partie. Déterminez donc l'endroit où vous souhaitez voir apparaître ce message. Puis...

Allez donc chercher la partie du script à insérer entre les balises <body> et </body> et collez les très précisément à l'emplacement où votre curseur clignote. Cela va terminer la mise en place du script. Il est à noter ici que les effets générés par certains scripts ne peuvent être visualisés dans la plupart des éditeurs HTML comme Nvu ou Frontpage, il faudra donc attendre d'avoir mis notre site en ligne pour vérifier leur bon fonctionnement.

Sachez aussi que les sites vous proposant des scripts gratuits vous demanderont souvent d'insérer un lien en échange du service rendu.ce sera aussi une façon de respecter leur travail comme vous apprécierez que l'on respecte le votre. Vous trouverez quantité de script à fonctions très différentes sur le Net, par une simple recherche. Mais en consultant déjà nos partenaires, vous pourrez facilement trouver des choses intéressantes. Le fournisseur de notre kit WebDiz, nous propose par exemple un générateur de script pour intégrer du texte ou une image défilante. Bien des sites vous proposeront comme lui des scripts de livre d'or, compteurs en tous genres, etc... En résumé, les scripts ajoutent des fonctions tellement variées que vous n'aurez que l'embarras du choix! Mais n'oubliez pas qu'un usage immodéré ralentira la vitesse d'affichage de votre page par le temps de mettre en fonction la chaudière...

10 - Conclusion de la première partie. La conception de votre site arrive maintenant à son terme. Toute cette première partie de la création d'un site est, je le répète encore, essentielle, car c'est là que se joue son avenir! Une construction bâclée à la va-vite se ressentira immédiatement lors du premier passage de tout internaute, le faisant fuir le plus souvent! Prenez donc bien le temps nécessaire à une construction sensée et rationnelle qui sera votre meilleur atout pour sa réussite future. Il vaut parfois mieux repartir de zéro que de s'entêter avec un kit de page inadapté à ce que l'on désire faire, une présentation approximative ou tout bonnement ratée, par exemple... Savoir se remettre en cause sera un gage de qualité, soyez en persuadé(e). Notre site est encore assez loin d'être en ligne, mais nous pouvons considérer que le plus difficile est fait.

11 La recherche et la création d'un hébergement en ligne. Maintenant que notre site est construit, il ne nous reste plus qu'à en faire profiter les autres en ligne. Les deux étapes qui viennent maintenant sont susceptibles d'être très différentes suivant les choix de chacun... C'est la raison pour laquelle tout ce que je vous expliquerai ne le sera qu'à titre d'exemple à adapter à votre propre cas. 11/A- La recherche d'un hébergement en ligne. Il existe en fait plusieurs types d'hébergement en ligne qui sont fonction de vos choix financiers, mais aussi de qualité! Je vais vous résumer les différentes options qui s'offrent à vous sous la forme d'un tableau regroupant schématiquement les tarifs, avantages et inconvénients. Les commentaires apportés n'engagent bien sûr que moi!

Types d'hébergement Pages perso des F.A.I. Principaux : Alice Wanadoo Free etc... Tarif Totalement gratuit Intégré à votre abonnement Internet Avantages Hébergeurs gratuits Gratuit Principaux : Lycos Voilà multimania etc... Hébergeurs Allopass Inconvénients Fiabilité de connexion Pérennité Simplicité de gestion grâce au système d'upload généralement intégré Parfait pour les petits budgets Bande passante illimitée Parfait pour les petits budgets Accès aisé Bande passante illimitée Généralement entre 1,68 et 1,80 / mois Accessible aux budgets modestes Exemples : Nuxit Citeheb etc... Hébergeurs payants A foison sur le Net De quelques uro à plusieurs milliers d' uro Espace modulable Bande passante modulable Fiabilité Pas de pub Problème en cas de changement de fournisseur Espace parfois limité Pub généralement présente Connexion parfois de piètre qualité Peuvent disparaître du jour au lendemain Pub généralement présente Peuvent disparaître du jour au lendemain Pub parfois présente Appel téléphonique mensuel à ne pas oublier Espace limité Bande passante limitée Si des prix corrects existent, le déraisonnable aussi Pour de plus amples précisions au sujet des différents hébergements, je vous invite à rendre visite aux listes des hébergeurs gratuits et Audiotel de notre partenaire WebDiz. Vous y trouverez tout un panel décrit et commenté.

Je ne puis naturellement ici vous décrire la façon de procéder dans tous les cas présentés ci-dessus... nous n'en verrons donc que deux : L'hébergement sur sa page perso chez Wanadoo. (Je montre l'exemple de mon propre fournisseur) L'hébergement chez un hébergeur gratuit. A chaque fois, nous procèderons en deux étapes : l'inscription. la mise en ligne proprement dite. Notez bien qu'il s'agit là de procédures de démonstration! Je ne pourrai être tenu pour responsable dans le cas où l'hébergeur que vous aurez choisi utilise des méthodes très différentes de celles expliquées dans les pages qui suivent.

11/B- L'hébergement sur sa page perso. Je prend donc ici l'exemple de mon propre fournisseur d'accès Internet : wanadoo, ne pouvant pas vous en proposer d'autres. Sachez cependant que la procédure de création de son espace perso est généralement assez semblable, quel que soit le votre. Rendez vous tout d'abord sur la page d'accueil de Wanadoo, puis cliquez à gauche, comme indiqué ci-dessous. Puis, identifiez vous.

En fait, Wanadoo présente les trois offres suivantes : Sachant que je veux profiter d'une offre gratuite, mais d'un minimum de fonctionnalité, je choisis donc l'offre Confirmé.

Voici la fenêtre qui s'ouvre : Voici donc les deux principales informations réunies : Le début de l'adresse de mon site : http://perso.wanadoo.fr/patarien Les coordonnées de login FTP : Adresse du serveur : perso-ftp.wanadoo.fr Nom du serveur : ******** Mot de passe : Pass de messagerie Wanadoo

11/C - L'hébergement chez un hébergeur gratuit : IFrance Si j'ai choisi celui-ci plutôt qu'un autre, c'est un peu au hasard, sachez le. Rendons nous donc sur la page d'accueil de Ifrance pour procéder à notre inscription aux services gratuits du site. Puis... Pour ce qui est de la zone milieu, vous comprendrez que ces informations restent confidentielles...

apparaît alors le message suivant : Quelques instants plus tard, votre compte est créé. De plus, vos coordonnées vous sont présentées. Voici donc les deux principales informations réunies : Le début de l'adresse de mon site : http://tutopat.ifrance.com Les coordonnées de login FTP : Adresse du serveur : tutopat.ifrance.com Nom d'utilisateur : tutopat_1 Mot de passe : Mon mot de passe

12 La mise en ligne. Je vais donc maintenant procéder à la mise en ligne de mon site. Je vous présente ici les deux méthodes successivement : Sur sa page perso. Chez Ifrance 12/A La mise en ligne sur sa page perso il ne me reste plus que deux actions à effectuer : Configurer mon logiciel de transfert FTP. Transférer tous les fichiers et images de mon dossier de site. Comme précisé au début de ce tutorial, je vais personnellement utiliser Filezilla que je considère comme le meilleur logiciel en la matière. Un tutorial spécifique est à votre disposition afin de vous familiariser avec ce formidable outil. Il vous est cependant offert deux alternatives sur Tutopat : EnvoiFTP et FTP Expert. A vous de choisir l'outil que vous préférez... je vais donc, en ce qui me concerne, configurer Filezilla en utilisant les coordonnées situées en bas de la dernière capture.

En relançant Votre logiciel FTP, si vous avez bien configuré la connexion, vous devriez vous retrouver en face de ceci.

Voici donc venu le moment de mettre en ligne l'ensemble du contenu de votre dossier mon site Web. J'ai bien précisé le contenu et non le dossier! Je vais en ce qui me concerne, procéder un peu différemment. En effet, cet hébergement étant censé me servir dans plusieurs domaines, je vais uploader les fichiers du site, mais dans un dossier spécifique afin de m'y retrouver par la suite. Je procède donc maintenant au transfert de tous les fichiers et dossiers (images notamment) contenus dans le dossier mon site Web vers ma page perso.

Si je vous assurais que, dès à présent votre site est en ligne, seriez vous capable de me croire? C'est pourtant le cas! Si! Si! Je vous l'assure! Rappelez vous l'adresse de ma page perso... http://perso.wanadoo.fr/patarien il ne me reste qu'à préciser celle-ci en rajoutant à sa suite l'adresse de ma page index : /index.htm Je vous précise ici que chaque sous-dossier doit être mentionné après un slash, soit ce signe / à la suite de l'adresse URL. Si vous passez dans un autre dossier, à l'intérieur du dossier, vous devez remettre un slash avant son nom, puis un autre avant le nom du fichier.

Exemple : http://perso.wanadoo.fr/patarien/demo_site/images/banniere.gif cette adresse amène directement à afficher la bannière créée pour ce site. dès lors, l'adresse de ma page est censée être la suivante : Mais sachant que j'ai créé un dossier pour y mettre tous les fichiers de ce site de démonstration, l'adresse en est donc : http://perso.wanadoo.fr/patarien/demo_site/index.htm Comme vous pouvez le constater en cliquant sur le lien, mon site est maintenant réellement visible par tous!

Vous y lisez aussi Nom de la page, le nom que je lui ai donnée, dans l'onglet de votre navigateur. Je n'ai mis en ligne que deux pages pour cette démonstration mais vous pouvez cliquer sur le lien indiquant Page 2 à gauche. Vous serez renvoyé(e) vers cette seconde page ou un autre lien vous ramènera vers la première. D'ailleurs, il est possible d'y accéder directement à l'adresse suivante : http://perso.wanadoo.fr/patarien/demo_site/page2.html Là aussi, la page a son propre nom dans l'onglet de votre navigateur. La mise en ligne de notre site sur la page perso de notre fournisseur d'accès est à présent arrivée à son terme. Comme vous pouvez le constater, la manipulation s'avère assez simple, à condition de bien enregistrer ses identifiants de connexion FTP. Il est à noter que certains F.A.I. Disposent de leur propre outil FTP qu'ils mettent à votre disposition gratuitement.

12/B la mise en ligne sur un hébergement gratuit. il ne me reste plus que deux actions à effectuer : Configurer mon logiciel de transfert FTP. Transférer tous les fichiers et images de mon dossier de site. Comme précisé au début de ce tutorial, je vais personnellement utiliser Filezilla que je considère comme le meilleur logiciel en la matière. Un tutorial spécifique est à votre disposition afin de vous familiariser avec ce formidable outil. Il vous est cependant offert deux alternatives sur Tutopat : EnvoiFTP et FTP Expert. A vous de choisir l'outil que vous préférez... je vais donc, en ce qui me concerne, configurer Filezilla en utilisant les coordonnées situées en bas de la dernière capture.

En relançant Votre logiciel FTP, si vous avez bien configuré la connexion, vous devriez vous retrouver en face de ceci. Voici donc venu le moment de mettre en ligne l'ensemble du contenu de votre dossier mon site Web. J'ai bien précisé le contenu et non le dossier! Je vais en ce qui me concerne, procéder un peu différemment. En effet, cet hébergement étant censé me servir dans plusieurs domaines, je vais uploader les fichiers du site, mais dans un dossier spécifique afin de m'y retrouver par la suite.

Je procède donc maintenant au transfert de tous les fichiers et dossiers (images notamment) contenus dans le dossier mon site Web vers mon hébergement Ifrance.

Si je vous assurais que, dès à présent votre site est en ligne, seriez vous capable de me croire? C'est pourtant le cas! Si! Si! Je vous l'assure! Rappelez vous l'adresse de mon hébergement Ifrance... http://tutopat.ifrance.com/ il ne me reste qu'à préciser celle-ci en rajoutant à sa suite l'adresse de ma page index : /index.htm Je vous précise ici que chaque sous-dossier doit être mentionné après un slash, soit ce signe / à la suite de l'adresse URL. Si vous passez dans un autre dossier, à l'intérieur du dossier, vous devez remettre un slash avant son nom, puis un autre avant le nom du fichier. Exemple : http://tutopat.ifrance.com/demo-site/images/banniere,gif cette adresse amène directement à afficher la bannière créée pour ce site. dès lors, l'adresse de ma page est censée être la suivante : http://tutopat.ifrance.com/index.htm Mais sachant que j'ai créé un dossier pour y mettre tous les fichiers de ce site de démonstration, l'adresse en est donc : http://tutopat.ifrance.com/demo-site/index.htm

Comme vous pouvez le constater en cliquant sur le lien, mon site est maintenant réellement visible par tous! Vous y lisez aussi Nom de la page, le nom que je lui ai donnée, dans l'onglet de votre navigateur. Je n'ai mis en ligne que deux pages pour cette démonstration mais vous pouvez cliquer sur le lien indiquant Page 2 à gauche. Vous serez renvoyé(e) vers cette seconde page ou un autre lien vous ramènera vers la première. D'ailleurs, il est possible d'y accéder directement à l'adresse suivante : http://tutopat.ifrance.com/demo-site/page2.html

Là aussi, la page a son propre nom dans l'onglet de votre navigateur. La mise en ligne de notre site sur notre hébergement chez Ifrance est à présent arrivée à son terme. Comme vous pouvez le constater, la manipulation s'avère assez simple, à condition de bien enregistrer ses identifiants de connexion FTP. Il est à noter que cet hébergeur dispose d'un certain nombre d'outils pour agrémenter votre site, qu'il vous propose d'utiliser gratuitement. Notre site terminé est maintenant en ligne et donc accessible à tous les internautes qui souhaitent le visiter.

13 Le référencement. Voici l'étape finale de la création de notre site. Finale oui, mais particulièrement importante! En effet, à quoi cela peut il servir de créer un site si personne ne le visite... Il est donc nécessaire de trouver des solutions pour le faire connaître. Je vous propose personnellement quatre solutions pour cela : Passer par les copains. Inscrire votre site dans les principaux moteurs de recherche. Inscrire votre site dans de multiples annuaires. Le partenariat. 13/A Passer par les copains. Voici une méthode que l'on peut qualifier d'archaïque, mais c'est encore celle qui vous amènera vos premiers visiteurs. Attention! Suggérer au copains du Net de venir faire un tour sur votre site ne signifie pas pour autant les tanner 24/24 H... Evitez aussi de flooder leur propre site ou forum, espérant ainsi trouver du monde, cela n'est jamais apprécié! Bien entendu, cette méthode n'a qu'une portée bien limitée, à moins que vous n'ayez 20 000 copains sur la toile...

13/B Inscrire votre site dans les principaux moteurs de recherche. Cette seconde méthode, contrairement à ce que l'on pourrait penser, n'est pas la panacée universelle. En effet, l'inscription de votre site dans de gros moteurs comme Google ou Yahoo par exemple, n'est pas synonyme de popularité et de recensement immédiat. La suggestion de votre site est un chose, sa prise en compte et son réel référencement en sont une autre. Cela peut prendre de quelques jours, quelques semaines, jusqu'à quelques mois! Procédez y néanmoins, ce sera un atout de plus dans votre manche. Voici donc les liens directs d'inscription de votre site dans Google et Yahoo. Pour les autres moteurs de recherche, je vous laisse le soin de les découvrir par vous même. Attention! Ne jamais tenter de proposer à ces moteurs votre site à plusieurs reprises, sous prétexte qu'il n'apparait toujours pas au bout d'un certain temps après votre inscription! Vous risquez tout simplement un quasi bannissement, car considéré là comme une forme de flood. N'attendez rien de miraculeux de cette méthode, je le répète encore... C'est le temps qui jouera pour vous et vous permettra ainsi de recevoir des visites grâce à un référencement dans ces moteurs. Voici néanmoins un aperçu de l'apport de ces moteurs pour Tutopat : près de 25% du total des visites!

13/C Inscrire votre site dans les annuaires. Voici une des deux méthodes les plus efficaces, avec la suivante, pour faire connaître votre site aux internautes. En effet, bon nombre d'entre eux utilisent ces annuaires pour leurs recherches et votre présence dans la liste sera un atout majeur. Pour vous donner une idée de l'importance de cette démarche, voici à nouveau un aperçu des statistiques de Tutopat. Près de 40% des visites sont générées par des liens externes, contre 15% seulement par les moteurs de recherche! Environ 15% de ce chiffre représente l'apport des annuaires, le reste étant le résultat de la quatrième et dernière méthode. Je vous propose donc ici en lien direct, une liste non-exhaustive des principaux annuaires que vous pouvez utiliser pour parvenir à faire connaître votre site. Les meilleurs à mes yeux sont le Meilleur du Web et le Weborama, mais vous pouvez aussi aller vers l'annuaire la logithèque ou vous diriger vers le site Référencement-Team.com qui vous propose une référencement automatique dans plus de 200 annuaires. Je vous suggère d'utiliser justement les moteurs de recherche pour en trouver encore plus. Il est à signaler que certains annuaires vous demanderont la mise en place d'un lien ou d'une image vers leur site en échange de votre inscription. Ne faites tout de même pas l'erreur que j'ai commise au départ en installant toutes ces images sur la page d'accueil, cela l'a alourdie de façon considérable, nuisant donc au site! Créez une page spécifique que vous nommerez Partenaires.

13/D Le partenariat. Rappelez vous les statistiques du paragraphe précédent... 85% de ces visites par des liens sur site proviennent du partenariat engagé par Tutopat avec d'autres! Cela vous donne une idée de l'importance d'une telle démarche... Comment trouver un partenaire? Par pur hasard. En cherchant des sites susceptibles d'être complémentaires du votre. En tentant votre chance auprès de sites divers. Il n'existe aucune méthode stricte mais plutôt au feeling... Comment procéder? Préparez tout d'abord deux images que vous pourrez proposer au partenaire potentiel, dans les dimensions les plus utilisées : 88 X 31 pixels 480X 60 pixels Pensez à les réaliser le plus légères possible, de façon à ne pas contribuer à alourdir le site partenaire et hébergez les en ligne. Contactez le site par le biais d'un E-mail adressé à son Webmaster que vous trouverez généralement derrière un lien nommé Contact sur son site. Faites un bref exposé de l'activité de votre site, puis proposez lui un partenariat avec échange de bannière ou de simple lien texte s'il préfère. Ne lui proposez pas tout de suite votre bannière ou lien, cela pourrait être reçu comme une forme d'agression.

Attendez sa réponse, sans le relancer. Après accord de sa part, échangez alors votre bannière ou lien texte, si possible en lui donnant le code HTML. Comment faire le code HTML à insérer? Le code à créer est tout simple, que ce soit pour une image ou pour un lien texte. Pour une image : <a href="l'adresse URL de votre site"><img border="0" src="l'adresse URL de l'image" width="la largeur de l'image en pixels" height="la hauteur de l'image en pixels"></a> Pour un texte : <a href="l'adresse URL de votre site"><le texte qui sera cliquable</a> Si vous savez choisir vos partenaires avec discernement, ils sauront vous apporter un quantité non négligeable de visiteurs. Il va de soi que cela doit pouvoir être aussi le cas pour votre partenaire... si vous vous rendez encore une fois sur la page d'accueil de Tutopat, vous vous rendrez compte que nos partenaires ne sont pas tous forcément dans le même domaine d'activité. Ce sera donc à vous d'effectuer ces choix en fonction du type de site que vous avez créé.

14 Conclusion. Voici ce tutorial arrivé à son terme. Comme précisé dès le départ, je n'ai absolument pas lé prétention d'être un bon programmeur et ai donc volontairement limité mes explications à la création d'un site simple. Je n'ai notamment pas abordé le sujet du nom de domaine, sachant que son acquisition est subordonnée la plupart du temps à un paiement. Ce n'est d'ailleurs pas le seul point ignoré ici. Mais le but de la manoeuvre n'était il pas de créer un site simple? Si vous avez apprécié ce tuto et qu'il vous aura permis de créer votre site, nous apprécierions que vous nous fassiez un petit lien... Ne voyez la qu'une demande facultative! Donc, si vous le souhaitez, vous pouvez insérer le lien suivant sur votre site, facilement puisque je vous ai appris comment procéder... <a href="http://www.tutopat.com"><img border="0" src="http://www.tutopat.com/accueil/ban-tutopat.gif" width="88" height="31"></a> Une section spécifique au Webmastering est créée sur Tutopat afin de regrouper les tutoriaux concernant le sujet. Elle sera étoffée au fur et à mesure du temps, mais vous pouvez déjà y trouver une section spécifiquement destinée au support de ce tutorial. Tutorial réalisé par Patarien www.tutopat.com Janvier 2006