IUT_INFO - Modèle de page HTML

De façon à harmoniser a minima le contenu et le rendu des pages web offertes par le département informatique les éditeurs de pages web (fichier HTML) doivent respecter les quelques règles décrites ici.

Contenu

Chaque page doit avoir un titre qui commence par IUT_INFO - . Il suffit pour cela de fixer l'élément title dans les entêtes (head) de la page.

Chaque corps (body) de page doit avoir un titre et un paragraphe d'information sur la page elle même.

Pour le titre, on doit utiliser un élement h1, et un seul dans le fichier. Cet élément doit être le premier élément du corps de la page.
Pour l'information sur la page, le dernier élément du corps doit être un paragraphe dont l'id doit être ours (en référence à l'ours d'imprimerie). Ce paragraphe doit contenir au moins l'éditeur (le responsable) de la page et la date de dernière modification.

Si la page offre un menu de navigation il faut que ce menu soit présent sous la forme d'une liste non ordonnée (élément ul) dont l'id doit être menu. Cette liste doit apparaître dans le fichier juste après le titre. Le reste du texte doit être englobé dans une division (div) dont l'id doit être contenu.

Forme

La page doit utiliser pour son rendu le style présent à l'adresse http://www.iutinfo.fr/styles/iutinfo.css. Pour cela il suffit d'ajouter la ligne suivante parmi les éléments d'entête (head) de la page :

<link href='http://www.iutinfo.fr/styles/iutinfo.css' type='text/css' rel='stylesheet'/>

D'autres règles de styles peuvent évidemment être ajoutées, après l'inclusion de cette ligne, au grès de l'éditeur, soit en passant par des feuilles de styles (via des inclusions de liens, éléments link) soit en les spécifiant directement, via des éléments style.

Exemples

Pour ceux qui ne veulent pas s'embêter il suffit d'utiliser les modèles (XHTML Strict) suivants

modele_sans_menu.html

<body>
  <h1>Titre de la page</h1>

  <!-- Le contenu vient ici -->

  <p id='ours'>
    Éditeur&nbsp;:&nbsp;Prénom&nbsp;NOM
    /
    Fichier&nbsp;modifié&nbsp;le&nbsp;05&nbsp;octobre&nbsp;2007&nbsp;à&nbsp;1h40
  </p>
</body>

modele_avec_menu.html

<body>
  <h1>Titre de la page</h1>

  <ul id='menu'>
    <li>Choix 1</li>
    <li>Choix 2</li>
  </ul>

  <div id='contenu'>

    <!-- Le contenu vient ici -->

  </div>

  <p id='ours'>
    Éditeur&nbsp;:&nbsp;Prénom&nbsp;NOM
    /
    Fichier&nbsp;modifié&nbsp;le&nbsp;05&nbsp;octobre&nbsp;2007&nbsp;à&nbsp;1h40
  </p>
</body>

Conseils

Tant qu'à faire et pour respecter l'esprit d'HTML et l'universalité du concept du web, les pages ne doivent pas utiliser les éléments de formatage physique (qui ne donnent aucune information ne pouvant être déporté vers la feuille de style). La liste de ces balises (qui sont d'ailleurs dépréciées dans les versions récentes d'HTML) est la suivante :

font
tt
b
i
font
center
big
small
strike
s
u
dir
menu
hr

Il faut aussi éviter d'insérer des images pour des items d'une liste, ou utiliser des br ou des   pour séparer visuellement un bloc de texte d'un autre.