Attention, cette page s’adresse aux débutants car je suis un débutant moi-même qui, précisément à cause de cela, se met peut-être plus facilement à la place de ceux qui n’y connaissent rien et se perdent dans la foule d’informations non-classées qu’on trouve dans les livres ou sur le web. Vous pouvez au moins arriver à faire ce que j’ai fait (voir mon site sur lequel vous êtes actuellement).

Pour créer un site, il y a plusieurs étapes :

1- Créer des pages web et les liens entre elles dans un langage pouvant être lu par les navigateurs. Le plus courant est le langage html (mais il y en a d’autres). Nous n’allons retenir que celui-là.
Pour ce faire, il y a deux méthodes : apprendre directement ce langage et écrire  ses pages sous forme de code, ou utiliser un logiciel qui permet de créer des pages visuellement, et c’est le logiciel qui traduit les pages en html. Il s’appelle “éditeur de texte” ou “éditeur html”. Nous allons retenir la deuxième méthode. Pour des pages simples, on peut utiliser un simple traitement de texte comme Word ou AppleWorks : il suffit de taper une page normale puis de l’enregistrer en format HTML. Mais il vaut mieux un vrai logiciel de création de site.

2- Une fois le site réalisé, s’inscrire chez un hébergeur, qui peut être notre fournisseur d’accès (free, wanadoo, etc.), puis transférer le dossier contenant notre site vers l’hébergeur. Pour ce faire, il faut un “logiciel FTP” ou “client FTP”, qui permet ce transfert. Certains logiciels de création de site (éditeurs html) le permettent également.

Mais revenons à la première partie :

1- Créer des pages web :

a- Trouver le logiciel de création de site : Commençons par le commencement : il vous faut un logiciel de création de site pratique, facile à utiliser, avec uniquement l’essentiel, gratuit de préférence, en français bien sûr, et prévu pour toutes les plates-formes (système d’exploitation)… (sauf mac OS 9). Eh bien, ce logiciel existe, c’est avec celui-ci que j’ai fait mon site, il s’appelle Nvu. Kompozer vient de faire suite à NVU (à télécharger en français ici : http://www.jetelecharge.com/Internet/613.php), il est plus complet et toujours gratuit ! Sauf que à mon premier essai, il semble mal gérer les accents. Exemple : le é devient E accent grave. C'est pourquoi je suis revenu à NVU, qui lui gère bien les accents. Donc à suivre...
En fait, j'ai trouvé la solution : il faut aller dans les Préférences de Kompozer, puis "Avancé", puis "Caractères spéciaux", et dans le menu déroulant : mettre "Les caractères spéciaux HTML 4". Et les accents marchent !

Pour télécharger Kompozer :

http://www.geckozone.org/telechargement/ 

Comment ajouter l’extension qui le rend en Français :

http://www.geckozone.org/forum/viewtopic.php?t=51228&sid=d902295a99cd29c721a0f35ef594a083

Comment utiliser Kompozer ?

http://claroline.patrickplante.org/kompozer/exercice.html et http://info.sio2.be/kpz/index.php

b- Créer un dossier “site” : avant d’écrire son site il faut prévoir au moins en partie ce qu’il va y avoir dedans : en général du texte et des images. Il ne faut pas que les images, que vous irez chercher spontanément au fond des dossiers les plus obscurs de votre ordinateur, restent dans ces dossiers éparpillés pour illustrer vos pages. Il faut en faire des doubles qui seront rangés dans un seul dossier : le dossier “site”. Ce dossier doit être composé de sous-dossiers clairs pour que vous puissiez vous y retrouver :
- Pages
- Sous-pages (pour ranger les pages plus spécialisées qui s’ouvrent à partir d’un lien provenant de pages d’intérêt plus général)
- Petites images (dans lequel vous mettrez toutes les images apparaissant dans vos pages)
- Grandes images (dans lequel vous mettrez les images qu’on voit agrandies quand on clique sur les petites).

Tout ces sous-dossiers entreront dans le dossier principal “site”.

Attention : la page d’accueil, c’est-à-dire la première page sur laquelle arriveront les internautes qui taperont l’adresse (ou URL) de votre site, devra être hors de tout sous-dossier et apparaître visible à l’intérieur du dossier “site”. Sinon, les internautes en tapant l’adresse de votre site verront apparaître une liste de tous vos dossiers et non la page d’accueil. Je crois d’ailleurs avoir compris que la page d’accueil doit toujours s’appeler “index”. Au moment de transférer votre site chez l’hébergeur, c’est le contenu du dossier “site” qui sera transféré et non le dossier “site” lui-même.

Donc votre dossier “site” contiendra à peu près à ceci :

- index.html (c’est-à-dire la page d’accueil)
- Pages
- Sous-pages
- Petites images
- Grandes images

b- Nommer les documents : il vaut mieux le savoir dès le départ : pas d’accents dans les noms de dossiers, fichiers, documents, pages etc.… et encore moins de guillemets, parenthèses et tout signe kabbalistique… merci les américains ! Sinon, les liens ne marchent pas… Par contre vous pouvez mettre des accents dans les textes de vos pages web.

c- Créer la page d’accueil : dans Nvu, c’est facile, on ouvre le logiciel et la page est prête à être écrite. Écrire du texte est on ne peut plus simple. Insérer une image demande quelques règles (voir plus bas “Insérer une image”).

- Nommer la page d’accueil :
C’est en l’enregistrant (cliquer sur le troisième bouton rond “enregistrer”) qu’il vous propose de nommer la page. Nommez-la “index” (sans les guillemets). En l’enregistrant au format “fichiers html” il se chargera d’ajouter la mention .html, ce qui fait que votre page s’appellera “index.html”.

- Créer un fond : Dans le menu Format/Couleurs et fond de page.

- Mettre un menu : (contenant tous les titres de vos principales rubriques, renvoyant par un lien vers les dites rubriques.) Pour les liens, on verra après.
Pour insérer un menu, vous pouvez choisir si le menu se situera en haut de la page ou de côté. Pour le placer de côté, il faut utiliser un tableau qu’on peut rendre ensuite invisible.

- Créer un tableau : en cliquant sur le bouton “tableau”, vous pouvez avec la souris choisir le nombre de cases. Essayez deux cases l’une à côté de l’autre. Puis cliquez 2 fois sur le petit tableau qui apparaît sur votre page : la fenêtre “tableau” apparaît. Donner une taille quelconque à vos cellules (hauteur - largeur), par exemple 150 x 150 pixels. Ensuite le fait d’entrer du texte dans la cellule la fait s’adapter à la taille du texte (ou de l’image). Vous pouvez aussi déformer le tableau en agissant sur les petits carrés qui l’entourent. Vous pouvez ainsi taper votre menu dans la case de gauche, et votre texte d’accueil dans la case de droite.
- Rendre le tableau invisible : vous sélectionnez le tableau en cliquant dessus puis vous cliquez sur le bouton “tableau” et à nouveau sur “tableau” dans la fenêtre. Puis vous mettez dans la case “bordure” : 0 pixels.

d-Insérer des images : en soi, c’est très simple, puisqu’il suffit de cliquer sur le bouton “image”, puis “parcourir” et d’aller chercher l’image dans vos dossiers.
Toutefois, il n’acceptera, en gros, que les images au format JPEG ou GIF. De plus il faut maîtriser la taille de vos images : certes, en les attrapant par le coin vous pouvez les réduire ou les agrandir… mais il est inutile d’avoir une image grande (et donc lourde) dans vos dossiers, si elle est petite sur votre page. Pour ma part, je crée une image qui a la résolution de mon écran (96 dpi pour moi, mais c’est souvent 72 dpi), ce qui me permet de maîtriser sa taille en cm. Quant aux grandes images, il ne faut pas qu’elles soient trop lourdes : au début , j’avais mis des images de 700 à 900 ko : résultat : certains internautes les ouvraient, d’autre pas… je ne sais si ça dépend des navigateurs, des débits, des systèmes ou autre… mais c’est comme ça. 200 ko, c’est mieux. Pour créer des images pas trop lourdes, on peut utiliser dans un logiciel comme Photoshop la fonction “enregistrer pour le web” qui permet plusieurs options pour alléger une image. Au dépend souvent de la vivacité des couleurs. C’est pourquoi, avant de la passer à cette moulinette, on peut commencer par en augmenter le contraste et la saturation.
A savoir : les images GIF permettent de conserver des zones transparentes, qui deviennent blanches si vous l’enregistrez en JPEG.
Texte alternatif : ah oui ! j’oubliais ! Nvu vous demande pour chaque image de mettre un texte alternatif. Vous pouvez refuser en décochant la case. L’intérêt de ce texte est toutefois d’apparaître à la place de l’image si l’internaute refuse les images (il paraît que certains le font) pour naviguer plus vite. L’autre intérêt (plus fort) est d’indexer l’image dans les moteurs de rechercher d’images : il paraît qu’il ne faut mettre qu’un seul mot, et bien sûr, sans accent…

e- Créer d’autres pages : une fois que vous avez créé votre page d’accueil, avec un menu, les autres pages peuvent être créées sur le même modèle, en modifiant le contenu de la case de droite contenant le texte et les images. Il y a une méthode pour cela dans Nvu, mais je ne l’ai pas trouvée… donc je procède ainsi : je pars de la page d’accueil et je fais Fichier/Enregistrer sous, puis je nomme la nouvelle page. Ensuite il faut faire un petit saut dans le code html (aïe !) en cliquant en bas sur <html>source. Dans les premières lignes, vous trouverez la ligne suivante :
<title>titre de ma page</title> Il suffit de renommer le titre de votre page.

f- Créer les liens : pour créer des liens, depuis la page d’accueil par exemple,  il faut sélectionner chaque titre du menu puis cliquer sur le bouton “lien” puis sur “parcourir” et sur la page ou le document vers lequel votre lien va mener (ou entrer l’adresse d’une page web). Ensuite, évidemment, il faut refaire la même opération pour chaque page ! Sauf si vous repérez dans le code html (aïe !) le bloc correspondant à tous ces liens et qu’en faisant du copier-collé vous l’insériez dans les autres pages…  ce n’est pas si difficile, les liens se présentent comme cela :

href="biographie%20philippe%20coudray.html">Biographie<

Bien sûr, cette opération (le “copié-collé”) marchera à merveille pour vos pages d’un même dossier, mais si vous passez aux “sous-pages” du dossier “sous-pages”, cela ne marchera plus. Pourquoi ? Parce qu’en changeant de dossier le chemin à parcourir par les liens ne sont plus les mêmes… Aïe!… Calmons-nous… En effet, si les liens partent d’une page se situant dans un sous-dossier du dossier “pages”, le chemin à parcourir par le lien comporte un dossier supplémentaire à franchir. Le chemin se trouvant dans la fenêtre “lien” n’est plus valable. Il faut le compléter en son début par ceci ../

g- Vérifier tout ça : inutile de préciser que tout au long de ces opérations vous vérifierez le résultat de vos efforts en cliquant sur le bouton “navigateur” qui ouvrira la page dans votre navigateur préféré, la montrant telle qu’elle sera sur le web. Vous aurez souvent la surprise de voir qu’il y a une différence entre l’aspect de la page sur Nvu et sur le navigateur (textes plus grands par exemple). C’est comme ça !

2- Transférer le site :

a- S’inscrire chez un hébergeur : la plupart des fournisseurs d’accès auxquels nous sommes déjà inscrits pour avoir Internet fournissent gratuitement 100 mo (ce qui est suffisant) de site. Le seul inconvénient est que notre site s’appellera du genre “moi.perso.Hébergeur.fr”, ou “moi.hébergeur.fr”, bref n’aura un nom propre du genre Moi.com. Cela ne gênent que quelques-uns. Si cette solution vous convient, en suivant la procédure fournie sur le site de votre hébergeur (cherchez bien, elle y est !), il vous donnera trois informations nécessaires :

Hôte : on retrouve toujours ftp quelque part dedans.
Identification : il y a un @ dedans (mais dans l’hôte quelquefois aussi).
Mot de passe : le mot de passe de messagerie si c’est chez votre fournisseur d’accès.

Ce sont ces informations qu’il faudra insérer pour transférer le site sur le web.

Voici une liste d’hébergeurs gratuits sans pub, je n’ai pas vérifié si elle est encore à jour :
- www.free.fr
- www.skreel.org
- www.laposte.net
- www.baoo.org

Si vous préférez avoir un nom de domaine (du type moi.com, ou moi.net, ou moi.fr), il paraît que c’est mieux pour le référencement sur les moteurs de recherche) il y a des hébergeurs payants. Moi, j’ai pris Online (entre 40 et 50 euros par an) parce qu’ils ne font aucune limite sur le trafic (au cas où mon site attirerait brusquement 75000 personnes par jour, on ne sais jamais…).

b- Transférer le site  : depuis Nvu, normalement, on peut le faire, en cliquant sur “publier”. Si vous être plus malin que moi, vous y arriverez, moi je n’y arrive pas, aussi, on peut utiliser un logiciel FTP comme “Fetch” pour Mac, (à télécharger pour 15 jours, puis payer 25 dollars), ou FileZilla (pour PC, gratuit).
Une fois que vous avez entrées dans le logiciel FTP les trois informations demandées, une fenêtre s’ouvre contenant déjà quelques dossiers (insortables) dont un dossier nommé www.
C’est dans celui-ci que vous glisserez le contenu de votre dossier “site” (et non le dossier “site” lui-même). Rappel : la page d’accueil doit être en-dehors de tout dossier (sauf du dossier “site” lui-même).

Une fois le site transféré, ce qui peut prendre du temps s’il est lourd (une demi-heure…), vous pouvez tout de suite aller le vérifier sur votre navigateur… et constater que quelques liens ne fonctionnent pas ! Visitez votre site depuis un autre ordinateur que le vôtre, car des liens cassés peuvent quand même fonctionner depuis votre ordinateur à cause des multiples mémoires cache, cachées et mystérieuses de votre machine… Calmez-vous, personne ne va encore tomber sur votre site, et prenez votre temps. Il peut y avoir à cela plusieurs causes :
- 1 : les accents ! Vérifiez que les fichiers qui ne s’ouvrent pas n’auraient pas un accent oublié, supprimez-le et refaites le lien.
- 2 : le poids des images : certaines images trop lourdes refusent de s’ouvrir : allégez-les (ne dépassez pas 200 ko).
- 3 : lors du transfert, le “cordon ombilical” avec votre ordinateur ne s’est pas rompu : en clair, l’adresse de certains liens  a pu garder toute la suite de dossiers de votre ordinateur au lieu de ne prendre que les derniers. Comparer les liens entre eux, vous comprendrez. Il suffit de modifier cela et de remettre la page modifiée.

Car… chaque fois qu’on modifie un détail dans une page, il suffit de remettre cette page sur le web, qui remplacera la précédente automatiquement, inutile de remettre le site en entier, bien sûr.

Vous l’aurez compris : l’intérêt de créer un site soi-même, c’est de ne dépendre de personne pour le modifier chaque fois qu’on le souhaite !


Référencement de votre site : on appelle le référencement le fait d’être visible et bien placé sur les moteurs de recherche. Tous les conseils peuvent être trouvés à cette adresse qui propose de télécharger un guide du référencement gratuit : http://www.guide-referencement.com/