Tutorial

Crer 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 prtention d'tre un bon programmeur, mais il existe tellement d'outils notre disposition sur le Net que j'ai quand mme russi crer le site utopat seul ... !l ne s'adresse donc pas un internaute dbutant, mais bien une personne a"ant dj acquis quelques notions de base indispensables. #ien que le language $ %& soit presque dpass aujourd''ui, cela reste encore l'option la plus simple pour une premi(re cration, )ien ne vous empc'era de passer par la suite au *$ %& ou mme au +las' ... %ais il s'agit bien ici de vous apprendre crer un site simple.

Voici donc la liste des logiciels que nous allons successivement emplo"er et dont vous aurez besoin ,

-n dcompresseur , IZArc34 pour lequel un tuto est votre disposition ici.

-n diteur $ %& , Nvu 1. .e logiciel gratuit et en /ran0ais est une excellente alternative au /ameux +ront1age que tout crateur de site a un jour essa", mais qui est lui, pa"ant.

-n logiciel de trans/ert + 1 , !ile"illa pour lequel un tuto est disponible l.

&es oprations vont tre multiples et se diviser en plusieurs tapes conscutives, accessibles par lien direct partir du sommaire ci2dessous .
1. (. 3. 4. *. Le tlc#arge$ent %&un 'it %e page )a %co$pression L&installation %u logiciel %&%ition HTML Les %roits %&auteur %u concepteur La personnalisation et la $ise en +or$e visuelle %e la page in%e, %u site 32 4uvrir notre page index. #2 !nsrer sa banni(re personnelle. .2 !nsrer son logo. 52 1ersonnaliser les couleurs des objets. 62 .'anger la couleur du /ond de page. +2 !nsrer une image supplmentaire dans la page. -. La personnalisation et la $ise en +or$e te,tuelle %e la page in%e, %u site 32 !nsrer du texte dans la page. #2 !nsrer un lien '"pertexte dans la page. .2 !nsrer un lien '"pertexte sur une image de la page. 52 5terminer les couleurs des liens '"pertexte. .. La cration %es pages suppl$entaires 32 &a cration. #2 &'enregistrement des pages supplmentaires. .2 &a navigation interne entre les pages du site. /. Les $ta0tags 1. Les scripts 32 1rsentation. #2 !ntgration d'un script. 1 . Conclusion %e la pre$i2re partie 11. La rec#erc#e et la cration %&un espace %&#berge$ent en ligne 32 &a rec'erc'e d'un 'bergement en ligne. #2 &''bergement sur sa page perso. .2 &''bergement c'ez un 'bergeur gratuit , !/rance. 1(. La $ise en ligne 32 &a mise en ligne sur sa page perso. #2 &a mise en ligne sur un 'bergement gratuit. 13. Le r+rence$ent 32 1asser par les copains. #2 !nscrire le site dans les principaux moteurs de rec'erc'e. .2 !nscrire votre site dans des annuaires. 52 &e partenariat. 14. Conclusion gnrale.

ces di//rentes manipulations vont tre dcrites dans l'ordre, ci2apr(s.

1 3 Le tlc#arge$ent %&un 'it %e page.

5eux solutions s'o//rent vous quand vous dsirez crer un site 7eb , 8. .rer totalement la page vous2mme, mais cela n'est pas la porte de tout le monde. 6n e//et, vous devez possder un certain nombre de connaissances en mati(re de /euille .99, notamment. :. -tiliser un ;it tout prt que vous aurez trouv sur le Net.

Je c'oisis donc cette seconde solution car plus simple. 6n /ait, il est possible de trouver en ligne trois t"pes de ;its de page , 8. &es ;its totalement gratuits. <nralement de qualit juge in/rieure, ils n'en demeurent pas moins tout /ait corrects. :. &es ;its =3llopass>. 1our le montant d'un appel tlp'onique, vous pouvez tlc'arger ces ;its, un peu plus volus. ?. &es ;its pro/essionnels. &, on retrouve des tari/ assez e//arants pour le commun des mortels que je suis. 5e quelques dizaines d'euros, cela peut aller tr(s, tr(s 'aut ... 5ans le cas de ce tuto, j'ai c'oisi l'option du ;it totalement gratuit. &e ;it en question date de :@@? et nous est /ourni par un des partenaires de utopat, le site 7eb5iz. !l est une ralisation de son 7ebmaster Aing&ouis qui m'a donn l'autorisation de l'utiliser dans ce tuto. .ommen0ons donc par aller le tlc'arger !.!

Voici donc notre ;it tlc'arg.

( 3 La %co$pression %u 'it.

3vant tout c'ose, il est ncessaire de crer un dossier spci/ique sur notre disque dur, a/in d'" stoc;er tout ce qui concernera notre site. Non seulement nous " retrouverons tous les lments du ;it de dpart, mais nous " ins(rerons tout ce que nous ajouterons , images supplmentaires, boutons, banni(re, etc ... Nommez le comme vous l'entendez, voici le mien ,

5compressons prsent notre ;it dans ce dossier. 9i vous ne savez pas dcompresser un /ic'ier, un tuto spci/ique est votre disposition !.!

6tudions prsent le contenu du dossier en l'ouvrant.

rois c'oses di//rentes apparaissent , 8. -n document texte qui contiendra gnralement un petit message de l'auteur du ;it, vous demandant ou vous prcisant certaines c'oses.

:. -n document =$ %&> qui est en /ait le code notre page. 6n e//ectuant un double2clic sur ce /ic'ier, la page suivante va s'ouvrir dans votre navigateur ,

Vous vo"ez l le ;it de page tel qu'il se prsente dans votre navigateur. %me s'il ne vous semble pas /ormidable, sac'ez que nous allons l'amliorer.

?. 6n/in, un dossier images qui contient toute les images /aisant partie du ;it de page. )egardons d'un peu plus pr(s son contenu.

Nous trouvons ici la totalit des portions des images de notre ;it. Nous pourrons utiliser n'importe quel logiciel de grap'isme pour les modi/ier notre guise ...

Notre ;it est prsent prt ce que nous nous en occupions. !l nous /aut donc penser installer l'outil indispensable , &'diteur $ %&.

3 3 L&installation %u logiciel %&%ition HTML.

J'ai opt dans ce tuto pour le logiciel gratuit et en /ran0ais appel Nvu 1. . 1our le tlc'arger, il vous su//it de cliquer !.! 1rocdez ensuite son installation compl(te, elle est tout /ait classique. 6t retrouvez vous avec votre raccourci vers le programme sur le bureau Bou dans la barre de lancement rapideC.

&ancez le, il apparaitra ainsi ,

Nvu va devenir compter de cet instant, notre outil principal pour la cration de notre site. .'est grDce lui que nous allons insrer ou modi/ier des textes, des images, des liens '"pertexte, crer toutes les pages de notre site ..... Nous " crerons et g(rerons aussi nos mta2tags Bindispensables un bon r/rencementC, entrerons des scripts, etc ..... Je n'entrerai pas dans toutes les /onctions disponibles, mais vous montrerai les principales.

4. Les %roits %&auteur %u concepteur.

.e passage est imprati/ E 9ac'ez que tout ralisateur grap'ique vous demandera de laisser le lien insr dans son ;it, vers son propre site. &e /ait de supprimer ce lien peut entrainer pour vous des poursuites judiciaires pour plagiat. )espectez donc son travail, c'est la moindre des c'oses ...

5e la mme /a0on, vous avez la possibilit d'ajouter votre propre cop"rig't, concernant le contenu de votre site.

*3 La personnalisation et la $ise en +or$e visuelle %e la page in%e, %u site.

%aintenant que nous sommes prts, voici venir l'tape la plus importante dans la cration de notre site. Fuelques conseils de base. 6n e//et, le succ(s rencontr sera /onction, non seulement du contenu, mais aussi de la prsentation de notre page d'accueil. Premier point : sac'ez que la prsence de /autes d'ort'ograp'e par exemple, sera le plus sGr mo"en de /aire /uir les ventuels visiteurs. 1ensez donc utiliser les correcteurs votre disposition, que ce soit dans 7ord ou sur le Net. -tilisez aussi un langage correct en vitant notamment le sms. Second point crucial : le poids de votre page. 6vitez les pages de plus de ?@ Ao, vous conseillent la plupart des sites pour 7ebmasters H ce en quoi ils n'ont pas tort E &'internaute qui arrive sur votre site n'aura pas la patience d'attendre :@ secondes, voire une minute si sa connexion n'est pas tr(s rapide, l'ouverture de la page H il sera dj reparti ailleurs ... Le troisime point : les mta2tags. .ela /era l'objet du c'apitre suivant car plus dlicat et pointu traiter. Le dernier point : le r/rencement. !l /era l'objet de la derni(re partie du tuto, ne se justi/iant que lorsque votre site sera rellement mis en ligne. Sachez prendre le temps lors de cette tape ! %ettre en ligne un site non /ini n'est pas sou'aitable. .ela ne vous empc'era pas de l'to//er ou le modi/ier par la suite ..... 3 titre indicati/, cela m'a pris un bon mois pour utopat ..... 3/in de procder la personnalisation, il est ncessaire d'accder notre page du ;it.

*4A0 5uvrir notre page in%e,. &a commande est simple. -n clic sur

puis, allez c'erc'er le /ic'ier $ %& H !l se nomme toujours =index>.

&e /ic'ier s'ouvre maintenant dans Nvu.

Nvu nous o//re la possibilit de voir notre page de quatre /a0ons di//rentes qui sont c'acune matrialise par une touc'e. &'image que nous visualisons ci2dessus est celle correspondant la touc'e 6lle est situe en bas gauc'e de la /entre de Nvu, ainsi que les suivantes. .'est l que nous pourrons modi/ier les textes, liens, images, etc ...

&a touc'e 6lle va ouvrir le /ic'ier en vous indiquant la position de toutes les balises $ %&, le langage utilis dans la programmation de la page.

Nous n'utiliserons pas cette /onction dans le tuto car elle s'av(re peu maniable pour un dbutant en cration de site,

&a touc'e 6lle va nous permettre de visualiser directement le code $ %& de la page.

Nous " interviendrons ultrieurement lors de l'implantation de scripts ou pour entrer nos mta2tags ...

1our /inir, la touc'e

.elle2ci va nous permettre apr(s c'aque modi/ication, mais aussi tout instant, de visualiser le rsultat tel qu'il apparaitra dans un navigateur.

Nous utiliserons donc dans notre cas alternativement les onglets =Normal> et =3per0u> pendant toute la con/iguration de notre site.

Noubliez pas surtout .....

.ette manoeuvre est /aire imprativement apr(s c'aque modi/ication, moins que nous ne sou'aitiez repartir de zro cause d'une erreur ...

*460 Insrer sa banni2re personnelle. !l est bien vident que vous sou'aiterez insrer une banni(re personnelle en lieu et place de celle du ;it. &a mt'ode la plus simple va consister remplacer tout simplement celle2 ci dans le dossier images du ;it. 4uvrons donc ce dossier a/in d'" voir la dimension qu'elle a, a/in que la nItre soit au mme /ormat. 6n e//et, une banni(re plus grande ou plus petite risquerait de d/ormer le ;it ... 4uvrez donc le dossier Mon site Web / images.

!l s'agit l d'un /ormat standard assez rpandu pour lequel vous n'aurez aucun mal trouver un ventuel gnrateur sur le Net grDce <oogle . utopat vous propose aussi un service de cration grap'ique gratuite .e qui vous permettra une personnalisation encore plus pousse.

Vous trouverez aussi un bon nombre de tutos grap'isme pour vous aider dans une conception totalement personnelle ici. !l est indispensable de souligner ici l'importance d'une banni(re aussi lg(re que possible E oujours dans le but de permettre un a//ic'age rapide de nos pages ...

Voici donc celle que j'ai ralise pour mon site ,

6lle est au bon /ormat et porte le mme nom , banniere. -n seul petit dtail va poser un semblant de probl(me, elle est au /ormat .gi alors que celle existante est en .png... Fu' cela ne tienne, nous allons /aire le ncessaire E 1lacez la banni(re cre dans le dossier images de votre site.

)evenons prsent dans notre diteur $ %&, Nvu.

5ans la /entre, Vous vo"ez votre curseur clignoter au niveau du code correspondant la banni(re. Je vous ai surlign l'ensemble du code de celle2ci.

6t l, comme par miracle .....

Noubliez pas de procder un enregistrement de la modi/ication E

*4C0 Insrer son logo personnel. 1assons prsent au logo. oujours dans l'esprit de ne pas dnaturer notre ;it, vri/ions la taille utiliser pour crer notre version personnalise. 5ans l'onglet !ormal, /aites un clic gauc'e sur le logo situ en 'aut gauc'e de la page.

Vous retrouvez alors votre curseur qui clignote au beau milieu de la ligne de code concernant cette image.

!l vous est expliqu dans la capture ci2dessous comment reconnaJtre les proprits d'une image insre dans le ;it.

)sumons donc les proprits de l'image que nous devons crer , elle doit /aire 8KL * 8@@ pixels. tre de pr/rence en .png, mais pas obligatoirement. tre mise dans le dossier images des /ic'iers de notre site. !l ne reste qu' crer ce logo ..... Voici donc celui que j'ai cr pour ce site de dmonstration.

3"ant /ait le c'oix du /ormat .gi pour celui2ci, je l'ins(re donc dans le dossier images de mon site sous le nom entetegauche"gi .

!l ne me reste plus qu' modi/ier la ligne de code pour c'anger de logo. 1our cela, je c'ange juste la terminaison du nom de l'image dans l'onglet Sources, tout simplement.

6t l, nous constatatons que .....

*470 8ersonnaliser les couleurs %es ob9ets. 6n c'oisissant votre ;it, vous vous tes probablement demandBeC si il existait une possibilit de c'anger les couleur des objets qui le consituent M

)ien de plus simple E 4uvrez votre logiciel de retouc'e /avori, puis modi/iez le votre guise.

6st devenu pour moi ceci ,

5e ce /ait, mon site c'ange de loo; ..... 3/in de visualiser ce c'angement, procdez un enregistrement de votre /ic'ier, puis /ermer le et rouvrez.

&es images de mon site sont prsent modi/ies.

*4:0 C#anger la couleur %u +on% %e page.

5ans la continuit de la personnalisation de notre site, vo"ons prsent comment c'anger la couleur de /ond de la page a/in de l'adapter notre goGt personnel. .liuqez sur la touc'e donnant acc(s au code , 5ans la /entre, rendez vous au dbut du code a/in d'" trouver la balise #bod$%. Vous la rep(rerez /acilement, juste apr(s #/head%.

&e terme bac&ground'color signi/ie couleur d'arri(re2plan. 6lle est ici mentionne au /ormat ()*. -n logiciel comme ColorCop pour lequel un tuto est votre dispositon ici vous permettra d'obtenir les codes de la couleur que vous dsirez.

%on c'oix s'est port dans le cas prsent sur une couleur saumon dont le code )<# est , :KK, 8K8, 8@?.

Je modi/ie donc mon code en consquence.

6n cliquant sur la touc'e

Vous visualisez alors le c'angement d'apparence de votre page.

Nous nous rendons alors compte que la couleur de /ond ne couvre pas l'emplacment de certaines images qui ont gard celle d'origine.

!l convient donc de reprendre les images suivantes a/in de mettre la partie bleu2ciel dans la nouvelle couleur ,

9ervez vous de votre logiciel de retouc'e d'images a/in de procder l'opration, en rempla0ant les autres au /ur et mesure. -ne /ois cette opration termine, pro/itons en pour enregistrer nouveau notre /ic'ier pour prendre en compte nos modi/ications. 4uvrons le nouveau et l .....

.omme vous le constatez, notre page commence vraiment prendre tournure sur le plan de son grap'isme. !l est galement possible de remplacer la couleur de /ond par une image que vous aurez c'oisie. 5ans ce cas, il vous /audra tout d'abord mettre en transparence la partie bleu2ciel des images ci2dessus, de /a0on avoir toujours la mme 'omognit, 6nsuite, vous devrez modi/ier le code bac&ground. &'ajout d'une image en /ond la place d'une couleur tant susceptible d'alourdir considrablement la page, je vous dconseille /ortement cette option et vous laisse donc dcouvrir ventuellement la /a0on de procder.

*4!0 Insrer une i$age suppl$entaire %ans la page. &es images /aisant partie de notre ;it sont une c'ose, mais nous pouvons dsirer en rajouter une ou plusieurs supplmentaires dans notre page. Voici encore une manipulation simple si'lon respecte une r(gle premi(re , mettre toujours les images dans le mme dossier que les autres, 3insi, notre site /onctionnera immdiatement 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 aisment mmorisableE 1renons comme exemple l'image suivante insrer ,

Je commence donc par la mettre dans le dossier images dans celui que j'ai cr sous le nom de %on site Web.

Je clique gauc'e prsent directement l'emplacement oN je sou'aite insrer l'image en question.

.liquez ensuite sur 1uis

Volontairement, dans le cadre d'une cration de premier site simple, je n'aborde pas les proprits supplmentaires de l'image qu'il est possible d'apporter. Vous tes cependant libre de les dcouvrir par vous2mme,

Voici note image insre.

Nous sommes arrivBeCs au terme de la con/iguration et de la mise en /orme grap'ique de notre page. !l est encore une /ois pri$or%ial de bien c'oisir votre ;it en /onction du contenu images que vous sou'aitez intgrer. &e texte est toujours modulable, l'image bien moins /acilement intgrable un ;it inadapt ...

- 3 Le personnalisation et la $ise en +or$e te,tuelle %e la page in%e, %u site.

-4A0 Insrr %u te,te %ans la page !nsrer du texte pur est la manoeuvre la plus simple e//ectuer. )evenez sur l'onglet

1uis e//acez la partie de texte dans le ;it que vous dsirez remplacer.

<rDce au pav texte

!nsrez simplement le votre.

N''sitez pas utiliser des polices sortant un peu de l'ordinaire, mais pensez toujours vos lecteurs quand la taille et la compr'ension. !l est usuellement conseill de ne pas utiliser beaucoup plus de trois couleurs de texte di//rentes.

.e qui donne dans mon cas, le rsultat suivant ,

!l s'av(re ici que la d/ormation est due au /ait que ce ;it n'accepte pas que l'on " entre des images, 'ormis dans l'en2tte. .e /ait est ponctuel et du uniquement au ;it c'oisi, Vous n'aurez aucun souci insrer vos images dans des ralisations mieux adaptes cet e//et.

-460 Insrr un lien #;perte,te %ans la page. !l nous /aut maintenant penser /inaliser notre page avec les liens de navigation vers nos autres pages, nos partenaires, des sites externes, etc ... 1our cela, nous allons rendre un texte ou un mot cliquable H on appelle cela un lien h$pertexte. 5ans l'exemple qui suit, nous allons ajouter un lien '"pertexte sur le mot Tutopat situe dans le cadre de navigation de gauc'e, cela va se /aire dans l'onglet 1rocdez comme suit.

1uis agissez comme indiqu sur la capture suivante.

Voici les c'oix dont vous disposez quand la /a0on dont va agir le navigateur de vos visiteurs lors d'un clic sur le lien que nous venons de crer ici.

Nous en avons /ini avec le lien '"pertexte. !l va de soi que cette manoeuvre sera recommencer pour c'aque lien externe votre site. &e cas particulier d'un lien vers une autre page de votre propre site sera voque ultrieurement, lorsque nous en aurons cr au moins une seconde.

Voici donc le lien install.

1etit rappel , n'oubliez pas d'enregistrer vos modi/ications au /ur et mesure, sous peine de devoir recommencer E 1ensez bien en prendre s"stmatiquement l''abitude a/in de vous viter des dconvenues qui peuvent mettrent vos ner/s rude preuve ..... .eci tait le conseil du jour, qui sert aussi de pause dtente ceux d'entre vous qui ont dcid d'avaler d'un trait ce tutorial en /orme de pa+. -n petit ca/, un petit pipi, une cigarette BventuellementC et l'on continue M 9i vous vous sentez d'attaque, bien sGr E

-4C0 Insrr un lien #;perte,te sur une i$age %e la page.

!l peut vous tre ncessaire de mettre un lien '"pertexte, non plus sur un mot, mais sur une image de la page. .ela sera notamment le cas pour des banni(res de partenaires, entre autres.

&a mt'ode est semblable la prcdente.

1uis ...

3 dessein, je vous ai emmen au message d'erreur qui suit.

&a validation entraine la rouverture de la /entre prcdente, mais dans un autre onglet , celui de l'emplacement. Nous resterons dans une con/iguration simple et ne mettrons donc pas de texte alternati/.

Notre lien '"pertexte sur l'image est prsent en place .

3 vous de peau/iner 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 /ois E -ne s"ntaxe douteuse, un language t"pe SMS et surtout des /autes d'ort'ograp'e, seront autant de risques de voir les visiteurs potentiels /uir grands pas ... 1renez donc le temps d'une rdaction soigne, en vous aidant au besoin d'un correcteur ort'ograp'ique comme celui de Word par exemple.

-470 7ter$iner les couleurs %es liens #;perte,te.

Voici un point de dtail qui peut avoir une grande importance. !l est par/ois di//icile de reprer les liens '"pertexte dans certaines pages 7eb que nous visitons ... Nous allons donc /aire en sorte que les notre soient bien visibles en con/igurant leur couleur suivant qu'ils sont simplement a//ic's, que le curseur du visiteur passe dessus ou qu'il l'ait dj visit. 1our cela, cliquez sur la touc'e 1uis sur ... Voici comment procder.

+aites vos propres essais. 5ans la /entre de droite apparaissent les couleurs c'oisies. Vous pouvez ainsi visualiser leur lisibilit sur le /ond. Voici mon c'oix personnel pour cette dmonstration.

Voici le rsultat de cette opration.

%es liens '"pertexte sont devenus reprables.

Nous en avons prsent /ini de notre page d'accueil. Je vous le rp(te encore une /ois ,,,,,

Soignez cette page" c,est la plus importante du site !

Nous allons continuer notre parcours , non pas du combattant, mais du 7ebmaster .................. -ne petite sauvegarde, juste pour la route M

.0La cration %e pages suppl$entaires

.4A0 La cration. -n site 7eb, ce n'est pas qu'une seule page, c'est un ensemble E 9i l'accueil est plutIt destin prsenter succintement le contenu du site en essa"ant d'attirer le client, il va /alloir crer des pages supplmentaires, raison d'une Bvoire de plusieursC par sujet, objet, moti/, etc ... Je vous invite respecter pour cela deux r(gles d'or de la simplicit et de la /onctionnalit d'un site,

oujours garder le mme 'abillage de page, tant que /aire se peut. .ela permettra, en gardant les images dans le cac'e du navigateur, d'ouvrir les pages suivantes bien plus rapidement. <arder ainsi une uni/ormit du site qui vous rendra plus crdible aupr(s des internautes qui vous rendront visite. 4uvrez donc votre page index.

9uivant le principe appliqu pour notre page index, insrez votre contenu dans la page, comme vous l'entendez.

9pcialement pour ce tutorial, j'ai rdig rapidement une seconde page titre d'exemple.

&e moment est maintenant venu d'enregistrer cette page supplmentaire que nous venons de crer.

.460 L&enregistre$ent %es pages suppl$entaires. & encore, deux r(gles sont respecter ,

oujours enregister les nouvelles pages dans le mme dossier que la page index. 5onner un nom simple mais pertinent c'aque nouvelle page E .ela permettra de s'" retrouver /acilement lors de modi/ications ultrieures apporter l'une plutIt qu' l'autre. Je proc(de donc l'enregistrement de ma seconde page. Je clique sur 1uis ...

%a seconde page est enregistre, .ette opration est rpter autant de /ois que le site contiendra de pages, tout en sac'ant que vous pourrez toujours en rajouter par la suite en cas de besoin.

.4C0 La navigation interne entre les pages %u site. 3 partir de l'instant oN un site comporte plusieurs pages, il va de soi qu'il est ncessaire de mettre en place un s"st(me de liens '"pertexte entre elles, permettant ainsi de naviguer librement de l'une l'autre ... Nous allons pour cela utiliser un cadre sur la gauc'e de la page.

.omme il s'agit encore l d'un lien '"pertexte, surlignons le texte que nous dsirons utiliser en guise de lien vers notre seconde page.

1uis cliquons sur la touc'e de lien.

&a /entre dj vue de dtermination de l'adresse -)& du lien '"pertexte s'ouvre.

&e /ait de cliquer la touc'e dclenc'e l'ouverture d'une nouvelle /entre, normalement dj positionne l'intrieur du dossier du site.

&e /ait de valider a mis en place le lien '"pertexte de navigation l'intrieur mme du site.

)itrez cette manipulation pour c'acune des pages vers lesquelles vous sou'aitez mettre en place un lien sur votre page index.

Vous n'aurez plus ensuite qu' /aire la mme c'ose sur c'acune des pages que vous crerez, de /a0on permettre la navigation compl(te indi//remment partir de n'importe laquelle.

Nous en avons prsent /ini avec la construction mme de notre site. &es images sont en place &es textes galement &es liens de navigations interne et externes aussi

les proc'aines tapes vont maintenant avoir pour but la prparation la mise en ligne de tout cela, en c'erc'ant bien videmment le but de tout site, attirer le client, si j'ose m'exprimer ainsi .....

/ 3 Les $ta0tags.
Voici encore un point crucial dans la construction de notre site E Fue sont tout d'abord ces /ameux mta'tags M 6n /ait, le but premier que nous allons rec'erc'er ici sera de c'erc'er le meilleur mo"en de /aire connaJtre notre site. -ne partie de ces mta2tags est une suite de mots2cls que nous allons ajouter dans le code de notre page a/in de permettre aux moteurs de rec'erc'e de nous r/rencer lorsqu'un internaute tapera un mot ou une expression dans celui2ci. !l va vous /alloir dterminer des mots2cls qui ciblent rellement le contenu de votre ou de vos pages. -n site comme utopat ne va par exemple pas se contenter du mot tutorial ou tuto pour permettre un bon r/rencement. !l va plutIt c'oisir d'" ajouter crer son site, tutoriaux Photo iltre, tutorial eMule -../a ou tutorial cration site 01ML. .e qui lui permettra un ciblage plus prcis et donc de meilleures c'ances de se retrouver dans les premiers rsultats d'un moteur de rec'erc'e. &a seconde partie des mta2tags est elle destine permettre d'identi/ier certains crit(res de votre site comme le language utilis, le s"st(me de codage du site, les coordonnes du 7ebmaster, etc ... utopat a ralis dans ce domaine deux tutoriaux concernant le sujet. !l s'agit de deux logiciels qui vont vous permettre de crer ces mtas tr(s /acilement, surtout dans le cadre d'un premier site. <enerMTag et son tuto vous crera vos mtas simples alors que si vous optez pour le tuto N1busMeta:%itor, il vous poussera un peu plus dans le domaine. &ibre vous d'utiliser l'un ou l'autre pour crer les votres.

3 titre d'exemple, voici les mta2tags que j'ai mis personnellement en place pour /avoriser un bon r/rencement de utopat. .es balises datent un peu et je dois les remettre jour proc'ainement, mais elles vous donnent un aper0u raliste.

<title>Accueil Tutopat</title> <meta NAME="description" CONTENT="Plus de 470 tutoriau ! "otre ser"ice dans tous les domaines # lo$iciels% P&P% 'rap(isme% )id*o% +ureauti,ue% etc ---"> <meta NAME=".e/0ords" CONTENT="tuto% tutorial% tutos% tutoriau % tutoriels% eMule% a1ureus% "id*o% $rap(isme% s*curit*% 2P% lo$iciels% a"atars% tutorial 3(area1a% tutorial +ittornado% cr*ation 4anni5res% cr*ation 4outons% cr*ation si$natures% tutorial eMule 0-464% tutoriau P(oto7iltre% 7onds d8*cran"> <meta (ttp9e,ui"="content9lan$ua$e" content="7r"> <meta NAME="aut(or" CONTENT="Patarien"> <meta NAME="ratin$" CONTENT="$eneral"> <meta NAME="classi7ication" CONTENT="Tout pu4lic"> <meta NAME="cop/ri$(t" CONTENT="patarien:(otmail-com"> <meta NAME="e pires" CONTENT="ne"er"> <meta NAME="ratin$" CONTENT="$eneral"> <meta NAME="re"isit9a7ter" CONTENT="6 da/s"> <meta NAME=";o4ots" CONTENT="all"> <meta NAME=";epl/ to" CONTENT="patarien:(otmail-com"> <meta NAME="pu4lis(er" CONTENT="Patarien"> <META <TTP9E=>?)="Content9T/pe" CONTENT="te t/(tml@ c(arset=iso9AA6B9C">

9oignez particuli(rement cette tape, cela vous vitera la dconvenue d'un site totalement ignor des internautes .....

6t voici celles gnres avec N1busMeta:%itor, spcialement pour ce site de dmonstration , Notez que j'ai remplac certaines coordonnes personnelles par des =

<meta (ttp9e,ui"="content9t/pe" content="te t/(tml@c(arset=iso9AA6B9C"> <Title>le titre de ma pa$e</Title> <meta name=".e/0ords" content="&66 caract5res ma imum de mots cl*s% s*par*s par une "ir$ule<meta name="description" content="Description du contenu du site/moins de &00 caract5res"> <meta name="a4stract" content="Description du contenu du site/moins de &00 caract5res"> <meta name="Aut(or" content="Patarien"> <meta name="$enerator" content="N"u ou Erontpa$e% etc ---"> <meta name="pu4lis(er" content="Patarien"> <meta name="repl/9to" content="tutopat:/a(oo-7r"> <meta name="contactcit/" content="FFFFFFFFFF"> <meta name="contact1ipcode" content="4BFFF"> <meta name="contactstate" content="Erance"> <meta name="identi7ier9url" content="Adresse >;G"> <meta (ttp9e,ui"="content9lan$ua$e" content="7r"> <meta name="cop/ri$(t" content="Cop/ri$(tH 000-tutopat-com"> <meta name="re"isit9a7ter" content="C6"> <meta name="cate$or/" content="Computin$/3o7t0are"> <meta (ttp9e,ui"="re7res(" content="I0@>;G=(ttp#//000-tutopat-com"> <meta name="distri4ution" content="$lo4al"> <meta name="ratin$" content="$eneral"> <meta name="ro4ot" content="?nde %Eollo0"> <meta name="date9creation9////mmdd" content="&00J0C&C"> <meta name="date9re"ision9////mmdd" content="&00J0C&C"> <K99 META3 *dit*es par NC4usMetaEditor "I-0 E;EELA;E //99> <K99 LE+ # (ttp#//nC4usmeta-nC4us9e p-com //99> <K99 EEED+ACM # t(-$odin:nC4us9e p-com //99> <K99 Cop/ri$(t H &00C9&00I NC4us9E p*riences //99>

!l ne me reste qu' les intgrer dans la page, la place de celles existantes.

3pr(s enregistrement de la modi/ication, ouvrez nouveau votre page index et vous vous rendrez compte qu'elle a c'ang de nom et pris celui que vous lui avez donn par l'intermdiaire des mta2tags.

)ptez cette opration pour c'acune de vos pages en a"ant soin de les nommer de /a0on di//rente, mme si vous gardez les mmes mta2tags. &a balises modi/ier pour c'anger le titre qui apparaitra dans l'onglet du navigateur est la suivante ,
>Title?le titre %e $a page>4Title?

1 3 Les scripts.
14A0 8rsentation. Nous abordons prsent le dernier point de la conception d'un site avec l'ajout de scripts. 9ac'ez tout de suite que vous n'avez aucune obligation d'en intgrer vos pages car il ne s'agit la en /ait que de l'agrmenter par quelques e//ets visuels, voire sonores. &eurs /onctions et leur utilit peut varier grandement et le c'oix de ceux que vous apporterez ventuellement votre site vous incombe. 1ensez malgr tout au poids de vos pages H plus vous aurez de c'oses, plus votre page sera lourde et donc longue ouvrir par de petites connexions ... !l existe de tr(s nombreux scripts proposs par un tr(s grand nombre de sites de 7ebmastering. Je vous invite rec'erc'er parmi les partenaires de utopat qui s'av(rent tr(s srieux. Vous trouverez leurs adresses en page d'accueil.

3 titre d'exemple de mise en place d'un script, je vais vous donner ici deux exemples simples ,

-n e//et de /ondu2enc'ain sur la navigation entre les pages. -n second e//et .....

1460 Intgration %&un script. Voici titre de premier exemple, un script qui donne un e//et de /ondu2enc'ain entre les di//rentes pages du site.
>M:TA HTT80:@AIBCD8age0:nterD C5NT:NTCDEevealTransF7urationC(GTransitionC1(HD?

9ur le site oN je l'ai trouv, il est prcis qu'il doit tre insr entre les balises #head% du code. Je me rend donc dans le code par la touc'e Je c'erc'e les balises, puis " int(gre mon script par un copierOcoller.

!l ne reste qu' enregistrer les modi/ications apr(s avoir rpt l'opration sur toutes les pages du site.

&e second exemple va aborder un script un tout petit peu plus compliqu puisque contenant plusieurs parties de code insrr en des endroits di//rents. !l provient du site gratos.be et sert proposer aux internautes qui visitent votre site de mettre celui2ci en page de dmarrage de leur navigateur. &e voici tel qu'il se prsente sur le site ,

il nous /aut donc ici insrer deux parties di//rentes en deux endroits di//rents.

!ntressons nous tout d'abord la partie mettre entre les balises #head%et #/head%.

</script> <script GAN'>A'E="Na"a3cript"> // 7ourni par $atos-4e 0e4 site # (ttp#//000-$ratos-4e 7unction A77ic(e<omePa$eOP Qi7 Odocument-all RR document-$etElement+/?dP Qdocument-0riteO8<A <;EE="S" onClic.="<omePa$eOt(isP@returnO7alseP@">';ATO3 A> DEMA;;A'E</A><+;>8P@ T T 7unction <omePa$eOo4UP Qo4U-st/le-4e(a"ior=8urlOSde7aultS(omepa$eP8@ o4U-set<omePa$eO8(ttp#//000-$ratos-4e/8P@ T </script>

3vant d'insrer ce code dans votre page, il /aut au pralable remplacer la partie mentionne en rouge par votre propre texte. 3insi, par exemple.

</script> <script GAN'>A'E="Na"a3cript"> // 7ourni par $atos-4e 0e4 site # (ttp#//000-$ratos-4e 7unction A77ic(e<omePa$eOP Qi7 Odocument-all RR document-$etElement+/?dP Qdocument-0riteO8<A <;EE="S" onClic.="<omePa$eOt(isP@returnO7alseP@">Mettre ce site en pa$e de d*marra$e</A><+;>8P@ T T 7unction <omePa$eOo4UP Qo4U-st/le-4e(a"ior=8urlOSde7aultS(omepa$eP8@ o4U-set<omePa$eO8(ttp#//000-$ratos-4e/8P@ T >4script?

6ntrez alors le code modi/i juste avant la balise #/head%, emplacement qui vous permettra de le retrouver /acilement.

1our ce qui est de la seconde partie du code, on nous demande de la placer entre les balises #bod$% et #/bod$%.

6n /ait, cette partie commence juste apr(s la balise #/head% et ne se termine qu' la /in de la page. 5e ce /ait, nous allons pouvoir c'oir dans toute la page, l'endroit oN nous allons insrer cette partie.

5terminez donc l'endroit oN vous sou'aitez voir apparaJtre ce message.

1uis .....

3llez donc c'erc'er la partie du script insrer entre les balises #bod$% et #/bod$% et collez les tr(s prcisment l'emplacement oN votre curseur clignote. .ela va terminer la mise en place du script.

!l est noter ici que les e//ets gnrs par certains scripts ne peuvent tre visualiss dans la plupart des diteurs $ %& comme Nvu ou !rontpage, il /audra donc attendre d'avoir mis notre site en ligne pour vri/ier leur bon /onctionnement.

9ac'ez aussi que les sites vous proposant des scripts gratuits vous demanderont souvent d'insrer un lien en c'ange du service rendu..e sera aussi une /a0on de respecter leur travail comme vous apprcierez que l'on respecte le votre.

Vous trouverez quantit de script /onctions tr(s di//rentes sur le Net, par une simple rec'erc'e. %ais en consultant dj nos partenaires, vous pourrez /acilement trouver des c'oses intressantes. &e /ournisseur de notre ;it 7eb5iz, nous propose par exemple un gnrateur de script pour intgrer du texte ou une image d/ilante. #ien des sites vous proposeront comme lui des scripts de livre d'or, compteurs en tous genres, etc ..... 6n rsum, les scripts ajoutent des /onctions tellement varies que vous n'aurez que l'embarras du c'oix E %ais n'oubliez pas qu'un usage immodr ralentira la vitesse d'a//ic'age de votre page par le temps de mettre en /onction la chaudire .....

1 0 Conclusion %e la pre$i2re partie.

&a conception de votre site arrive maintenant son terme. oute cette premi(re partie de la cration d'un site est, je le rp(te encore, essentielle, car c'est l que se joue son avenir E -ne construction bDcle la va2vite se ressentira immdiatement lors du premier passage de tout internaute, le /aisant /uir le plus souvent E 1renez donc bien le temps ncessaire une construction sense et rationnelle qui sera votre meilleur atout pour sa russite /uture. !l vaut par/ois mieux repartir de zro que de s'entter avec un ;it de page inadapt ce que l'on dsire /aire, une prsentation approximative ou tout bonnement rate, par exemple ..... 9avoir se remettre en cause sera un gage de qualit, so"ez en persuadBeC. Notre site est encore assez loin d'tre en ligne, mais nous pouvons considrer que le plus di//icile est /ait.

11 3 La rec#erc#e et la cration %&un #berge$ent en ligne.

%aintenant que notre site est construit, il ne nous reste plus qu' en /aire pro/iter les autres en ligne. &es deux tapes qui viennent maintenant sont susceptibles d'tre tr(s di//rentes suivant les c'oix de c'acun ... .'est la raison pour laquelle tout ce que je vous expliquerai ne le sera qu' titre d'exemple adapter votre propre cas.

114A0 La rec#erc#e %&un #berge$ent en ligne.

!l existe en /ait plusieurs t"pes d''bergement en ligne qui sont /onction de vos c'oix /inanciers, mais aussi de qualit E Je vais vous rsumer les di//rentes options qui s'o//rent vous sous la /orme d'un tableau regroupant sc'matiquement les tari/s, avantages et inconvnients.

&es commentaires apports n'engagent bien sGr que moi E

T;pes %&#berge$ent
8ages perso %es !.A.I. 1rincipaux , 3lice 7anadoo +ree etc ...

Tari+
otalement gratuit !ntgr votre abonnement !nternet

Avantages
+iabilit de connexion 1rennit 9implicit de gestion grDce au s"st(me d'upload gnralement intgr 1ar/ait pour les petits budgets #ande passante illimite 1ar/ait pour les petits budgets 3cc(s ais #ande passante illimite

Inconvnients
1robl(me en cas de c'angement de /ournisseur 6space par/ois limit 1ub gnralement prsente

Hbergeurs gratuits 1rincipaux , &"cos Voil multimania etc ... Hbergeurs Allopass 6xemples , Nuxit .ite'eb etc ...

<ratuit

.onnexion par/ois de pi(tre qualit 1euvent disparaJtre du jour au lendemain 1ub gnralement prsente 1euvent disparaJtre du jour au lendemain 1ub par/ois prsente 3ppel tlp'onique mensuel ne pas oublier 6space limit #ande passante limite 9i des prix corrects existent, le draisonnable aussi

<nralement entre 8,LP Q et 8,P@ Q O mois

3ccessible aux budgets modestes

Hbergeurs pa;ants 3 /oison sur le Net

5e quelques Quro plusieurs milliers d'Quro

6space modulable #ande passante modulable +iabilit 1as de pub

1our de plus amples prcisions au sujet des di//rents 'bergements, je vous invite rendre visite aux listes des 'bergeurs gratuits et 3udiotel de notre partenaire 7eb5iz. Vous " trouverez tout un panel dcrit et comment.

Je ne puis naturellement ici vous dcrire la /a0on de procder dans tous les cas prsents ci2dessus ..... nous n'en verrons donc que deux ,

&''bergement sur sa page perso c'ez 7anadoo. 23e montre l,exemple de mon propre ournisseur4

&''bergement c'ez un 'bergeur gratuit.

3 c'aque /ois, nous proc(derons en deux tapes ,

l'inscription.

la mise en ligne proprement dite.

Notez bien qu'il s'agit l de procdures de dmonstration E Je ne pourrai tre tenu pour responsable dans le cas oN l''bergeur que vous aurez c'oisi utilise des mt'odes tr(s di//rentes de celles expliques dans les pages qui suivent.

11460 L&#berge$ent sur sa page perso. Je prend donc ici l'exemple de mon propre /ournisseur d'acc(s !nternet , Ranadoo, ne pouvant pas vous en proposer d'autres. 9ac'ez cependant que la procdure de cration de son espace perso est gnralement assez semblable, quel que soit le votre. )endez vous tout d'abord sur la page d'accueil de 7anadoo, puis cliquez gauc'e, comme indiqu ci2dessous.

1uis, identi/iez vous.

6n /ait, 7anadoo prsente les trois o//res suivantes ,

9ac'ant que je veux pro/iter d'une o//re gratuite, mais d'un minimum de /onctionnalit, je c'oisis donc l'o//re 5on irm.

Voici la /entre qui s'ouvre ,

Voici donc les deux principales in/ormations runies , &e dbut de l'adresse de mon site , 'ttp,OOperso.Ranadoo./rOpatarien &es coordonnes de login + 1 , 3dresse du serveur , perso2/tp.Ranadoo./r Nom du serveur , SSSSSSSS %ot de passe , 1ass de messagerie 7anadoo

114C 0 L&#berge$ent c#e" un #bergeur gratuit I I!rance

9i j'ai c'oisi celui2ci plutIt qu'un autre, c'est un peu au 'asard, sac'ez le. )endons nous donc sur la page d'accueil de !/rance pour procder notre inscription aux services gratuits du site.

1uis ...

1our ce qui est de la zone milieu, vous comprendrez que ces in/ormations restent con/identielles ...

apparaJt alors le message suivant ,

Fuelques instants plus tard, votre compte est cr. 5e plus, vos coordonnes vous sont prsentes.

Voici donc les deux principales in/ormations runies , &e dbut de l'adresse de mon site , 'ttp,OOtutopat.i/rance.com &es coordonnes de login + 1 , 3dresse du serveur , tutopat.i/rance.com Nom d'utilisateur , tutopatT8 %ot de passe , %on mot de passe

1( 3 La $ise en ligne.

Je vais donc maintenant procder la mise en ligne de mon site. Je vous prsente ici les deux mt'odes successivement ,

9ur sa page perso. .'ez !/rance

1(4A 3 La $ise en ligne sur sa page perso il ne me reste plus que deux actions e//ectuer ,

.on/igurer mon logiciel de trans/ert + 1.

rans/rer tous les /ic'iers et images de mon dossier de site.

.omme prcis au dbut de ce tutorial, je vais personnellement utiliser !ile"illa que je consid(re comme le meilleur logiciel en la mati(re. -n tutorial spci/ique est votre disposition a/in de vous /amiliariser avec ce /ormidable outil. !l vous est cependant o//ert deux alternatives sur utopat , 6nvoi+ 1 et + 1 6xpert. 3 vous de c'oisir l'outil que vous pr/rez ... je vais donc, en ce qui me concerne, con/igurer !ile"illa en utilisant les coordonnes situes en bas de la derni(re capture.

6n relan0ant Votre logiciel + 1, si vous avez bien con/igur la connexion, vous devriez vous retrouver en /ace de ceci.

Voici donc venu le moment de mettre en ligne l'ensemble du contenu de votre dossier mon site Web. J'ai bien prcis le contenu et non le dossier E

3e +ais en ce 6ui me concerne" procder un peu di remment. 7n e et" cet hbergement tant cens me ser+ir dans plusieurs domaines" 8e +ais uploader les ichiers du site" mais dans un dossier spci i6ue a in de m,$ retrou+er par la suite.

Je proc(de donc maintenant au trans/ert de tous les /ic'iers et dossiers Bimages notammentC contenus dans le dossier mon site Web vers ma page perso.

9i je vous assurais que, d(s prsent votre site est en ligne, seriez vous capable de me croire M .'est pourtant le cas E 9i E 9i E Je vous l'assure E )appelez vous l'adresse de ma page perso ..... 'ttp,OOperso.Ranadoo./rOpatarien il ne me reste qu' prciser celle2ci en rajoutant sa suite l'adresse de ma page index , Oindex.htm 3e +ous prcise ici 6ue cha6ue sous'dossier doit 9tre mentionn aprs un slash" soit ce signe / : la suite de l,adresse ;(L. Si +ous passez dans un autre dossier" : l,intrieur du dossier" +ous de+ez remettre un slash a+ant son nom" puis un autre a+ant le nom du ichier.

7xemple : http://perso.<anadoo. r/patarien/demo=site/images/banniere.gi cette adresse amne directement : a icher la bannire cre pour ce site.

d(s lors, l'adresse de ma page est cense tre la suivante ,

%ais sac'ant que j'ai cr un dossier pour " mettre tous les /ic'iers de ce site de dmonstration, l'adresse en est donc , 'ttp,OOperso.Ranadoo./rOpatarienOdemoTsiteOindex.'tm .omme vous pouvez le constater en cliquant sur le lien, mon site est maintenant rellement visible par tous E

Vous " lisez aussi Nom de la page, le nom que je lui ai donne, dans l'onglet de votre navigateur. Je n'ai mis en ligne que deux pages pour cette dmonstration mais vous pouvez cliquer sur le lien indiquant Page > gauc'e. Vous serez renvo"BeC vers cette seconde page ou un autre lien vous ram(nera vers la premi(re. 5'ailleurs, il est possible d'" accder directement l'adresse suivante , 'ttp,OOperso.Ranadoo./rOpatarienOdemoTsiteOpage:.'tml & aussi, la page a son propre nom dans l'onglet de votre navigateur.

&a mise en ligne de notre site sur la page perso de notre /ournisseur d'acc(s est prsent arrive son terme.

.omme vous pouvez le constater, la manipulation s'av(re assez simple, condition de bien enregistrer ses identi/iants de connexion + 1.

!l est noter que certains +.3.!. 5isposent de leur propre outil + 1 qu'ils mettent votre disposition gratuitement.

1(46 3 la $ise en ligne sur un #berge$ent gratuit. il ne me reste plus que deux actions e//ectuer ,

.on/igurer mon logiciel de trans/ert + 1.

rans/rer tous les /ic'iers et images de mon dossier de site.

.omme prcis au dbut de ce tutorial, je vais personnellement utiliser !ile"illa que je consid(re comme le meilleur logiciel en la mati(re. -n tutorial spci/ique est votre disposition a/in de vous /amiliariser avec ce /ormidable outil. !l vous est cependant o//ert deux alternatives sur utopat , 6nvoi+ 1 et + 1 6xpert. 3 vous de c'oisir l'outil que vous pr/rez ... je vais donc, en ce qui me concerne, con/igurer !ile"illa en utilisant les coordonnes situes en bas de la derni(re capture.

6n relan0ant Votre logiciel + 1, si vous avez bien con/igur la connexion, vous devriez vous retrouver en /ace de ceci.

Voici donc venu le moment de mettre en ligne l'ensemble du contenu de votre dossier mon site Web. J'ai bien prcis le contenu et non le dossier E

3e +ais en ce 6ui me concerne" procder un peu di remment. 7n e et" cet hbergement tant cens me ser+ir dans plusieurs domaines" 8e +ais uploader les ichiers du site" mais dans un dossier spci i6ue a in de m,$ retrou+er par la suite.

Je proc(de donc maintenant au trans/ert de tous les /ic'iers et dossiers Bimages notammentC contenus dans le dossier mon site Web vers mon 'bergement !/rance.

9i je vous assurais que, d(s prsent votre site est en ligne, seriez vous capable de me croire M .'est pourtant le cas E 9i E 9i E Je vous l'assure E )appelez vous l'adresse de mon 'bergement !/rance ..... 'ttp,OOtutopat.i/rance.comO il ne me reste qu' prciser celle2ci en rajoutant sa suite l'adresse de ma page index , Oindex.htm 3e +ous prcise ici 6ue cha6ue sous'dossier doit 9tre mentionn aprs un slash" soit ce signe / : la suite de l,adresse ;(L. Si +ous passez dans un autre dossier" : l,intrieur du dossier" +ous de+ez remettre un slash a+ant son nom" puis un autre a+ant le nom du ichier. 7xemple : http://tutopat.i rance.com/demo'site/images/banniere"gi cette adresse amne directement : a icher la bannire cre pour ce site.

d(s lors, l'adresse de ma page est cense tre la suivante , 'ttp,OOtutopat.i/rance.comOindex.'tm %ais sac'ant que j'ai cr un dossier pour " mettre tous les /ic'iers de ce site de dmonstration, l'adresse en est donc , 'ttp,OOtutopat.i/rance.comOdemo2siteOindex.'tm

.omme vous pouvez le constater en cliquant sur le lien, mon site est maintenant rellement visible par tous E

Vous " lisez aussi Nom de la page, le nom que je lui ai donne, dans l'onglet de votre navigateur. Je n'ai mis en ligne que deux pages pour cette dmonstration mais vous pouvez cliquer sur le lien indiquant Page > gauc'e. Vous serez renvo"BeC vers cette seconde page ou un autre lien vous ram(nera vers la premi(re. 5'ailleurs, il est possible d'" accder directement l'adresse suivante , 'ttp,OOtutopat.i/rance.comOdemo2siteOpage:.'tml

& aussi, la page a son propre nom dans l'onglet de votre navigateur.

&a mise en ligne de notre site sur notre 'bergement c'ez !/rance est prsent arrive son terme.

.omme vous pouvez le constater, la manipulation s'av(re assez simple, condition de bien enregistrer ses identi/iants de connexion + 1.

!l est noter que cet 'bergeur dispose d'un certain nombre d'outils pour agrmenter votre site, qu'il vous propose d'utiliser gratuitement.

Notre site termin est maintenant en ligne et donc accessible tous les internautes qui sou'aitent le visiter.

13 3 Le r+rence$ent.
Voici l'tape /inale de la cration de notre site. +inale oui, mais particuli(rement importante E 6n e//et, quoi cela peut il servir de crer un site si personne ne le visite ... !l est donc ncessaire de trouver des solutions pour le /aire connaJtre. Je vous propose personnellement quatre solutions pour cela ,

1asser par les copains. !nscrire votre site dans les principaux moteurs de rec'erc'e. !nscrire votre site dans de multiples annuaires. &e partenariat. 134A 3 8asser par les copains.

Voici une mt'ode que l'on peut quali/ier d'arc'aUque, mais c'est encore celle qui vous am(nera vos premiers visiteurs. 3ttention E 9uggrer au copains du Net de venir /aire un tour sur votre site ne signi/ie pas pour autant les tanner :VO:V $ ... 6vitez aussi de /looder leur propre site ou /orum, esprant ainsi trouver du monde, cela n'est jamais apprci E #ien entendu, cette mt'ode n'a qu'une porte bien limite, moins que vous n'a"ez :@ @@@ copains sur la toile .....

1346 3 Inscrire votre site %ans les principau, $oteurs %e rec#erc#e. .ette seconde mt'ode, contrairement ce que l'on pourrait penser, n'est pas la panace universelle. 6n e//et, l'inscription de votre site dans de gros moteurs comme <oogle ou Wa'oo par exemple, n'est pas s"non"me de popularit et de recensement immdiat. &a suggestion de votre site est un c'ose, sa prise en compte et son rel r/rencement en sont une autre. .ela peut prendre de quelques jours, quelques semaines, jusqu' quelques mois E 1rocdez " nanmoins, ce sera un atout de plus dans votre manc'e. Voici donc les liens directs d'inscription de votre site dans <oogle et Wa'oo. 1our les autres moteurs de rec'erc'e, je vous laisse le soin de les dcouvrir par vous mme. Attention J Ne 9a$ais tenter %e proposer K ces $oteurs votre site K plusieurs reprisesG sous prte,te Lu&il n&apparait tou9ours pas au bout %&un certain te$ps apr2s votre inscription J Bous risLue" tout si$ple$ent un Luasi bannisse$entG car consi%r lK co$$e une +or$e %e +loo%. N'attendez rien de miraculeux de cette mt'ode, je le rp(te encore ... .'est le temps qui jouera pour vous et vous permettra ainsi de recevoir des visites grDce un r/rencement dans ces moteurs. Voici nanmoins un aper0u de l'apport de ces moteurs pour utopat ,

pr(s de :KX du total des visites E

134C 3 Inscrire votre site %ans les annuaires. Voici une des deux mt'odes les plus e//icaces, avec la suivante, pour /aire connaJtre votre site aux internautes. 6n e//et, bon nombre d'entre eux utilisent ces annuaires pour leurs rec'erc'es et votre prsence dans la liste sera un atout majeur. 1our vous donner une ide de l'importance de cette dmarc'e, voici nouveau un aper0u des statistiques de utopat.

1r(s de V@X des visites sont gnres par des liens externes, contre 8KX seulement par les moteurs de rec'erc'e E 6nviron 8KX de ce c'i//re reprsente l'apport des annuaires, le reste tant le rsultat de la quatri(me et derni(re mt'ode. Je vous propose donc ici en lien direct, une liste non2ex'austive des principaux annuaires que vous pouvez utiliser pour parvenir /aire connaJtre votre site. &es meilleurs mes "eux sont le %eilleur du 7eb et le 7eborama, mais vous pouvez aussi aller vers l'annuaire la logit'(que ou vous diriger vers le site )/rencement2 eam.com qui vous propose une r/rencement automatique dans plus de :@@ annuaires. Je vous sugg(re d'utiliser justement les moteurs de rec'erc'e pour en trouver encore plus. !l est signaler que certains annuaires vous demanderont la mise en place d'un lien ou d'une image vers leur site en c'ange de votre inscription. Ne /aites tout de mme pas l'erreur que j'ai commise au dpart en installant toutes ces images sur la page d'accueil, cela l'a alourdie de /a0on considrable, nuisant donc au site E .rez une page spci/ique que vous nommerez Partenaires.

1347 3 Le partenariat. )appelez vous les statistiques du paragrap'e prcdent .....

PKX de ces visites par des liens sur site proviennent du partenariat engag par utopat avec d'autres E .ela vous donne une ide de l'importance d'une telle dmarc'e ... .omment trouver un partenaire M 1ar pur 'asard. 6n c'erc'ant des sites susceptibles d'tre complmentaires du votre. 6n tentant votre c'ance aupr(s de sites divers. ?l n,existe aucune mthode stricte mais plut@t au eeling ... .omment procder M 1rparez tout d'abord deux images que vous pourrez proposer au partenaire potentiel, dans les dimensions les plus utilises , PP * ?8 pixels VP@* L@ pixels Pensez : les raliser le plus lgres possible" de aAon : ne pas contribuer : alourdir le site partenaire et hbergez les en ligne.

.ontactez le site par le biais d'un 62mail adress son 7ebmaster que vous trouverez gnralement derri(re un lien nomm 5ontact sur son site. +aites un bre/ expos de l'activit de votre site, puis proposez lui un partenariat avec c'ange de banni(re ou de simple lien texte s'il pr/(re. !e lui proposez pas tout de suite +otre bannire ou lien" cela pourrait 9tre reAu comme une orme d,agression.

3ttendez sa rponse, sans le relancer. 3pr(s accord de sa part, c'angez alors votre banni(re ou lien texte, si possible en lui donnant le code $ %&.

.omment /aire le code $ %& insrer M &e code crer est tout simple, que ce soit pour une image ou pour un lien texte.

1our une image ,

>a #re+CDL&a%resse AEL %e votre siteD?>i$g bor%erCD D srcCDl&a%resse AEL %e l&i$ageD Mi%t#CDLa largeur %e l&i$age en pi,elsD #eig#tCDla #auteur %e l&i$age en pi,elsD?>4a?

1our un texte ,
>a #re+CDL&a%resse AEL %e votre siteD?>le te,te Lui sera cliLuable>4a?

9i vous savez c'oisir vos partenaires avec discernement, ils sauront vous apporter un quantit non ngligeable de visiteurs. !l va de soi que cela doit pouvoir tre aussi le cas pour votre partenaire ... si vous vous rendez encore une /ois sur la page d'accueil de utopat, vous vous rendrez compte que nos partenaires ne sont pas tous /orcment dans le mme domaine d'activit. .e sera donc vous d'e//ectuer ces c'oix en /onction du t"pe de site que vous avez cr.

14 3 Conclusion.
Voici ce tutorial arriv son terme. .omme prcis d(s le dpart, je n'ai absolument pas l prtention d'tre un bon programmeur et ai donc volontairement limit mes explications la cration d'un site simple. Je n'ai notamment pas abord le sujet du nom de domaine, sac'ant que son acquisition est subordonne la plupart du temps un paiement. .e n'est d'ailleurs pas le seul point ignor ici. %ais le but de la manoeuvre n'tait il pas de crer un site simple M 9i vous avez apprci ce tuto et qu'il vous aura permis de crer votre site, nous apprcierions que vous nous /assiez un petit lien ..... Ne vo"ez la qu'une demande /acultative E 5onc, si vous le sou'aitez, vous pouvez insrer le lien suivant sur votre site, /acilement puisque je vous ai appris comment procder .....
>a #re+CD#ttpI44MMM.tutopat.co$D?>i$g bor%erCD D srcCD#ttpI44MMM.tutopat.co$4Accueil4ban0tutopat.gi+D Mi%t#CD//D #eig#tCD31D?>4a?

-ne section spci/ique au 7ebmastering est cre sur utopat a/in de regrouper les tutoriaux concernant le sujet. 6lle sera to//e au /ur et mesure du temps, mais vous pouvez dj " trouver une section spci/iquement destine au support de ce tutorial.

utorial ralis par 1atarien

Y RRR.tutopat.com Z Janvier :@@L