Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

14. Tasser ou Couper

Ouaah ! Vous avez fait une page web ! Mais MAINTENANT, mon jeune érudit en HTML, il est temps de transformer votre longue et commune "page" en une "toile" d'informations reliées de manière logique.

Objectifs

Après cette leçon, vous pourrez :

Transformer une simple page web en une série de pages inter-reliées
Créer un modèle pour de nombreuses pages web
Construire des fonctions de navigation pour connecter ces pages web entre elles

Leçon

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.

Etes-vous un Tasseur ou un Coupeur? Ni l'un ni l'autre ? Les deux ?

Pour organiser l'information, il est parfois meilleur de "tasser" ou grouper les choses ; A d'autres moments, il vaut mieux les "couper". Faire défiler de longues pages web est souvent fastidieux. Une seule page longue prend plus de temps de chargement sur les réseaux qu'une série de pages plus courtes.

Dans bien des cas, vous pouvez repérer des endroits logiques pour "découper" l'information en plusieurs pages web. Pourtant, il n'y a pas de formule magique et les opinions divergent. Vous devez trouver un juste équilibre dans des pages séparant le contenu sans toutefois obliger le lecteur à cliquer dans une multitude d'écrans d'options et de sous-options avant d'arriver à l'information désirée. Il apparaît alors important de créer des liens hypertexte pour aider l'internaute à naviguer dans votre toile d'informations en lui fournissant des indications visuelles sur l'endroit de cette information à l'intérieur du site.

Jusqu'à maintenant, nous avons créé une page web avec un lien vers une page plus petite. Dans la leçon 8d, nous avons construit une table des matières avec une liste de liens ancres nommées vers les différentes sections de la leçon Web Volcan. Ces mêmes divisions paraissent être des points logiques où découper la longue page en de plus petites sous-pages.

Nous avons précédemment créé un répertoire appelé volc contenant nos deux fichiers HTML (index.html, la leçon, et msh.html, la seconde page web). Nous avons aussi un deuxième répertoire appelé pictures où se trouvent nos fichiers image.

carte de la nouvelle leçon Nous allons maintenant découper le fichier Web Volcan en une série de pages web reliées comme le montre ce diagramme schématique. Le point d'entrée est une page principale d'accueil, index.html, qui contient des liens pointant vers les différentes parties de notre leçon :

Introduction
[intro.html]
Terminologie des Volcans
[term.html]
Endroits Volcaniques aux USA
[usa.html]
Endroits Volcaniques sur Mars
[mars.html]
Projet de Recherche
[proj.html]

Chaque partie de la leçon pourra nous ramener à l'index ainsi qu'aux pages précédentes et suivantes. Notez également le lien dans les deux sens entre usa.html et msh.html.

Ou bien, si vous préférez un affichage plus traditionnel de la structure du répertoire :

structure de fichiers existante	nouvelle structure de fichiers
`Espace de Travail` `pictures` `lava.gif` `left.gif` `msh.gif` `seismo.jpg` `stamp.gif` `volcano` `volc.html` `msh.html`	`Espace de Travail` `pictures` `lava.gif` `left.gif` `msh.gif` `seismo.jpg` `stamp.gif` `volc` `index.html` `intro.html` `mars.html` `msh.html` `proj.html` `term.html` `usa.html`

NOTE : pour terminer cette leçon, nous aurons à créer plusieurs nouveaux fichiers et faire pas mal de copier/coller depuis nos anciens fichiers. Assurez-vous que vous êtes à l'aise dans le passage entre différentes applications et fenêtres sur votre ordinateur.

Nous avons aussi changé le nom du répertoire/dossier volcan en volc qui est plus court. (Nous essayons de garder nos URLs assez courts, sans qu'ils deviennent pour autant des messages cryptés)

La première chose à faire est de créer le nouveau fichier index.html qui sera la "page de garde" de notre leçon Web Volcan :

Tout d'abord, faites une copie de notre ancien fichier index.html et appelez-là old.html ou quelque chose comme ça. C'est une excellente habitude quand vous commencez à faire des changements importants dans vos pages web !
Maintenant, ouvrez le fichier index.html original dans votre éditeur de texte. C'est la leçon sur laquelle nous avons travaillé jusqu'à maintenant.
Nous allons utiliser l'image, le texte de la citation et la table des matières pour le contenu de notre page de titre. Pour cela, nous allons retirer les sections qui seront "découpées" et mises dans d'autres pages web.

Introduction

Références

  <hr>
  <h2><A NAME="intro">Introduction</A></h2>
  Un <b>volcan</b> est un endroit o˜ le magma, 
  des roches en fusion venant de l'intÈrieur d'une planËte, atteint la surface. 
   :

   :
  <dt>Lipman, P.W. et Mullineaux (eds). (1981)
  <dd><I>Les Eruptions du Mont St. Helens en 1980, Washington.</I>
  Rapport Professionnel des Etudes Géologiques U.S. 1250.
  </dl>

exemple

Maintenant, regardez la section commençant par "Dans cette Leçon...". Dans notre précédent exercice, nous avons utilisé les liens hypertexte pour aller vers une ancre nommée (e.g. <a name="term">..</a>) dans le même document (voir la leçon 8a). Nous allons modifier ces liens afin que chacun d'eux nous relie à une autre page web (que nous allons créer ci-dessous).

Trouvez la portion affichant :

<B>Dans cette Leçon...</B>
  <ul><i>
  <li><A HREF="#intro">Introduction</A>
  <li><A HREF="#term">Terminologie des Volcans</A>
  <li><A HREF="#usa">Endroits Volcaniques aux USA</A>
  <li><A HREF="#mars">Endroits Volcaniques sur Mars</A>
  <li><A HREF="#project">Projet de Recherche</A></i>
  </ul>

et modifiez-là comme suit :

<B>Dans cette Leçon...</B>
  <ul><i>
  <li><A HREF="intro.html">Introduction</A>
  <li><A HREF="term.html">Terminologie des Volcans</A>
  <li><A HREF="usa.html">Endroits Volcaniques aux USA</A>
  <li><A HREF="mars.html">Endroits Volcaniques sur Mars</A>
  <li><A HREF="proj.html">Projet de Recherche</A></i>
  </ul>

Comparez votre fichier HTML avec un exemple du document-type.

NOTE : Assurez-vous que vous comprenez la différence entre un lien écrit :
  <a href="#quest">aller aux questions</a>
et un autre qui s'écrit :
  <a href="quest.html">aller aux questions</a>

Ensuite, on doit créer les fichiers individuels pour les autres parties de notre leçon. Cela sera plus facile si nous construisons d'abord un fichier modèle que nous pourrons modifier pour chacune de nos différentes pages.

Dans votre éditeur de texte, créez un nouveau fichier appelé temp.html
Dans ce fichier, tapez le HTML suivant

exemple de modèle

HTML	Notes
<html> <head> <title>XXXXXXXX</title> </head> <body>	HEAD : Dans la portion head de chaque document, XXXXXXXX est le nom de la section
<H5>Web Volcan / <A HREF="index.html">Index</A> / <A HREF="xxxx.html">précédent</A> / <A HREF="xxxx.html">suivant</A></H5>	NAVIGATION : En haut de chaque page, on utilise un petit entête (h=5) pour créer les liens de navigation. `Index` nous ramène à la page d'accueil. `suivant` et `précédent` pointent sur les pages précédentes et suivantes. Vous devrez remplir les noms de fichiers adéquats à la place de `xxxx.html` dans chaque lien. Remarquez comme cette astuce fournit un indice visuel commun à chacune de nos pages web.
<h2>XXXXXXXX</h2> : : :	ENTETE : Utilisez un entête header=2 pour ajouter un titre pour la page.
<hr> <ADDRESS> <b><A HREF="index.html"> Ecrire le HTML</A> : XXXXXXXX </b><p> créé par Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A> <br> Etudes Volcaniques, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>Dernière mise à jour : 1er Avril 1995</TT> </ADDRESS> <p>	PIED DE PAGE ADRESSE : Notez que le pied de page indique maintenant le nom de la page web principale (avec un lien vers elle) ainsi qu'une ligne de texte reprenant le nom de la section actuelle `XXXXXXXX`. Placer le nom de la page ici ajoute un autre indice visuel important pour la localisation de cette page dans la structure du web que nous sommes en train de créer.
<tt>URL: http://www.bigu.edu/web/xxxxxxxx.html </tt> <p <body> </html>	URL : N'oubliez pas de modifier la ligne indiquant l'URL du document en tapant son nom de fichier `xxxxxxxx.html`

Maintenant, faites 5 copies du fichier modèle et apportez-y les changements appropriés :

Nom de Fichier	Section	Notes
`intro.html`	Introduction	Comme c'est la première section, retirez la ligne `<A HREF="xxxx.html">précédent</A>` de la section de navigation.
`term.html`	Terminologie des Volcans
`usa.html`	Endroits Volcaniques aux USA
`mars.html`	Endroits Volcaniques sur Mars
`proj.html`	Projet de Recherche	Comme cette section est la dernière, supprimez la ligne `<A HREF="xxxx.html">suivant</A>` de la barre de navigation.

Maintenant, ouvrez l'ancien fichier index.html (que nous avons renommé old.html) dans votre éditeur de texte. Copiez le HTML affiché sous l'entête <h2>...</h2> de chaque section et collez-le dans le fichier correspondant créé à l'étape précédente. Notez que les sections Endroits Volcaniques aux USA et Projet de Recherche incluent toutes deux des sous-sections avec des entêtes <h3>...</h3>.

Enfin, il vous faudra modifier le lien dans le fichier msh.html. Auparavant, il renvoyait à une ancre nommée dans la leçon principale (la section des Endroits Volcaniques aux USA) alors qu'il doit maintenant pointer vers le fichier usa.html. Ouvrez le fichier msh.html dans votre éditeur de texte et modifiez la ligne comme suit :

  <a href="usa.html"> 
  <img src="../pictures/left.gif" alt="** "> 
  Retour au
  <i>Web Volcan</i></a>

Juste pour être cohérent, vous devriez également modifier le pied de page comme ceci :

<HR>
<ADDRESS>
<B><A HREF="index.html">
Web Volcan</A> : <A HREF="usa.html">
Endroits Volcaniques aux USA</A> : 
Mont St. Helens</B> <p>

créé par Lorrie Lava, 
<A HREF="mailto:lava@pele.bigu.edu">
lava@pele.bigu.edu</A><br>
Etudes Volcaniques, 
<A HREF="http://www.bigu.edu/">
Big University</A><p>
<TT>Dernière mise à jour : 1er Avril 1995</TT>
</ADDRESS>
<p>
<tt>URL: http://www.bigu.edu/web/msh.html</tt>

</body>
</html>

Vérifiez Votre Travail

Comparez votre document avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Dans cette leçon, nous avons créé pas mal de nouveaux fichiers et il est très facile de faire des fautes de frappe.

Révision

Revoyons les grandes lignes de cette leçon :

Quels sont quelques avantages d'avoir plusieurs pages web courtes par rapport à une seule page longue ?
Que se serait-il passé si nous n'avions pas modifié le lien hypertexte du fichier msh.html ?
Quelles sont les aides à la navigation que nous avons ajouté à notre leçon ?

Informations Supplémentaires

D'un point de vue stylistique, vos pages web sont plus lisibles si les liens hypertexte sont intégrés dans le contenu. Cela devient de plus en plus important au fur et à mesure que vous créez de plus en plus de pages contenant de l'hypertexte pour les relier entre elles. Comparez :

liens "cliquez ici"

Au printemps 1980, la majorité des gens vivant au voisinage du Mont St. Helens tinrent compte de l'avertissement des scientifiques à propos d'une éruption volcanique imminente. (Cliquez ici pour voir une photo du Mont St. Helens) Malheureusement, plusieurs personnes insistèrent pour rester dans leurs foyers et périrent dans l'évènement du 18 Mai. Cette même année, des pics mesurés par des instruments d'enregistrement sismique amenèrent les chercheurs à supposer un possible accident à Long Valley, Californie, et ordonnèrent une évacuation importante de la région touristique de Mammoth. (Cliquez ici pour voir un sismomètre) Pourtant, rien ne se produisit et les habitants s'élevèrent vivement contre ce qu'ils avaient perçu comme une fausse alerte ayant causé une perte économique importante.

liens hypertexte intégrés

Au printemps 1980, la majoritÈ des gens vivant au voisinage du Mont St. Helens tinrent compte de l'avertissement des scientifiques ý propos d'une Èruption volcanique imminente. Malheureusement, plusieurs personnes insistËrent pour rester dans leurs foyers et pÈrirent dans l'ÈvËnement du 18 Mai. Cette mÍme annÈe, des pics mesurÈs par des instruments d'enregistrement sismique amenËrent les chercheurs ý supposer un possible accident ý Long Valley, Californie, et ordonnËrent une Èvacuation importante de la rÈgion touristique de Mammoth. Pourtant, rien ne se produisit et les habitants s'ÈlevËrent vivement contre ce qu'ils avaient perÁu comme une fausse alerte ayant causÈ une perte Èconomique importante.

Non seulement l'hypertexte "Cliquez ici..." coupe le flot du texte, mais le lien "ici" n'a pas de rapport avec l'élément décrit. Une suggestion : évitez d'écrire des choses comme "cliquez ici pour retourner à la page d'accueil". A la place, écrivez un lien propre, e.g. <a href="home.html">Page d'Accueil</a> -- les clics sont partie intégrante de l'utilisation du navigateur web. Rendez le contenu lisible et choisissez des mots qui indiquent clairement la nature du lien.

Travail Indépendant

Jetez un coup d'oeil à la page web que vous êtes en train de développer. Est-ce qu'elle devient trop longue ? Y-a-t-il une division logique où vous pourriez "couper" la page ? Créez une page d'accueil/index de votre site web et construisez les liens adéquats pour naviguer entre vos pages. Puis créez un modèle pour vos "sous-pages."

Maintenant, demandez à quelques amis/collègues de regarder vos pages. Préfèrent-ils les pages "coupées" ou la page "tassée" ? Peuvent-ils facilement trouver leur chemin dans votre site ?

A Suivre....

MAINTENANT, on arrive aux choses plus sympas avec le HTML étendu... Attachez vos ceintures !

ALLER A.... | Index des Leçons | précédent : "Blocs de Texte" | suivant : "HTML Standard et Etendu" |

Ecrire le HTML : Leçon 14 : Tasser ou Couper
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut14.html