lauxtest

Que ce soit pour partager votre passion des lépidoptères à poils longs ou faire admirer les prouesses de votre escargot apprivoisé, la technique sera la même, et vous y parviendrez sans difficulté sous réserve que vous procédiez avec ordre après vous être documenté un minimum.
Les quelques conseils qui suivent s'adressent aux débutants ; ils n'ont aucune prétention à couvrir le sujet de façon exhaustive.

Table des matières

  1. Les bases du fonctionnement du Web
    1. Structure d'une page web
    2. Passons à l'action
    3. Quels logiciels ?
      1. Création des pages
      2. Transfert des pages en FTP
    4. Choisir un hébergeurs
    5. Rien ne vaut un exemple précis
      1. 1 - création d'un compte
      2. 2 - activation des pages personnelles
    6. Annexes
      1. Les standards du Web
      2. Styles, feuilles de styles, CSS

Les bases du fonctionnement du Web

Le Web est constitué - pour ce qui nous intéresse ici – de « serveurs » et de « postes clients ». Pas de panique :
- un poste client, c'est votre ordinateur personnel, le mien, etc.
- les serveurs ne sont rien d'autre que des ordinateurs, souvent plus gros, avec beaucoup de disques durs et des logiciels spécifiques pour :
Les serveurs et les poste clients doivent pouvoir communiquer, donc parler les mêmes langages ; on a mis au point un certain nombre de « protocoles » dont deux nous intéressent ici :
retour à la table des matières

Structure d'une page web

Les pages web sont construites pour être légères (internet est né bien avant le haut débit) : ce sont en général de simples fichiers « texte », mais avec une terminaison en .htm ou .html. Ces fichiers contiennent évidemment des textes ; ils sont lisibles dans un éditeur de texte : faites l'expérience (avec le bloc note de Windows par exemple), vous remarquerez quelques bizarreries :
Ce dernier point est essentiel : les fichiers html ne contiennent pas d'objet, mais seulement l'indication des objets à insérer.
Les pages web peuvent contenir aussi des scripts ou même des programmes, mais nous n'entrerons pas dans ces questions, et l'on peut s'en passer.

retour à la table des matières

Passons à l'action

Le plus simple est de créer votre site sur votre ordinateur, puis de le transférer (en FTP le plus souvent) sur le serveur qui sera chargé de le redistribuer (en HTTP) en fonction des requêtes des internautes.

Vous allez créer des pages sur votre ordinateur, incluant des objets (photos le plus souvent) situés aussi sur votre ordinateur ; le fichier html ainsi créé contiendra donc le chemin d'accès à ces objets. Il faut absolument que le chemin d'accès soit rigoureusement le même une fois que votre site sera chez votre hébergeur.
La même chose s'impose pour que les liens d'une page vers une autre fonctionne à l'identique sur votre ordinateur ET sur celui de votre hébergeur.
C'est indispensable, et très simple : il suffit de rassembler tous les fichiers (html, image etc) de votre site dans un seul dossier sur votre ordinateur, et de recréer la même structure chez votre hébergeur.
Cette structure devrait ressembler à ça (quelque part sur votre disque dur, et sur le serveur de votre hébergeur) :

...................         monsite
    index.html
    machin.html
    truc.html
    .............
    images
        escargot.jpg
        photo_accueil.jpg
        image_courier.gif
        .......................
    annexe
        fichier_en_telechargement.pdf
        .........................................


En jaune, les dossiers, et en bleu, les fichiers.
Les noms de fichiers et dossiers ne contiennent ni espace, ni caratère spécial ou accent.
Beaucoup d'hébergeurs imposent que la page d'accueil soit nommée « index.html ».

retour à la table des matières

Quels logiciels ?

Ceux-ci vont avoir deux fonctions : créer un ensemble cohérent de pages, et transférer le tout (sans oublier les images et autres objets) chez votre hébergeur. Je vous propose quelques logiciels fonctionnant sous Windows, mais sachez que d'autres choix sont possibles, et qu'on vit au moins aussi bien avec certains autres systèmes plus sûrs, plus stables et moins chers .

Création des pages

Editeur de texte (notepad ou autres) : ça suffit en théorie, et beaucoup font leurs pages ainsi ; mais c'est très rébarbatif (chaque balise doit être saisie à la main ...). Vous préfèrerez sans doute quelque chose de convivial, dans lequel on saisi du texte, on colle des images, on précise la mise en page souhaitée et le logiciel fait le « sale » boulot. On parle alors de logiciel WYSIWYG (= what you see is what you get) :

MSWord : il peut faire du html, mais c'est exécrable. A proscrire.
FrontPage : à peine mieux
Divers logiciels souvent gratuits et généralement approximatifs : méfiance
Dreamweaver : ultrapuissant et usine à gaz, très cher (sauf les versions anciennes qu'on trouve plus ou moins gratuitement), code correct en général (souvent très lourd), il incorpore un éditeur de site avec une fonction FTP très pratique , il intéresse les pros du fait qu'il sait manipuler la plupart des langages de script et le CSS ... peu adapté à un amateur ; choisissez à la rigueur la version 2 ... si vous la trouvez.
OpenOffice : il fait un html correct, très bien pour faire une page seule, mais n'est pas vraiment adapté pour gérer un site.
NVU : libre et gratuit, produit un code parfaitement conforme aux standards, à recommander chaudement. Il intègre lui aussi un éditeur de site et un éditeur CSS (très bons tous les deux), quelques autres outils excellents et une fonction FTP ... peu pratique (en réalité, elle est prévue pour une façon de travailler que je vous déconseille ... il suffit de l'ignorer).

Téléchargement : http://frenchmozilla.sourceforge.net/nvu/     et explications pour NVU : http://www.framasoft.net/article2243.html
Le développement de NVU s'est arrêté depuis la version 1 (en attendant un remplaçant), mais il a été repris sous le nom de "Kompozer" pour quelques améliorations et corrections de bugs : voir http://www.kompozer.net/ (en anglais) et http://www.framasoft.net/article2243.html (en français)

Transfert des pages en FTP

A ma connaissance, Filezilla est parfait, léger, libre et gratuit.
Téléchargement et explications pour Filezilla : http://tice.edres74.ac-grenoble.fr/article.php3?id_article=262

retour à la table des matières

Choisir un hébergeurs

Il s'agit de l'ordinateur « serveur » qui va héberger vos pages et les redistribuer (et de la société qui est derrière). Plusieurs solutions s'offrent à vous :

Quelques critères de sélection :

La plupart des FAI (fournisseurs d'accès internet) proposent d'héberger gratuitement vos sites personnels, pour certains même si vous êtes connectés par un autre FAI. Vous pouvez consulter sur le Web quelques sites personnels hébergés par ces gratuits pour vous faire une opinion.

Une fois le choix fait, il vous faudra récupérer auprès de votre hébergeur l'adresse de votre site, votre login (ou identifiant) et votre mot de passe. Comme vous avez sûrement bien lu le début de cet article, vous comprendrez qu'il vous faudra en général deux adresse pour le site : une adresse selon le protocole FTP pour « charger » ou uploader votre site, et une adresse selon le protocole HTTP pour aller le consulter, et donner son adresse à vos amis.

retour à la table des matières

Rien ne vaut un exemple précis

Je choisis le FAI Free parce que je le connais assez bien (et puis ... c'est moi qui décide, là !) :

1 - création d'un compte

Avant de demander d'héberger mon site, il me faut créer chez lui une adresse mail, ce qui se fait :

Pour ceux qui sont déjà chez Free, en créant une adresse mail supplémentaire.

Pour les autres, en demandant un accès internet gratuit : http://subscribe.free.fr/accesgratuit/subscribe/formuser.html
Pas besoin ensuite d'utiliser cet accès (gratuit ... hors coût telecom), mais seulement l'adresse mail qui va avec.

Il faut alors choisir le libellé de la nouvelle adresse mail ; et c'est là l'avantage, puisque ce libellé sera aussi le nom de votre site ; par exemple, si vous choisissez comme adresse mail mesescargotsapprivoises@free.fr , l'adresse du site associé sera http://mesescargotsapprivoises.free.fr , ce sera plus parlant que http://monnometmonprenom.free.fr .

Vous pourrez mettre cette adresse mail sur votre site (je conseille de la coder pour limiter le spam) afin que les messages relatifs à vosescargots.etc ne se mélange pas aux autres dans votre logiciel de courrier (il suffira d'y paramétrer un compte supplémentaire).

Pour coder (rendre invisible aux robots de spam) votre adresse mail sur une page html :
http://www.henri-ruch.ch/Utilitaires/CodeMail/CodageMail.asp
attention, seul le premier script proposé est valide pour le W3C

2 - activation des pages personnelles

Cela se fait très simplement en ligne sur l'adresse suivante, où vous devrez vous identifier avec votre identifiant (l'adresse mail créée précédemment sans la partie « @free,fr ») et le mot de passe associé :
http://subscribe.free.fr/login
Le délai d'activation est d'un ou deux jours.

Puis vous disposerez enfin de tout le nécessaire :
accessoirement, votre nouvelle adresse mail :  mesescargotsapprivoises@free.fr
votre login : mesescargotsapprivoises
votre mot de passe : ******** (il vous est – je crois – imposé, mais vous pouvez le changer après coup)
adresse FTP : ftp://ftpperso.free.fr , qui vous demandera de vous identifier (pour que n'importe qui n'aille pas mettre le souk dans votre site) avec votre login et votre mot de passe
adresse HTTP : http://mesescargotsapprivoises.free.fr que tout le monde pourra aller visiter (quand vous y aurez mis quelque chose).

retour à la table des matières

Annexes

Les standards du Web

Comme je l'ai rappellé plus haut, le Web a été créé pour faire communiquer entre eux différents systèmes informatiques. Ceux-ci n'ont pas tous les mêmes composants matériels, ni les mêmes logiciels, ni les mêmes OS (Operating System ou Système d'Exploitation). Il est donc évident que ce n'est possible qu'à la condition que tout le monde soit d'accord pour utiliser la même syntaxe, les mêmes codes.
Un organisme indépendant a été créé il y a pas mal d'années, au sein duquel des personnes compétentes élaborent ces règles et leurs évolutions (parce que le Web évolue aussi). Il s'agit du World Wide Web Consortium, ou W3C.
Hélas, certains éditeurs de logiciels ne respectent pas parfaitement ces règles élémentaires ; les uns pour des raisons commerciales (ils tentent, à partir de leur situation de quasi-monopole, d'imposer leur syntaxe pour rendre tout le public captif), d'autres pour des raisons d'incompétence ou de légèreté.

Respecter ces règles, c'est respecter votre public de lecteurs-internautes.

Les normes rédigées par le W3C sont très strictes, et parfois difficiles à respecter à la lettre, mais même si votre site n'est pas 100% conforme, évitez de recourir au flash, aux excès de tableaux, ou aux balises « exotiques » (Microsoft en a inventé un certain nombre, qui ne fonctionnent évidemment que ... sous Windows et Internet Explorer !).

Vous voulez vérifier la conformité de votre site ? (je le répète, le W3C est très sévère) :
http://validator.w3.org/
Il n'est pas validé ? Ce n'est pas forcément dramatique : simplement, testez vos pages sous différents navigateurs (avec l'aide d'amis, de membres d'un forum, etc) et vous saurez très vite si votre site fonctionne pour tous ou seulement pour ceux qui utilisent les mêmes logiciels que vous.

Parmi les  navigateurs web modernes, performants et sécurisés, on peut citer :
Internet Explorer était resté figés depuis très longtemps sur la version 6, et le Web évolue ; il est peu sécurisé, et lit mal ou pas du tout certains fichiers parfaitement conformes aux standards actuels : des effets de transparence par exemple, magnifique sur d'autres navigateurs, feront sur IE 6 ou antérieurs un gros tas pas beau du tout ...

Chrome, le navigateur de Google, repose sur le moteur Webkit de Konqueror et Safari ; encore jeune, il semble prometteur.

Styles, feuilles de styles, CSS

A l'origine, la mise en forme en html se faisait uniquement à l'aide de balise, pour indiquer que tel passage est en gras (<b>blabla</b>), centré (<center>blabla</center>) etc, et tout était statique.
Mais les limites sont vite apparues, et il fallait alors recourir à des tableaux complexes pour enrichir la mise en page, à des scripts pour animer un menu ... ça devenait la jungle.
En outre, la mise en forme étant noyée dans le texte, il était très difficiel de la changer, et il fallait le faire page par page, ligne par ligne.

Dans un traitement de texte, on peut façonner la mise en page au fil du texte (beurk) ou en utilisant les styles (recommandé). De même, on a inventé pour les pages html le CSS (Cascade Style Sheet, ou feuille de style en cascade) : ce sont de petits fichiers texte très légers, incorporés à la page html ou séparé (pour tout un site) qui permettent de structurer de façon bien meilleure la mise en forme et de rendre dynamiques des parties de page ou de menu.

Pour en savoir plus sur les CSS :
http://www.csszengarden.com/ ; c'est en anglais, mais juste pour le coup d'oeil : en cliquant sur les liens de la colonne de droite, vous gardez le même fichier html (le même contenu), mais vous chargez simplement une autre feuille CSS et ... ça change tout !
http://css.alsacreations.com : les bases
http://css-astuces.batraciens.net/index.htm : des trucs simples pour rendre vos pages dynamiques sans insérer de scripts (ou très peu).


Et n'oubliez pas : le droit français vous rend juridiquement responsable de tout ce qui figure sur votre site (même si vous n'êtes pas l'auteur : post dans votre forum ou commentaires si vous avez un blog).

retour à la table des matières

__________________

Cet article ne prétend pas faire le tour du sujet, mais simplement vous proposer des bases utiles. Il vous a aidé, vous avez des observations ou des suggestions à formuler, relevé des inexactitudes ?
Merci de le mentionner sur le livre d'or.


Cette page a été réalisée sous Mandriva-linux, à l'aide du logiciel NVU ;

elle est validée  Valid XHTML 1.1(c'est ici) et  Valid CSS(c'est là)