Architecture d'un document hypertextuel à cadres

Les cadres ("frames"), utilisés judicieusement, peuvent grandement améliorer la navigation d'un document hypertextuel. L'hypertextualité du document se définit par l'emploi de liens pour passer d'un endroit à l'autre du document (liens intratextuels) ou d'un endroit du document à un autre document (liens intertextuels). Un document peut ne comprendre qu'un fichier texte (nous ne tenons pas compte des éventuels fichiers images ou autres) ou plusieurs fichiers textes. L'emploi des cadres suppose normalement un document à plusieurs fichiers textes.

Le but du présent document est de donner au lecteur un modus operandi pour la confection de l'architecture de documents à cadres.

1. Fichier de départ déclaramt et définissant les cadres

1.1. Descriptif

Ce fichier se nommera normalement index.html, qui est la valeur de défaut du fichier de base d'un répertoire. Prenons comme modèles 1) le fichier de départ du document sur le Théâtre de l'absurde, et 2) celui du document sur la Mesure du temps. Pour apprécier l'architecture du fichier, il faut en regarder la structure profonde, celle du codage html (n'est reproduit que le codage nécessaire) :

1.1.1. Architecture globale

Le fichier de déclaration-définition a une tête ("head"), mais pas de corps ("body"). Ce dernier sera fourni par les fichiers qui occuperont les deux cadres (fichiers menu.html et text.html, dans le cas du premier modèle).

1.1.2. La variable title et la visibilité du document dans le Web

Un moteur de recherche comme Google privilégie la zone <title>...</title> dans l'affichage de ses résultats (les trois niveaux hiérarchiques principaux sont : 1) le contenu de <title>...</title> ; 2) le contenu des éventuels champs méta compris dans la tête du document ; 3) le texte du corps). À cet égard, le premier document (<title>Exposé oral</title>) est moins visible dans le Web que le second (<title>R. Wooldridge, La mesure du temps</title>).

1.1.3. La variable frameset

  • La valeur de l'attribut cols. La largeur d'une colonne, c'est-a-dire d'un cadre, peut être exprmée : soit a) en termes relatifs par rapport à la largeur de l'écran, exemple cols="20%, 80%" du modèle 1 ; soit b) en termes absolus, exemple cols="180,*" du modèle 2. Dans ce deuxième cas, 180 = 180 pixels (colonne 1, cadre de gauche) ; l'astérisque * à l'endroit de la colonne de droite signifie "reste de la largeur de l'écran".

    Nota : À la place de l'attribut cols, on pourrait mettre l'attribut rows, si on souhaite une disposition verticale plutôt qu'horizontale des cadres (cf. modèle 3).

  • L'attribut frameborder. Certains attributs n'ont pas besoin d'être exprimés pour prendre effet ; ils auront alors leur valeur de défaut, qui dans le cas de frameborder est "yes" (voir modèle 2). Pour qu'il n'y ait pas de bordure entre les deux cadres, il faut déclarer frameborder="NO" (modèle 1).

    1.1.4. La variable frame

    Les deux attributs src (= "source") et name doivent être déclarés et avoir une valeur spécifique.

  • Attribut name. Dans le cas du modèle 1, le nom des cadres, nécessaire pour qu'on puisse déclarer une cible ("target"), est "menu" pour le cadre de gauche et "princ" (on peut penser à "principal") pour le cadre de droite ; les deux noms du modèle 2 sont respectivement "menu" et "texte". C'est l'ordre des occurrences de cette variable qui détermine qu'il s'agit soit du cadre de gauche, soit de celui de droite.

  • Attribut src. La valeur de l'attibut "src" est le nom du fichier qui va être affiché soit dans le cadre de gauche, soit dans le cadre de droite : respectivement menu.html et text.html (modèle 1), ou temps_menu.htm et temps.htm (modèle 2). L'ordre des attributs est indifférent. On notera en passant que menu.html et menu.htm seraient les noms de deux fichiers différents.

    1.1.5. La mise en page et la casse des caractères

  • La mise en page de la structure de surface (ce qui est affiché à l'écran du navigateur Web) est assurée par le balisage html. La "mise en page" des éléments de la structure profonde est indifférente pour ce qui est des résultats de surface. Ainsi la disposition des éléments du fichier de départ du modèle 1, donnée ici sous la forme donnera strictement le même résultat en surface qu'une disposition telle que La supériorité de la première disposition réside dans sa plus grande lisibilité pour l'auteur ou l'éditeur humain.

  • La casse des caractères des méta-termes (haut de casse ou bas de casse) est indifférente. Ainsi, <title>...</title> = <TITLE>...</TITLE> = <TITLE>...</title> = <TiTlE>...</tItLe> = etc. Les méta-termes sont tous en anglais américain (<center>, mais pas <centre>) ; ils ne portent aucun signe diacritique. De même, dans les entités libres, tels que les noms de fichiers, on évite l'emploi de signes diacritiques ; ainsi matieres.htm est un nom bien formé, alors que matières.htm ne l'est pas.

    Notons que si la casse des méta-termes est indifférente, elle ne l'est pas dans le cas des noms de fichiers : par exemple, escrime.GIF et escrime.gif seront deux fichiers différents. (À cet égard, les tolérances d'un logiciel comme Word rendent celui-ci partiellement incompatible avec le Web.)

    1.2. Création

    La méthode la plus simple est de faire du copier-coller de la structure profonde d'une page existante (cf. les deux modèles ci-dessus) et d'y apporter les modifications voulues dans un logiciel simple tel que WordPad ou Notepad (utilitaires du système Windows), voire Word, etc. Il faut sauvegarder le fichier en format Text Document, lequel est le format de défaut de Notepad ; dans WordPad il faut sélectionner le format Text Document dans le menu et ne pas faire attention au message disant que "formatting will be lost" (cf. 1.5. ci-dessus). On peut nommer le fichier directement index.html (cf. 1.1).

    Si les modifications comprennent des lettres diacrisées on peut utiliser la méthode ALT pour les caractères de l'alphabet ASCII. Pour les autres, on peut taper ce qu'on appelle des entités html telles que :

    Exemple :

    2. La table des matières (cadre de gauche)

    Modèles 1 (Théâtre) et 2 (Mesure). N'est donnée que la structure profonde essentielle de chacun 

    2.1. Descriptif

    2.1.1. Variable title

    Comme le contenu de <title>...</title> du fichier index.html reste affiché, quels que soient les fichiers affichés dans les cadres individuels, cette variable perd son importance et peut même rester vide. En revanche, comme un moteur de recherche affiche les fichiers particuliers sans cadres, on pourra préférer remplir cette zone (par exemple : K. Bellavance, L'Escrime / Fencing: Table).

    2.1.2. Variable body

    La couleur de fond du corps d'un document est par défaut le blanc (#ffffff). On peut préciser soit l'attribut bgcolor ("background color"), par exemple bgcolor=#fdf9d7 (modèle 2), soit l'attribut background, en précisant le nom d'un fichier image (dans le modèle 1: marble.gif).

    2.1.3. Variables ol, ul et li (modèle 1)

    La valeur de défaut de l'ordonnement des items <li> ("list item") d'une liste ordonnée <ol> ("ordered list") est un chiffre arabe. Celle des items d'une liste non ordonnée <ul> ("unordered list") est un rond (cf. le modèle 1 en structure de surface). Comme la déclaration de listes (ol ou ul) cause une mise en retrait, on pourra préférer ne pas perdre cet espace à gauche (voir modèle 2).

    2.1.4. Variable a et attributs href et target

  • La variable a ("anchor"), clé du lien hypertextuel, a deux attributs de base : href, toujours explicite, pour le point de départ et name, parfois implicite, pour le point d'arrivée. Dans tous les liens du modèle 1 et le premier lien du modèle 2, le point d'arrivée est le début d'un fichier ; dans ce cas, on n'a pas à déclarer un <a name... au point d'arrivée. Dans les autres liens du modèle 2, les valeurs de href indiquent que le point d'arrivée est un endroit non initial d'un fichier : par exemple, HREF="temps.htm#1" signifie que le point d'arrivée est un endroit nommé #1 du fichier temps.htm. Cet endroit sera marqué dans le fichier temps.htm par la balise <a name="1"> (sans dièse).

  • L'attribut target est nécessaire lorsqu'on veut que le fichier sollicité par un lien s'ouvre dans un autre cadre ou une autre fenêtre. Ainsi, tous les fichiers sollicités par la table des matières du modèle 1 s'ouvrent dans le cadre de droite, nommé princ dans le fichier de départ index.html. De même, les sections de fichier sollicitées par la table du modèle 2 s'ouvrent dans le cadre de droite, nommé texte dans index.html.

    2.2. Création

    À nouveau, nous allons illustrer la méthode copier-coller pour la création d'une table des matières. Il serait possible, bien entendu, de le faire dans un logiciel "WYSIWYG" de type Composer de Netscape ou Mozilla, ce que nous ferons dans la troisième partie du présent document. On fera donc comme à 1.2.

    Exemple :

    Ce qui donne le résultat de surface suivant :

    3. Les fichiers du texte du document

    Ces fichiers peuvent être produits avec un logiciel "WYSIWYG" comme Composer de Netscape ou Mozilla. Le seul aspect que nous allons examiner en détail ici est la question des liens hypertextuels renvoyant à d'autres documents (documents ou sites Web concernant l'escrime, par exemple).

    Comme il s'agit de liens intertextuels, ce serait une faute, à la fois sur le plan pratique de la consultation des documents (on veut pouvoir regarder simultanément ou parallèlement et le texte discutant et le texte discuté), et aussi d'un point de vue éthique, d'afficher le document d'arrivée dans les cadres du texte discutant. En faisant de la sorte, et on perd de vue le texte discutant et on fait appartenir le document ou site du texte discuté au document du texte discutant (le titre et l'adresse affichés en haut de l'écran ne changent pas).

    Il faut donc déclarer un target qui fasse ouvrir les documents discutés dans une autre fenêtre, appelée, par exemple, sites. Dans Composer, chaque fois que l'on veut créer un lien, on procède comme suit. Choisir Insert, puis Link. Copier-coller dans la case l'adresse du site d'arrivée, puis cliquer sur Advanced Edit. Si l'attribut "target" ne figure pas déjà dans la case principale, choisir "target" dans la liste des attributs du menu en bas, puis taper sites dans la case Value. Ensuite cliquer sur les deux OK pour sortir. L'effet de l'ajout de target="sites" est que chaque document ciblé s'ouvrira dans une deuxième fenêtre.