cerig Formation en ligne (Juin 1999)
Bannière (5018 octets)
Carte de l'exposé
Plan de l'exposé
Glossaire de l'exposé
Le site web
II. La création du site
1. Introduction
2. Le modèle de page
3. L'introduction du contenu
4. L'optimisation du code HTML
5. Les dernières pages
6. Conclusion
I - Introduction  [retour en haut de la page]
1. Les préparatifs
La décision de créer un site web a été prise dans l'entreprise. Le contenu est à peu près fixé, le plan et/ou la structure ont été déterminés, les graphismes sont déjà bien avancés (heu...ils devraient l'être), la navigation a fait l'objet de discussions sans fin (chacun ayant son "truc" et restant sur ses positions), bref -- il est temps de se frotter un peu à l'informatique.
    On peut très bien créer un site web avec un simple éditeur de texte ASCII. Dans les débuts du web, il n'y avait pas moyen de faire autrement, et de très grands sites ont été créés ainsi. Il y a encore aujourd'hui des concepteurs qui écrivent du code HTML comme Mr Jourdain fait de la prose. Mais il ne faut pas bouder le progrès : il existe aujourd'hui de bons logiciels d'aide à la création de sites web, et nous n'allons pas les ignorer, même si parfois ils nous font bien enrager. Nous supposons donc qu'un tel logiciel a été choisi -- dans le cas présent, il s'agit de FrontPage. Il est temps de s'asseoir devant l'ordinateur.
2. Créer un site avec FrontPage
FrontPage démarre par l'explorateur. Dans l'option "1 Créer un nouveau site Web FrontPage", il faut choisir "Site Web avec une seule page". Rassurez-vous : cela ne veut pas dire que le site n'aura qu'une seule page, mais que vous serez libre d'écrire vos pages comme vous l'entendez, au lieu d'être ficelé dans un modèle tout fait "made in Microsoft". Comme chacun sait, les messages rédigés par les informaticiens sont toujours soit sibyllins, soit erronés.
    La suite vous invite à choisir un titre et vous propose "Mon nouveau site web". Pas question de garder une chose pareille. D'ailleurs, le titre de votre site, vous l'avez déjà choisi, aussi évocateur que possible... Seulement voilà, vous allez être obligé de le revoir et de le corriger de telle sorte qu'il réponde aux critères informatiques suivants :
   vous avez droit à plusieurs dizaines de caractères, mais il vous est très vivement recommandé de faire court. Les longues adresses URL exaspèrent les internautes
  vous avez droit aux lettres et aux chiffres, mais tous les signes de ponctuation vous sont interdits, à l'exception du tiret. Pas d'espaces ! Pas de lettres accentuées !
Le web a été créé il y a dix ans par des informaticiens qui utilisaient principalement Unix : les aimables fantaisies du Mac, et la relative liberté de Windows, leur étaient étrangères.
    Votre aventure commence : vous disposez désormais d'une page web blanche, apparemment vide, mais qui possède déjà deux adresses :
   pour le système d'exploitation, qui gère la FAT (File Allocation Table), cette page se trouve dans :
C:\WEBSHARE\WWWROOT\nom_de_votre_site\Default.htm
   pour votre serveur web, qui ne connaît que les URL, cette page se trouve dans :
http://URLdevotremachine/nom_de_votre_site/Default.htm
Désormais, sur un PC, deux systèmes d'adressage coexistent : c'est probablement un de trop. D'où l'idée de Microsoft d'adresser les fichiers locaux de la même façon que ceux du web, d'intégrer le moteur du navigateur à l'OS, et de se servir éventuellement de la fenêtre du navigateur comme interface graphique utilisateur. Ceci implique que ledit navigateur fasse partie intégrante du système d'exploitation. Les choses ne sont pas encore allées très loin dans cette voie, mais le gouvernement américain en est déjà à son troisième procès contre l'éditeur, afin de l'arrêter en chemin. Plus stupide qu'une administration étatique, c'est difficile à trouver.

II - Le modèle de page  [retour en haut de la page]
1. Dans quel ordre procéder ?
A chacun sa méthode : les uns vous dirons qu'il faut commencer par créer un modèle de page, d'autres que la structure passe avant tout, d'autres que tout est dans la page d'accueil et que le reste suivra bien...
    Un site doit posséder une certaine unité, et celle-ci est généralement obtenue en réutilisant, dans toutes les pages (sauf dans la page d'accueil et dans l'éventuelle page tunnel) les composants suivants  :
   les éléments graphiques de base, tels que : image de fond, logo de l'entreprise, bannière, boutons ou barres de navigation, etc.
  les éléments de présentation, tels que : couleur et taille des caractères des titres, disposition des paragraphes et indentation, couleur de fond des tableaux, etc.;
La page d'accueil échappe plus ou moins à cette description. On la veut unique, avec une belle métaphore, et un aspect à nul autre pareil. Sa réalisation est donc souvent une opération à part.
    La page tunnel est un cas très particulier : seuls certains sites en utilisent une. Le style d'une page tunnel est toujours quelque chose de très, très spécial.
    Ceci dit, les autres pages du site seront sans doute bâties sur le même modèle, plus simple et plus fonctionnel. De là à dire que c'est par la construction de ce modèle qu'il faut commencer, il n'y a qu'un pas... Mais si on crée d'abord la structure, avant de réaliser le modèle de page, on pourra ensuite incorporer à ce modèle des éléments de navigation déjà actifs. Or il faut que les pages existent (même si elles sont vides) pour que les liens hypertextes de la navigation puissent être créés.
2. Construire la structure
La structure du site étant connue (voir le chapitre correspondant), on peut créer les différentes pages du site -- vides -- en partant du niveau supérieur, et en descendant progressivement niveau par niveau. Pour ce faire, on se sert du volet "Navigation" de l'Explorateur, mal nommé puisqu'il concerne en fait la structure, et non la navigation.
    Le niveau supérieur d'un site en généralement la page d'accueil, à moins que l'on utilise un "tunnel" -- une façon de procéder réservée à des sites très particuliers.
3. Importer les images essentielles
Le modèle comportera des images telles que celles que nous avons mentionnées plus haut : image de fond, boutons, etc. Il faut donc au préalable importer ces images dans le site. Il est fortement conseillé de rassembler les fichiers de toutes les images du site dans un même dossier, que tout le monde a l'habitude d'appeler..."images", tout simplement !
4. Réaliser le modèle de page
Il ne faut pas hésiter à consacrer un temps notable à cette étape. Comme chacun sait, il faut faire bien des brouillons avant de réaliser un chef d'œuvre. Et, plus modestement, il faut songer à tout le mal que l'on devra se donner s'il faut reprendre la présentation de toutes les pages du site une à une.
    Dans FrontPage, le modèle peut être enregistré de deux façons distinctes :
  soit comme modèle proprement dit, avec les modèles proposés par le logiciel lui-même. Pour ce faire, on utilise la fonction "Enregistrer sous...", en cliquant sur le bouton "Comme modèle..."
  soit tout simplement comme une page provisoire du site, dans laquelle on puisera par copier/coller.
En fait, on peut avoir intérêt à utiliser les deux solutions, en utilisant le modèle proprement dit pour les éléments essentiels de la page, et la page provisoire pour des éléments de détail.

III - L'introduction du contenu  [retour en haut de la page]
1. Préliminaires
La page d'accueil mise à part, l'introduction du contenu dans les pages est une procédure répétitive, du moins pour les zones du site qui bénéficient de la même présentation. On gagne donc du temps en préparant bien les opérations. C'est pourquoi nous examinons cette question au niveau du site, et non à celui de la page.
2. Saisir le texte
Le texte peut être saisi à l'aide d'un logiciel de traitement de texte, avant d'être introduit (par copier/coller, ou par Fichier/Ouvrir...) dans une page web. L'essentiel de la mise en page est perdu et, en ce qui concerne les tableaux, le résultat n'est pas fameux. La bonne solution consiste à saisir le texte directement dans un éditeur de pages web, sans se soucier des détails de la mise en page, qui seront réglés plus tard.
    Pour ce faire, nous conseillons :
    de ne pas utiliser les balises "titre" (<h1> à <h6>) pour créer les titres, car la taille des caractères est perdue lors du copier-coller (du moins dans FrontPage). On obtient la même présentation en utilisant le mode "Normal", les caractères gras, et la correspondance suivante  : taille 6 pour "Titre 1", taille 5 pour "Titre 2", etc. Le formatage du texte est alors conservé lors d'un copier-coller ;
  de ne pas utiliser les paragraphes spéciaux (balises <pre>...</pre>), car ils se transforment en paragraphes ordinaires lors du copier/coller, à moins que cette opération ne soit effectuée directement dans le code HTML. De plus, la balise <pre> ne présente guère d'intérêt, et elle n'est pratiquement plus utilisée.
Ces façons de faire provoquent la fureur des normalisateurs du W3C. Que ces messieurs, qui semblent se mouvoir dans une tour d'ivoire, veuillent bien consacrer leurs importants travaux à corriger les défauts des balises précitées, au lieu de s'en prendre aux concepteurs qui n'en peuvent mais.
3. Insérer les images
Les images doivent être mises au format GIF ou JPEG, et importées dans le site avant d'être insérées dans les pages. Il ne faut pas laisser au logiciel FrontPage le soin de faire des corrections, ou des conversions de format, à la dernière minute : le résultat n'est généralement pas bon. On peut par contre utiliser FrontPage pour entrelacer une image GIF ou rendre son fond transparent, ou pour rendre une image JPEG progressive.
    Attention aux corrections effectuées alors que les images sont déjà insérées dans les pages : FrontPage enregistre les dimensions des images dans le code HTML à l'aide des attributs "width" et "height", pour faciliter le travail ultérieur du navigateur. Si vous écrasez l'ancienne image par la nouvelle, les dimensions précisées dans les pages web ne seront pas modifiées, et les navigateurs afficheront la nouvelle image avec les dimensions de l'ancienne. Si les dimensions de la nouvelle image sont différentes de celles de l'ancienne, il faut supprimer l'image et la réinsérer -- ou corriger directement le code HTML.
4. Mettre en page
Pour la mise en page, le concepteur se trouve devant le choix suivant :
  adopter la mise en forme standard du web, laquelle est d'une extrême pauvreté
  soigner sa présentation en utilisant les tableaux invisibles, méthode de plus en plus utilisée
Le présent exposé utilise la seconde méthode. Tous les composants de la page (texte, figures, tableaux, etc.) sont introduits dans des tableaux invisibles dont le modèle a été préparé à l'avance. Pour adapter le modèle au contenu, il faut une bonne pratique des opérations suivantes :
  insertion ou suppression de lignes ou de colonnes
  fusion ou fractionnement de cellules
    Avec un peu d'entraînement, on peut écrire directement dans les tableaux. On notera cependant que les corrections (déplacement de blocs de texte par exemple) sont plus difficiles dans un tableau que dans du texte libre.
    Quand une page possède une mise en page spéciale, des tableaux particuliers doivent être créés pour la réaliser.
    On notera que, dans FrontPage, quand on copie/colle du texte dans un tableau, les balises <p>...</p> délimitant les paragraphes normaux disparaissent... et avec elles les retours à la ligne intempestifs : quelle joie ! Mais il faut penser à réintroduire, grâce à la balise <br> (générée au clavier par shift + enter), les retours à la ligne là où ils sont désirés.
5. Examiner le résultat dans les navigateurs
La fonction "Aperçu" de FrontPage donne une relativement bonne idée de la manière dont une page est affichée dans les navigateurs, ou du moins dans celui de Microsoft. Rien ne remplace, cependant, les navigateurs eux-mêmes. La fonction "Fichier / Aperçu dans le navigateur..." ouvre une boite de dialogue qui donne le choix des navigateurs installés sur la machine, avec 3 résolutions (si la machine le permet). Les différentes versions du navigateur de Netscape peuvent cohabiter sans problème, mais il n'en est pas de même (sur PC) pour celles d'Internet Explorer qui, à partir de la version 4, s'associe au système d'exploitation .
    Un test vraiment sérieux comporterait les variantes suivantes :
   les deux plates-formes Apple et PC (les internautes utilisant Unix sont en proportion insignifiante)
   les deux navigateurs. Refuser d'utiliser l'un ou l'autre sous prétexte qu'on n'aime pas Netscape, ou qu'on déteste Microsoft, c'est faire preuve d'enfantillage, et manquer de professionnalisme
   les deux dernières versions de chaque navigateur, c'est à dire actuellement (mai 1999) les versions 3 et 4 pour Netscape, et les versions 4 et 5 pour Microsoft
   les trois résolutions les plus couramment utilisées : 640x480 (VGA standard), 800x600 et 1024x768
   et même l'utilisation de moniteurs dont le tube cathodique provient de constructeurs différents (pour les variations dans l'affichage des couleurs)
Certes, les concepteurs de sites web assez sérieux pour procéder à tous ces essais sont rarissimes. Mais si on veut être vu de la majorité des internautes, il ne faut pas être trop négligent : les deux plates-formes, les deux navigateurs, et les deux résolutions extrêmes constituent un minimum incompressible.
    Évidemment, pour atteindre la résolution 1024x768 dans de bonnes conditions, il faut un moniteur de 17" de diagonale. Développer un site web sur une machine équipée d'un moniteur de 15" est une gageure.
6. Effectuer les dernières opérations
Lorsque la mise en page est assurée, le plus gros du travail est terminé. Restent les finitions :
   supprimer les lignes inutiles dans les tableaux de mise en page ; fusionner éventuellement les cellules vides adjacentes
   compléter les ancres et les liens ; vérifier leur fonctionnement dans les navigateurs
   vérifier la valeur des attributs "alt" des images ; vérifier le fonctionnement de ces attributs dans les navigateurs, en désactivant l'affichage des images (si le texte ne s'affiche pas dans le cadre réservé à l'image, il doit apparaître dans une bulle lorsque le curseur passe sur ce cadre)
   insérer des espaces insécables là où ils sont indispensables (entre une valeur numérique et l'indication de l'unité utilisée ; entre la fin d'un mot et les quatre signes de ponctuation qui s'utilisent précédés d'un espace)
   utiliser le correcteur orthographique
   ajouter les méta-balises si nécessaire ( la présence de mots-clés destinés aux moteurs de recherche est fortement conseillée)
   nettoyer et optimiser le code HTML
Cette dernière opération mérite quelques explications, qui sont exposées dans le paragraphe suivant.

IV - L'optimisation du code HTML  [retour en haut de la page]
1. Introduction : tout le monde peut voir votre code !
Une page HTML est rédigée en code ASCII étendu, et transmise telle quelle à l'internaute. Rien de plus simple, pour ce dernier, que d'éditer la page web qu'il est en train de consulter. Et si vous pensez que l'internaute moyen ne connaît pas le HTML, vous ne pouvez pas en dire autant de vos concurrents, ni de certains de vos clients. Faites donc en sorte de ne pas distribuer sur le web un code qui vous fasse honte. Relisez votre code avec soin, même si cette opération ne vous parait pas réellement passionnante. Vous serez surpris de ce que vous trouverez :
   des groupes balise/contre-balise qui n'enserrent ni texte, ni image, et ne servent donc à rien
  des balises redondantes
  des groupes contre-balise/balise qui peuvent généralement être supprimés
  des attributs inutiles, particulièrement dans les tableaux
  pour les figures, des valeurs de l'attribut "alt" mal rédigées ou inutiles, etc.
A l'avenir, les logiciels éditeurs de sites web deviendront de plus en plus perfectionnés. Ils posséderont des fonctions de correction et d'optimisation du code HTML qu'ils génèrent. Mais nous n'en sommes pas encore là : ces logiciels sont encore des produits jeunes, en pleine évolution. Il ne faut pas leur en demander trop, et il ne faut pas avoir peur de corriger leur copie.
2. Supprimer les balises inutiles
Lorsqu'une page web a été beaucoup raturée dans l'éditeur de FrontPage, il en reste des traces dans le code HTML. Il n'est pas rare de trouver des paires <balise></balise> qui n'enserrent aucun texte (exemples : <p></p> ou <blockquote></blockquote>), et qui ne servent donc à rien.. Il est également fréquent qu'une paire </balise><balise> soit à l'origine de code redondant, et qu'il soit bon de la supprimer. Une exception cependant : les déclarations de centrage de deux tableaux qui se suivent, et qu'il vaut mieux conserver.
    Attention : des balises <small> ou <big> qui se suivent ne sont pas redondantes : leurs effets se cumulent, tant que l'on ne sort pas des tailles de caractère permises par le HTML.
3. Supprimer les attributs inutiles
La chasse aux attributs inutiles est généralement très fructueuse. L'exemple le plus classique est représenté par <p align="left">, qui provient d'un réalignement à gauche. Comme l'alignement d'un paragraphe est à gauche par défaut, la valeur "left" de l'attribut align ne sert à rien. Une petite astuce pour éviter cet attribut inutile dans FrontPage : quand vous réaligner à gauche, appuyez deux fois sur le bouton correspondant. La première fois redéfinit l'attribut align, la seconde fois le supprime.
    Les tableaux conçus dans FrontPage abondent d'attributs inutiles concernant les largeurs et hauteurs des cellules. Ces attributs apparaissent dès la création du tableau, et ils croissent et se multiplient si on a la mauvaise idée de tirer sur les parois des cellules avec la souris. Un grand tableau, dont toutes les cellules sont pourvues d'attributs de dimension sans rapport avec la réalité, peut faire planter un navigateur. Pour régler de manière sensée les dimensions d'un tableau, il faut se souvenir des règles de bon sens suivantes :
  il est généralement inutile de fixer des dimensions verticales absolues, car le navigateur ne peut pas en tenir compte. Quand la largeur de la fenêtre diminue, le tableau s'étend forcément en hauteur ;
  pour fixer la largeur d'une colonne, il suffit de fixer celle d'une seule cellule de cette colonne. Inutile de répéter 100 fois width="15%" s'il y a 100 lignes dans la même colonne !
Les figures constituent un cas particulier. D'abord, les indications de dimension doivent être conservées, car elles rendent l'affichage plus rapide dans le navigateur. Ensuite, quand Internet est très encombré, certains internautes désactivent l'affichage des images. L'attribut "alt" permet d'afficher un texte de remplacement. Si l'attribut "alt" est absent, ou si sa valeur est vide (alt=""), rien ne signale à l'internaute la présence d'une image. Il est donc conseillé d'agir ainsi :
  lorsque l'image a un rôle purement décoratif, et qu'elle est de petite taille, on supprime l'attribut alt ;
  lorsque l'image sert de lien (exemple : bouton), on se sert de l'attribut alt pour préciser où mène le lien : l'internaute peut donc continuer à naviguer quand il n'affiche pas les images ;
  dans les autres cas, on se sert de l'attribut "alt" pour indiquer brièvement le contenu de l'image, et sa taille en octets. Ainsi, l'internaute peut estimer le temps de chargement en fonction du débit qu'il constate, et prendre en connaissance de cause la décision de décharger l'image ou non.
4. Supprimer les caractères inutiles
Pour rendre le code HTML plus lisible, les éditeurs de pages web l'indentent à l'aide d'espaces ; pour éviter à l'utilisateur d'utiliser l'ascenseur horizontal, il truffent le code de retours à la ligne. Les navigateurs ignorent ces espaces et ces retours à la ligne sans signification. C'est pourquoi certains concepteurs poussent le scrupule jusqu'à éliminer laborieusement ces caractères inutiles, afin de réduire le volume du code. Certains pensent même qu'ils améliorent ainsi le fonctionnement des navigateurs... ce qui n'est peut-être que de la superstition !

V - Les dernières pages  [retour en haut de la page]
1. De la théorie à la pratique
Dans les manuels, dans les cours (et aussi dans cet exposé !), toutes les opérations de création d'un site web se déroulent dans le bon ordre et sans accroc. Dans la pratique, chacun sait que l'on ne peut éviter les modifications et les corrections, parfois à la dernière minute, surtout quand on manque d'expérience. Il existe donc des pages dont le contenu ne peut être déterminé avec certitude que lorsque toutes les autres pages sont terminées. Nous examinerons dans un chapitre ultérieur le cas de la plus importantes d'entre elles, la carte du site (sitemap), bien qu'il en existe d'autres (le glossaire du site, par exemple). De telles pages ne peuvent être introduites que lorsque toutes les autres le sont déjà.
2. Pour ou contre une mise en ligne progressive
La plupart des sites grossissent progressivement, et ce pour des raisons multiples :
   on ne peut pas créer un site important d'un seul coup. Mieux vaut être présent sur le web avec un site incomplet, que d'y arriver après tous ses concurrents ;
  il est normal qu'un site évolue avec l'organisme qu'il représente sur le web, et cette évolution entraîne souvent l'introduction de nouvelles pages ;
  certains sites sont en évolution permanente -- ceux qui fournissent de l'actualité par exemple.
Ceci dit, l'addition de nouvelles pages entraîne la modification de la navigation, du plan du site, etc. et c'est un cauchemar pour le webmestre. Lors de la création du site, mieux vaut donc -- à notre point de vue -- créer toutes les pages (vides) d'un seul coup, puis à les remplir progressivement. Cette politique a pour conséquence la prolifération de l'image (on pourrait presque dire de l'icône) "en travaux". Les internautes n'aiment pas rencontrer cette image, car ils savent par expérience que certaines pages restent "en travaux" fort longtemps... voire indéfiniment. Certains webmestres refusent les pages incomplètes, et préfèrent activer les liens au fur et à mesure que des pages complètement terminées sont ajoutées au site.
3. La carte du site
Cette périphrase est la traduction littérale du mot anglais "sitemap". La page correspondante doit faire beaucoup plus que représenter la structure du site et guider l'internaute parmi ses différents niveaux. Elle doit lui permettre de déterminer le plus sûrement et le plus rapidement possible si l'information qu'il recherche se trouve sur le site et, dans l'affirmative, comment y accéder. On trouve de plus en plus souvent un moteur de recherche sur la carte des sites de grande taille, mais le service rendu est très variable.
    La carte du site joue donc un rôle considérable : elle doit être particulièrement soignée si l'on veut que le site soit performant. La carte du site ne peut être valablement implémentée que lorsque toutes les autres pages ont reçu leur contenu définitif. La carte doit être corrigée chaque fois qu'une page est modifiée, ou qu'une nouvelle page est créée.
    La carte du site possède généralement une structure et un présentation particulières, adaptées à sa fonction.
    Un chapitre particulier est consacré à la réalisation de la carte d'un site. La carte de cet exposé peut servir d'exemple... ou du moins il le devrait !

VI - Conclusion  [retour en haut de la page]
1. Créer un site web ? mais c'est très simple...
En moins d'une décennie, la création d'un site web est devenue une opération de plus en plus complexe, principalement en ce qui concerne la présentation des pages. Cette création reste cependant à la portée d'un particulier motivé, et a fortiori d'une petite entreprise, d'autant qu'il n'est pas nécessaire de faire compliqué pour être efficace.
2. Le contenu est roi
Certes, une belle présentation permet de se démarquer de concurrents offrant des produits ou des services voisins à des prix similaires. Mais ceci ne doit pas nous faire oublier que, dans un site web, le contenu, et les moyens que l'on fournit à l'internaute pour le retrouver, constituent l'essentiel. L'immense majorité des sites a pour fonction de fournir des informations aux internautes, pas des distractions -- à l'exception des sites spécifiquement destinés aux enfants (de 7 à 77 ans).
3. Une bonne navigation est essentielle
Ce n'est pas un drame si un site ne contient pas de compteur, ou d'image animée, ou de bouton qui change de couleur quand le curseur le survole. Mais c'est très grave si les internautes qui visitent le site ne trouvent pas l'information qu'ils recherchent, alors même qu'elle est là, parce qu'une page trop complexe est trop longue à charger, ou que la navigation est mal faite, ou qu'un lien interne est rompu. Ce n'est pas la présence d'un gadget amusant sur la page d'accueil qui retiendra bien longtemps les visiteurs : ils iront chercher leur bien ailleurs -- chez un concurrent par exemple.
4. Ne suivons pas la mode
Il faut apprendre à faire la distinction entre l'efficacité et l'amusement, la simplicité et la complication inutile, l'esthétique et le gadget -- et se méfier des modes, qui sévissent sur le web comme ailleurs.

Page précédentePlan de l'exposéPage suivante

Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base de données
Copyright © CERIG/EFPG 1996-2000