Préliminaires - Esthétique - Hyperliens - Images - Tableaux - Conseils divers - Accueil

PRELIMINAIRES

Les pré-requis - Les programmes - Préparer son projet

Préparer son projet

Avant de se lancer, il faut avoir en tête, et même sur papier, une ébauche de son projet et de son plan.
Imaginons que nous ayons un ouvrage didactique à constituer : nous en prévoirons les chapitres : titres et contenu. Il faut aussi, mais après coup, réfléchir à la page de couverture.
Pour un site web, c'est pareil. Le thème étant posé, il faut prévoir le découpage rationnel en différentes pages, qui formeront les chapitres. C'est plutôt à la fin qu'on constituera la page d'accueil.
Evidemment, c'est un point de départ. On est toujours libre par la suite de bouleverser son projet initial, quand on sait faire.

Pour les étudiants de Pluri, les directives imposent une arborescence précise. On commencera donc par se créer un dossier pour son projet, dans lequel on créera l'arborescence demandée. C'est-à-dire, à la base, un dossier img pour les images de la page d'accueil, et un autre, qu'on appellera fichiers, ou pages, ou data, qui contiendra le reste. Dans celui-ci, on créera un sous-dossier images, pour les images des sous-pages. Commes pages html, il n'y aura à la racine que la page d'accueil, les autres se trouveront dans le dossier que j'ai appelé par exemple fichiers. Evidemment, ce n'est pas limitatif, et mon dossier fichiers peut comprendre un certain nombre de sous-dossiers supplémentaires. Voici par exemple à quoi ressemble l'arborescence d'un projet :

Quel est le but ? Il s'agit d'un examen, qui impose des contraintes, lesquelles forceront les étudiants à certaines manipulations, et permettront de juger le savoir-faire. Mais dans tous les cas, le but est de mettre de l'ordre. Evidemment, on pourrait tout placer au même niveau, et ça fonctionnerait quand même. Mais ce serait du travail d'amateur, du travail bâclé, et on aurait bien du mal à s'y retrouver pour faire une modification. Sur vos étagères, vous mettez tout en vrac, vous ? Les bouquins de linguistique, de cuisine, les DVD, les croquettes du chat ? Et dans les placards, le sucre en poudre et la farine à côté du Desktop et du white spirit ?

Suite des contraintes imposées aux Pluri, mais que nous allons justifier :

Les noms de fichiers et de dossiers ne dépasseront pas 8 caractères (+ extension pour les fichiers).
Sont interdits : les caractères accentués, les espaces, les majuscules, les signes de ponctuation (les tirets sont autorisés).
La page d'accueil s'appellera impérativement index.htm ou index.html (NVU fait des extensions .html, il ne faut pas le contrarier).

Commençons par ne point n°2. Supposons que je veuille insérer dans une page l'image suivante, dont le nom comporte 3 accents et 5 espaces :

Voici comment NVU le traduit :

Vous avez bien lu : « T%EAte%20de%20veau%20%E0%20la%20cr%E8me.jpg ». Les accents et espaces sont transformés en code, afin de pouvoir être interprétés par différents navigateurs. Il n'est jamais certain qu'un nom de fichier puisse être correctement interprété sur Internet quand il comporte des caractères à problèmes.
Quant aux majuscules, il faut savoir qu'une majuscule en plus ou en moins, ça n'a pas d'importance sur le disque dur, mais ça a de l'importance sur le Net. Si le lien est fait sans majuscule sur un nom de fichier qui en porte une, ledit lien ne fonctionnera pas. Mieux vaut donc ne jamais en mettre.

Point n°1 à présent. Huit caractères pour un nom de fichier, c'est le maximum que puisse comprendre le DOS, qui est le système d'exploitation basique. Bien sûr peu de gens utilisent encore des machines d'avant-guerre, mais les huit caractères sont le point commun entre tous les systèmes, modernes ou anciens ; c'est donc la garantie que vos pages pourront toujours être ouvertes, même par des gens qui surfent sous Windows 95, avec d'antiques navigateurs, voire sous des systèmes exotiques que plus personne ne connaît (sauf moi), comme NewDeal.
Quand un projet m'est rendu, et que l'étudiant, chez lui, a travaillé sous Windows 95, je l'ouvre sous 2000 ou XP, et je constate ceci : tous les noms sont réduits à 8 caractères, et passés entièrement en majuscules. L'inverse se vérifie aussi dans l'autre sens, pour un fichier ou dossier créé sous 2000 et passé sous 95. Par exemple, Program Files devient PROGRA~1. Eh bien, si l'étudiant s'est limité à 8 caractères, les liens fonctionnent, les images apparaissent, sur disque dur. Dans le cas inverse, rien ne fonctionne.

Enfin, la page d'accueil doit impérativement s'appeler index (sans majuscule) si l'on veut qu'elle s'ouvre de manière automatique, sans que les gens aient à taper l'adresse complète, avec le nom parfois compliqué de cette page d'accueil, surtout si elle porte des caractères à problèmes.
Par exemple, l'adresse de l'Université d'Artois est http://www.univ-artois.fr/ , mais le fichier de lancement, qu'on n'a pas besoin de rajouter, s'appelle index.html.
D'autres langages existent en dehors du HTML, et une page d'accueil peut s'appeler par exemple index.php.

Dernier conseil pour l'instant, avant de passer à un autre point : quand vous créez une nouvelle page, par exemple celle d'un nouveau chapitre, avant même de commencer à la remplir, enregistrez-la immédiatement là où il le faut et avec le nom nécessaire. Cela vous évitera des déboires par la suite : un lien qui ne fonctionnera pas, une image qui n'apparaîtra pas. Pourquoi ? Parce que si vous commencez à établir des liens vers des pages précédentes alors que la nouvelle page n'est pas enregistrée, les liens ainsi établis vont être absolus au lieu d'être relatifs. Qu'est-ce que ça veut dire ? Que le lien sera établi selon le chemin complet de la page sur votre disque dur, en partant de la racine du disque, ce qui donne quelque chose comme ceci dans le code HTML :
<a href="file:///C|/Documents and settings/Administrateur/Mes Documents/Projet Perso/data/bio.htm">
Au lieu de <a href="bio.htm">
Ainsi, ça fonctionnera sur votre ordinateur, mais pas ailleurs, et certes pas sur Internet. Ce problème ne se produit pas si la page est sauvegardée à vide au préalable, et on n'a plus qu'à réenregistrer dès qu'on la modifie.