Faire une page HTML

Le contenu

• Vous n'êtes pas maître de l'autre site.
• Les présentations peuvent être complètement différentes.

La présentation

Les remarques sur la présentation ne sont pas les mêmes suivant la façon dont vos pages sont générées.

• Pages codées ``à la main'' directement en tapant du HTML

  Ne faite aucune présentation tarabiscotée. En effet, faire la présentation prendra plus de temps que de rentrer l'information. Si le site est à vocation informative, laissez donc tomber la présentation (à moins que vous ne sachiez pas quoi mettre dans le site).

• Pages faites avec un éditeur HTML.

  Les présentations sont faites plus rapidement. Mais les inconvénients sont importants :

  • On ne ``voit'' plus le code HTML et celui-ci devient très complexe et généralement de moins en moins portable.
  • La présentation n'est pas celle que l'utilisateur risque de voir.
  • La présentation des pages devient souvent inconsistante.

• Pages générées par programme a priori

  Ici, il convient de passer un temps plus important sur la présentation, en effet celle-ci va être plaquée sur plusieurs pages. D'autre part, la présentation est alors indépendante du contenu. Le site est homogène et il est facile de changer la présentation sur toutes les pages, y compris sur le haut et le pied de page.

• Pages générées par script CGI.

  On utilise cette méthode plutôt que la précédente si les pages ne sont pas utilisées plus d'une fois. En effet, cette méthode a comme inconvénient de ne pas utiliser les PROXIES, le résultat n'est pas mis dans les caches.

  Les scripts CGI peuvent générer des pages dépendante du navigateur utilisé.

Du point de vue de l'utilisateur, il préfère les pages qui ressemblent aux pages classiques que l'on trouve sur le WEB, il n'aime pas les nouveautés.

Les liens

• Rien n'est plus stupide que les phrases du genre "cliquer ici" ou "suivre ce lien". Elles n'apportent pas d'information à la personne qui navigue, surtout si celle-ci ne lit que le texte des liens et rien d'autre. (C'est aussi utile pour certain moteur de recherche qui indexent aussi les pages en fonction des textes des liens qui pointent dessus, par exemple www.google.com)

  La bonne manière pour inclure les liens consiste à écrire le texte de la page comme si c'était un texte absolument normal. Puis ensuite d'ajouter les liens. Cela a aussi l'avantage d'être facilement imprimable sans devenir incompréhensible.

  Exemple:

  Here you can find my CV

  The following page refers to Computer Graphics' publications.

  Let me know you and your comments here please.

• ATTENTION les liens sur des titres ou des phrases entières ne sont pas perçus comme des liens par les surfeurs, ils ne les suivent donc pas.
• De nombreux surfeurs regardent l'URL afin de savoir ``où'' ils sont dans le site, faite donc des URL qui soient compréhensibles et donc des répertoires qui structurent correctement les informations.
• Évidemment, ne jamais déplacer un fichier, n'oubliez pas, on vous référence.
• Redondance des liens vers une même information, tout le monde ne la classe pas au même endroit.
• Les URL doivent contenir le minimum de caractères bizarres afin de pouvoir être copiées sur n'importe quel système d'exploitation.
• Ne pas prendre un bord de taille 0 pour une image qui est un lien.

Les fontes et la couleur

Concernant les couleurs, utilisez toujours des couleurs contrastées. Et pensez à modifier la couleur du fond si vous modifiez la couleur de la fonte. De même si vous changez la couleur du fond ou si vous mettez une image. Évitez d'utiliser le blanc car vous ne pourrez pas faire plus lumineux, idem pour le noir.

Ne jamais faire de textes clignotants car on peut difficilement les lire et ils ralentissent la vitesse de lecture sur le reste de la page (idem pour les animations GIF).

Langue

Si vous n'avez pas beaucoup de temps pour gérer les pages ou si vous n'êtes pas très bon en anglais, je conseille de faire des pages bilingues symétriques. Ceci permet au lecteur de regarder l'autre langue pour essayez de mieux comprendre.

Même dans les cas où la traduction n'est pas primordiale, faites la pour les titres et les mots-clefs.

Corrigez les fautes d'orthographe et de grammaire, surtout sur la page d'accueil. C'est important si vous voulez que le lecteur se donne la peine de rester sur le site.

Images

• N'oubliez pas le champ ALT qui décrit en texte le contenu de l'image. Ceci permet aux utilisateurs de savoir si l'image les intéresse avant de la charger. C'est aussi utilisé par les moteurs de recherche (indexation)
• Ne faites jamais d'image contenant du texte, donnez directement le texte.
• Si vous mettez des images pour améliorer la présentation, il vous faudra un travail considérable pour que le résultat soit correct. Je déconseille donc de se lancer là dedans si un graphiste n'est pas là pour vous conseiller.
• Avez-vous le droit (copyright) d'inclure l'image ?
• Les champs WIDTH et HEIGHT doivent avoir des valeurs égales à celle de l'image, sinon le résultat n'est pas joli ou le transfert trop long.
• Ne pas utiliser d'image pour faire des bullet vous perdez en sémantique et l'indentation n'est pas faite correctement.

• Les images permettant d'avoir un compteur (elle peuvent ne contenir qu'un seul pixel).
• Les logos
• Les cartes géographiques (plan d'accès, ...)
• Les graphismes de statistique.
• Toutes les images contenant une information réelle.

Si c'est possible, il vaut mieux utiliser une grande image plutôt que plusieurs petites les unes à coté des autres. Cela permet de gagner du temps de chargement.

Concernant le positionnement des images. Vous pouvez utilisez des tableaux, mais attention vous ne connaissez pas la taille du texte par rapport à celle de l'image. L'utilisation des tableaux est malheureusement lourde. La méthode la plus simple est de centrer ou cadrer l'image à droite (pas à gauche, sinon le résultat de la présentation est aléatoire...)

Frames

Inconvénients :

• Lent au chargement.
• Lent à l'exécution.
• Mal supporté par les navigateurs.
• Ajoute de la complexité à la création des liens (top ou non).
• Ce qui est sur l'écran ne peut être représenté directement par une URL...
• Si la frame affiche un index, cela sera le même quel que soit la page.

Taille de fichier

Les gros fichiers sont longs à charger, il faut en faire des petits. Par contre découper en nombreux petits fichiers augmente le temps de transfert et surtout entrecoupe le temps de lecture par des temps d'attente, il faut trouver un juste milieu (10Ko max?)

N'oubliez pas que pour les autres, votre page se chargera beaucoup plus lentement.

Le texte

Il faut pouvoir lire le texte en diagonal, seuls quelques mots par paragraphe sont lus, il faut donc faire de petits paragraphes avec une idée par paragraphe. D'autre part, les listes (LI) avec des lignes courtes ont plus de chance d'être lues.

Le texte ne doit pas avoir un style commercial faisant référence de manière publicitaire à la qualité des choses dont on parle. Celà ralentit la lecture et énerve le lecteur.

En appliquant les quelques critères précédents vous pouvez doubler les chances que l'on suive des liens indiqués dans votre page.

Divers

• Pas de «page en construction».
• Mettre un indexeur sur la page d'accueil du site si celui-ci est gros.
• Faites votre page pour une taille d'écran raisonnable.
• Vérifier votre page avec plusieurs navigateurs et configurations de ceux-ci.
• Pour mélanger toutes les langues. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
• Pour indiquer sa langue <META HTTP-EQUIV="Content-Language" CONTENT="fr">
• <META LANG="fr" NAME="Keywords" CONTENT="jeu, go, jeu de go, fédération, baduk, weichi">
• Signez et datez les pages. Pour la signature incluez le nom de la page.
  <a href="mailto:Welcome.html&lt;exco@ligim.univ-lyon1.fr&gt;">
• Offrez la possibilité de voir l'ensemble du site en un clin d'oeil.

Validation