Apprendre en construisant des hypertextes ? – Christian Euriat –
Université Nancy 2 – 2002
Retour au sommaire de l’Etude de terrain
Un des objectifs principaux de l’enseignement de l’Option Informatique étant l’apprentissage de la programmation, il est demandé dans ce cadre aux élèves de réaliser leur site Internet directement en code HTML, sans se servir d’un logiciel de composition de pages ou de site, alors qu’il en existait déjà quelques-uns au fonctionnement relativement satisfaisant en 1997. Il n’est évidemment pas question d’exposer ici en détails ce qu’est le code HTML, mais simplement d’apporter quelques éclaircissements sans doute utiles.
On remarquera d’abord la signification des lettres qui constituent l’acronyme HTML : HyperText Markup Language. A la différence des outils logiciels que nous avons rencontrés au collège Alfred Mézières et au lycée Poincaré, le codage HTML est bien un outil informatique spécialement conçu pour écrire des hypertextes et les placer sur le réseau mondial Internet, mais aussi, si on le souhaite, sur n’importe quel poste ou réseau local. Comme son nom l’indique, le code HTML permet la réalisation des projets de Ted Nelson. Son principe de fonctionnement est très simple et a la particularité extrêmement intéressante d’être supporté par tous les ordinateurs indépendamment de leur puissance, de leur marque et surtout de leur système d’exploitation. Cette universalité technique d’HTML est très certainement une des explications de son succès.
L’idée de base d’HTML consiste à associer dans un même fichier informatique du texte au format international normalisé et des instructions d’un langage elles aussi codées au même format. Un logiciel appelé navigateur en français ou butineur en québécois lit le code et affiche le texte comme tel à l’écran. Les instructions sont reconnues par le navigateur grâce aux symboles < et > qui les encadrent. Quand le navigateur rencontre une expression entre ces deux marques, il l’interprète comme une instruction du langage qu’il exécute aussitôt. Un exemple simple : la séquence de code suivante « Le mot <i>hyper</i> est en italique » sera affichée « Le mot hyper est en italique ». Quand le navigateur rencontre l’expression <i> il affiche les caractères suivants en italique, jusqu’à ce que l’instruction </i> lui demande de cesser de le faire. Il existe bien sûr un assez grand nombre d’instructions permettant des actions de structuration du fichier, de mise en page et surtout d’affichage d’images et de positionnement de liens hypertextes [1]. En français, on appelle « balises » ces expressions entre < >, et « tags » en américain.
Il est important de comprendre que le fichier HTML ne contient pas les éventuelles images affichées sur la page écran qui lui correspond. Une instruction signale au navigateur qu’il doit aller chercher un fichier d’image et l’afficher à l’endroit indiqué. Le fichier d’image peut se trouver théoriquement sur n’importe quel ordinateur accessible par Internet dans le monde, il suffit d’en indiquer le chemin d’accès au navigateur. Bien entendu, les fichiers d’images et les fichiers HTML qui les appellent sont rangés la plupart du temps sur le même ordinateur, ce qui sera le cas dans notre étude. Une page comprenant du texte et trois photographies est donc contenue dans quatre fichiers, un fichier HTML qui la décrit complètement et trois fichiers d’images, eux-mêmes codés dans des formats définis. Un même fichier d’image peut être appelé par autant d’instructions d’affichage que nécessaire.
Les liens hypertextes sont bien sûr codés par des balises. Il est possible de placer des liens sur des chaînes de texte sans limite de longueur, une lettre, un mot, un paragraphe, etc. ainsi que sur des images ou des groupes d’images. A l’écran l’existence d’un lien peut se manifester par un changement de couleur des caractères, mais ce n’est pas obligé. Cela n’aurait d’ailleurs aucun sens pour un lien placé sur une image. La seule manifestation universelle de la présence d’un lien dans une page HTML est le changement de forme que subit le pointeur de la souris au moment où il passe dessus : il prend la forme d’une petite main, comme tout le monde le sait aujourd’hui. Techniquement, une balise de lien HTML désigne le chemin d’un nouveau fichier HTML à afficher. Ce dernier fichier peut se trouver dans le même répertoire (ou dossier) du même disque du même ordinateur, dans un autre répertoire, sur un autre ordinateur où qu’il se trouve dans le monde à la condition qu’il soit connecté en permanence à Internet [2]. On aura compris que l’affichage d’une image dans une page n’est in fine rien d’autre qu’un cas particulier de lien hypertexte, au même titre que ceux que nous avons étudiés avec les élèves du collège Alfred Mézières.
Comme nous l’avons déjà évoqué, la prescription de la tâche est assez sommaire. Les élèves doivent réaliser un site Web, soit un ensemble de pages illustrées si possible et reliées entre elles par des liens hypertextes. Il n’est pas exclu que des liens pointent vers des sites externes ailleurs sur Internet, mais ce n’est pas exigé, selon le professeur.
Le thème est choisi par chaque élève qui doit trouver la documentation utile. Au collège Alfred Mézières, les élèves devaient choisir entre une petite dizaine d’images (exercice sur le stalinisme), voire entre trois images seulement (exercices sur l’Italie fasciste et sur l’Allemagne nazie). Au lycée Poincaré, ils restaient limités aux thèmes définis par leur professeur. Ici, tout est possible théoriquement. Non seulement ils peuvent reproduire avec le scanner toute image qu’ils trouveraient dans leur environnement proche, mais ils sont en mesure de récupérer très facilement tout document sur un CDRom ou sur le réseau Internet [3].
Une partie de la tâche consiste donc à se procurer des textes et des images dans le sujet choisi. Ce travail mobilise les compétences qui sont celles de la recherche documentaire en général. Dans la mesure où les élèves ont ici l’opportunité d’aller chercher des documents sur le réseau Internet, des compétences particulières sont requises ou à construire, comme celles qui permettent de maîtriser la navigation dans le réseau hypertextuel d’Internet ou l’utilisation efficace des moteurs de recherche, ces sites Web destinés à faciliter la recherche des autres sites [4]. Des travaux ont été menés sur ce sujet, dont ceux de S. Alava et ceux de A. Tricot.
Le choix de ces textes et de ces images peut-être en lui-même intéressant pour nous, puisqu’on peut penser qu’il sera révélateur de la manière dont chaque élève se représente le concept, ou le groupe de concepts, dont il traite dans son sujet. Néanmoins, il ne faudrait pas négliger l’hypothèse difficilement vérifiable et moins encourageante selon laquelle les hasards de la navigation sur Internet ou les nécessités budgétaires du CDI ne soient largement déterminants dans les choix réellement opérés. Pratiquement, si j’en crois ce que j’ai obtenu comme information à ce sujet au cours de mes échanges verbaux avec une partie d’entre eux, les élèves partent d’un projet plus ou moins précis et sélectionnent les documents qui leur paraissent les plus pertinents parmi ceux qu’ils trouvent. Bien entendu, le choix peut être plus ou moins large selon les cas. Du point de vue de la difficulté cognitive de ce travail, il s’agit d’opérations de classification ou d’inclusion plus ou moins complexes ne devant pas poser en elles-mêmes de problèmes à des élèves de terminale de lycée âgés de seize à dix-huit ans censés maîtriser le niveau du raisonnement hypothético-déductif formel.
La question des compétences cognitives liées à la pratique de la programmation informatique est en dehors du champ de nos préoccupations. Il importe cependant de ne pas négliger que cette activité est partie intégrante de la tâche et qu’elle mobilise forcément des capacités cognitives à un moment ou à un autre. J’ai constaté que les élèves avaient presque tous rassemblé leurs ressources documentaires et avaient établi un schéma de leur site avant de passer à la programmation. Les deux parties de la tâche ne devraient donc pas tellement interférer. Mais il n’est pas à exclure que des difficultés de programmation aient un retentissement négatif sur la qualité des productions ou leur achèvement, rendant l’interprétation de celles-ci plus délicate pour nous.
Je ne voudrais pas oublier de noter que l’emploi que je fais du terme de « programmation » pour désigner l’activité des élèves pourrait être contesté par quelques informaticiens soucieux d’exactitude technique. En effet, le travail en question relève plus d’une mise au format (HTML en l’espèce) que d’une programmation au sens strict, même si le codage HTML inclut des instructions d’un langage informatique interprété, comme on l’a vu un peu plus haut [5]. Toutefois, dans la mesure où ces lignes ne développent pas une problématique technique, je me conformerai plutôt à l’usage commun qui assimile à de la programmation l’écriture de pages web directement en code HTML.
Les opérations intellectuelles apparemment requises pour la construction des sites web proprement dite sont principalement de l’ordre de la classification et de l’inclusion. La difficulté cognitive peut varier en fonction de la quantité d’éléments devant faire l’objet d’une classification ou du nombre de niveau d’inclusion. Un degré d’exigence cognitive supplémentaire relevant peut-être du niveau formel pourrait être atteint si des éléments appartenant à plusieurs classes à la fois sont désignés comme tels par un jeu de liens hypertextes approprié. Le degré d’abstraction des éléments manipulés peut aussi varier et avoir une incidence sur le niveau d’investissement cognitif requis.
Nous allons à présent examiner une par une les productions des élèves. Nous nous intéresserons particulièrement à la structure de chacune d’entre elles. Cette structure est-elle linaire, prend-elle la forme d’une arborescence ? Dans ce cas, quel est son degré de complexité en terme de nombre de branches et de niveaux de profondeur ? Présente-t-elle des liens transversaux offrant de réelles possibilités de navigation hypertextuelle ? Tout en nous réservant d’approfondir ce point dans la discussion qui suivra, nous serons attentifs à ce que je serais tenté d’appeler pour le moment la nature sémantique et la fonction syntaxique des liens installés.
Suite : Analyse des travaux des élèves
[1] Notons pour mémoire que des appendices à HTML se sont développés depuis ces dernières années, comme les langages Java ou Flash, qui offrent des possibilités beaucoup plus riches que le codage HTML de base, mais au détriment de l’universalité du système.
[2] Dans un exposé sur HTML et Internet, il faudrait bien sûr aborder les notions d’ordinateurs et de logiciels « clients » et « serveurs », ainsi que celle du protocole de transmission des fichiers HTTP (HyperText Transfer Protocol). Mais ces notions ne semblent pas indispensables à la compréhension de notre propos.
[3] Apparemment, la question des droits d’auteurs sur les documents récupérés ne semble pas les préoccuper beaucoup. Tout au plus certains élèves mentionnent-ils leurs sources.
[4] Ces compétences étaient travaillées pour elles-mêmes dans le cadre de l’Option Informatique en lycée. Elles seront désormais (à partir de 2001) évaluées dans le cadre du B2i (Brevet Informatique et Internet) délivrés à tous les élèves du primaire (B2i niveau 1) et du collège (B2i niveau 2) qui devront avoir reçu une formation de base aux outils « TICE » intégrée à la pratique de toutes les disciplines d’enseignement [BOEN n°42 du 23 novembre 2000 (encart)].
[5] Les pages HTML intègrent ou appellent maintenant de plus en plus souvent des éléments des programmes actif (JAVAÔ, Perl, ASP, etc.), qui ne sont pas du codage HTML, et qui permettent d’améliorer considérablement le dynamisme et l’interactivité des sites. On peut seulement regretter que ces enrichissements se fassent parfois au détriment de la portabilité universelle des pages produites.