La programmation et les Limites HTML

**Signets :**
Leçons suivantes	Leçons précédentes	Bas de page

Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet

La Programmation et les Limites HTML :

La Programmation et les Limites HTML :

Cette leçon constitue une introduction à la programmation d'applications sur les serveurs Web. Destiné à mettre en évidence les limites du langage, il montrera comment la programmation permet de s'en affranchir.

Pour illustrer cette leçon, nous travaillerons sur un exemple concret emprunté au mode de présentation des données que l'on trouve sur certains micro-odinateurs. Dans le Finder (chercheur ou recherche) de certains ordinateurs, il est possible de présenter le contenu d'un répertoire de plusieurs façons. La figure ci-dessous montre ainsi deux dossiers présentés différemment :

L'image de gauche présente le contenu du répertoire à l'aide des icônes, tandis que celle de droite, les différents éléments du dossier sont présentés dans une liste précédée d'une ou deux icônes. La première icône (un petit triangle) est présente chaque fois que l'élément est un répertoire ou une liste. Si l'on clique sur ce petit triangle, il pivote vers le bas, tandis que le contenu du répertoire ou d'une liste est développé légèrement sur la droite pour indiquer la hiérarchie des répertoires.

Dans la figure ci-dessus, on a cliqué sur le triangle du dossier "channel" ou sur "rss version 2.0" et est apparu le contenu de cette liste. Si l'on clique à nouveau sur ce petit triangle, on "referme" le répertoire ou la liste et on revient à la situation précédente.

Est-il possible de concevoir un modèle analogue avec le langage HTML ? Avant de répondre à cette question, essayons de résoudre l'exercice suivant :

Prenons le menu d'un restaurant comportant trois rubriques :

Les entrées

Les viandes

Les desserts

Chacune de ces rubriques, contient les plats de sa catégorie.

Pour les entrées :

Salade

Charcuterie

Melon

Pour les viandes :

Entrecôte

Poulet

Escalope

Pour les desserts :

Crème renversée

Glaces

Fruits

On veut présenter une page HTML dont le mode de fonctionnement sera identique à celui que nous avons décrit pour les répertoires ou listes du Finder des micro-ordinateurs :

La première page HTML affichera simplement trois lignes comportant les trois rubriques principales.

Cliquer sur le titre d'une rubrique lorsque son contenu n'est pas affiché, provoque l'affichage, sous ce titre, des plats composants cette rubrique (mode ouverture d'une rubrique ou mode déplié).

Cliquer sur le titre d'une rubrique lorsque son contenu est affiché fait disparaître les plats pour ne laisser que le titre (mode fermeture d'une rubrique ou mode replié).

Dans les deux cas, (fermer ou ouvrir une rubrique), l'état d'affichage des autres rubriques est sauvegardé.

On ne se préoccupera pas du petit triangle qui tourne. ce n'est qu'un aspect graphique simple à maîtriser.

Avec trois catégories, nous aurons à décrire 2³ situations correspondant aux affichages souhaités. Le tableau de la figure 1, résume toutes les combinaisons possibles d'affichage des différentes rubriques. Le signe indique que le contenu de la rubrique est affiché, le signe indique que seul est affiché le nom de la rubrique. Chaque colonne correspond à un fichier :

Le fichier F1 (F1.html) :

Il comporte simplement les trois titres de rubriques "Entrées, Viandes et Desserts" puisque toutes les cases de la colonne F1 ont la valeur .

Les pointeurs sur les titres de rubriques prévoient les états futurs :

Entrées est un pointeur sur F5 car, lorsqu'on clique sur Entrées, on doit afficher la liste des entrées et l'intersection entre la ligne "Entrées" et la colonne F5 donne bien la valeur .

F5 satisfait aussi la condition de sauvegarde puisque l'on part de F1 où Viandes et Desserts n'étaient pas affichés, pour arriver à un état où ils ne sont toujours pas affichés.

Viandes est un pointeur vers F3 car, lorsqu'on clique sur Viandes, la liste des viandes doit s'afficher et l'intersection entre la ligne "Viandes" et la colonne F3 donne bien la valeur .

F3 satisfait aussi la condition de sauvegarde puisque l'on part de F1 où les Entrées et Desserts n'étaient pas affichés, pour arriver à un état où ils ne sont toujours pas affichés.

Desserts est un pointeur vers F2 car, lorsqu'on clique sur Desserts, on doit afficher la liste des desserts et l'intersection entre la ligne "Desserts" et la colonne F2 donne bien la valeur .

F2 satisfait aussi la condition de sauvegarde puisque l'on part de F1 où les Entrées et Viandes n'étaient pas affichés, pour arriver à un état où elles ne sont toujours pas affichés.

Les trois lignes de code concernant les liens hypertexte seront de couleur bleue claire, afin de pouvoir les différencier de certains codes de la page HTML du fichier F1.html s'écriront donc :

<HTML>

<HEAD>

<TITLE> Fichier 1 </TITLE>

<STYLE TYPE="text/css">

</STYLE>

<SCRIPT LANGUAGE = "JavaScript">

function Visibilitee ( Masquer_Demasquer )

{

var targetElement; targetElement = document.getElementById ( Masquer_Demasquer ) ;

if ( targetElement.style.display == "none" )

{

targetElement.style.display = "" ;

}

else

{ targetElement.style.display = "none" ;

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR="#DADADA" LINK="#FF0000" ALINK="#FF00FF" VLINK="#000000"> <BR>

<CENTER> <H1> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H1> </CENTER> <BR> <BR>

<H1>          <a href="" onclick="javascript:Visibilitee('id_div_1'); return false;" >Menu Restaurant</a> </H1>

<div id="id_div_1" style="display:none;">

<H2>                 <img src="images/Petite_Main.gif">   <a href="F5.html">Entrées</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F3.html">Viandes</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F2.html">Desserts</a> </H2>

</div>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 1]

Le fichier F2 (F2.html) :

Son état présent, affiche les titres de la rubrique Entrées, Viandes, le titre de la rubrique Desserts "suivi" de la liste des desserts. Les pointeurs affectés aux titres de la rubrique doivent prévoir l'état futur. Le même raisonnement que précédemment nous conduit ainsi à dire que :

Entrées pointe maintenant vers F6 (que l'on notera à l'avenir E'F6).

Viandes pointe vers F4 (que l'on notera V'F4).

Desserts pointe vers F1 (que l'on notera D⁺' F1, le signe (⁺) en exposant indiquant l'affichage du contenu de la rubrique).

Le fichier F2.html contiendra les lignes suivantes (toujours en couleur bleue claire) :

<HTML>

<HEAD>

<TITLE> Fichier 2 </TITLE>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<BODY BGCOLOR="#DADADA" LINK="#FF0000" ALINK="#FF00FF" VLINK="#000000"> <BR>

<CENTER> <H1> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H1> </CENTER> <BR> <BR> <BR>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F6.html">Entrées</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F4.html">Viandes</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F1.html">Desserts</a> </H2>

<ul> <H2>

<ul>

<li> Crème renversée </li>

<li> Glaces </li>

<li> Fruits </li> </H2>

</ul>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 2]

On applique la même méthode pour les fichiers F3 à F6. Donnons simplement les relations pour ces fichiers.

F3 = E'F7, V⁺'F1, D'F4

F4 = E'F8, V⁺'F2, D⁺'F3

F5 = E⁺'F1, V'F7, D'F6

F6 = E⁺'F2, V'F8, D⁺'F5

F7 = E⁺'F3, V⁺'F5, D'F8

F8 = E⁺'F4, V⁺'F6, D⁺'F7

Une fois les huit fichiers ainsi décrits, on peut procéder aux essais ... Si l'on ne s'est pas trompé, tout marchera correctement ; sinon, il restera à rééditer les huit fichiers pour vérification. Toutefois, nous allons simplifier votre tâche, en effectuant le décodage que nous avions évoqué ci-dessus, et que, nous allons éditer les 6 autres fichiers HTML.

Entrées pointe maintenant vers F7 (que l'on notera E'F7).

Viandes pointe vers F1 (que l'on notera V⁺'F1).

Desserts pointe vers F4 (que l'on notera D'F4,

Le fichier F3 (F3.html) :

<HTML>

<HEAD>

<TITLE> Fichier 3 </TITLE>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<BODY BGCOLOR="#DADADA" LINK="#FF0000" ALINK="#FF00FF" VLINK="#000000"> <BR>

<CENTER> <H1> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H1> </CENTER> <BR> <BR> <BR>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F7.html">Entrées</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F1.html">Viandes</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F4.html">Desserts</a> </H2>

<ul> <H2>

<ul>

<li> Entrecôte </li>

<li> Poulet </li>

<li> Escalope </li> </H2>

</ul>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 3]

Entrées pointe maintenant vers F8 (que l'on notera E'F8).

Viandes pointe vers F2 (que l'on notera V⁺'F2).

Desserts pointe vers F3 (que l'on notera D⁺'F3,

Le fichier F4 (F4.html) :

<HTML>

<HEAD>

<TITLE> Fichier 4 </TITLE>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<BODY BGCOLOR="#DADADA" LINK="#FF0000" ALINK="#FF00FF" VLINK="#000000"> <BR>

<CENTER> <H1> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H1> </CENTER> <BR> <BR> <BR>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F8.html">Entrées</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F2.html">Viandes</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F3.html">Desserts</a> </H2>

<ul> <H2>

<ul>

<li> Entrecôte </li>

<li> Poulet </li>

<li> Escalope </li> </H2>

</ul>

<ul> <H2>

<ul>

<li> Crème renversée </li>

<li> Glaces </li>

<li> Fruits </li> </H2>

</ul>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 4]

Entrées pointe maintenant vers F1 (que l'on notera E⁺'F1).

Viandes pointe vers F7 (que l'on notera V'F7).

Desserts pointe vers F6 (que l'on notera D'F6.

Le fichier F5 (F5.html) :

<HTML>

<HEAD>

<TITLE> Fichier 5 </TITLE>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<BODY BGCOLOR="#DADADA" LINK="#FF0000" ALINK="#FF00FF" VLINK="#000000"> <BR>

<CENTER> <H1> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H1> </CENTER> <BR> <BR> <BR>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F1.html">Entrées</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F7.html">Viandes</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F6.html">Desserts</a> </H2>

<ul> <H2>

<ul>

<li> Salade </li>

<li> Charcuterie </li>

<li> Melon </li> </H2>

</ul>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 5]

Entrées pointe maintenant vers F2 (que l'on notera E⁺'F2).

Viandes pointe vers F8 (que l'on notera V'F8).

Desserts pointe vers F5 (que l'on notera D⁺'F5.

Le fichier F6 (F6.html) :

<HTML>

<HEAD>

<TITLE> Fichier 6 </TITLE>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<BODY BGCOLOR="#DADADA" LINK="#FF0000" ALINK="#FF00FF" VLINK="#000000"> <BR>

<CENTER> <H1> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H1> </CENTER> <BR> <BR> <BR>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F2.html">Entrées</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F8.html">Viandes</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F5.html">Desserts</a> </H2>

<ul> <H2>

<ul>

<li> Salade </li>

<li> Charcuterie </li>

<li> Melon </li> </H2>

</ul>

<ul> <H2>

<ul>

<li> Crème renversée </li>

<li> Glaces </li>

<li> Fruits </li> </H2>

</ul>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 6]

Entrées pointe maintenant vers F3 (que l'on notera E⁺'F3).

Viandes pointe vers F5 (que l'on notera V⁺'F5).

Desserts pointe vers F8 (que l'on notera D'F8.

Le fichier F7 (F7.html) :

<HTML>

<HEAD>

<TITLE> Fichier 7 </TITLE>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<BODY BGCOLOR="#DADADA" LINK="#FF0000" ALINK="#FF00FF" VLINK="#000000"> <BR>

<CENTER> <H1> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H1> </CENTER> <BR> <BR> <BR>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F3.html">Entrées</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F5.html">Viandes</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F8.html">Desserts</a> </H2>

<ul> <H2>

<ul>

<li> Salade </li>

<li> Charcuterie </li>

<li> Melon </li> </H2>

</ul>

<ul> <H2>

<ul>

<li> Entrecôte </li>

<li> Poulet </li>

<li> Escalope </li> </H2>

</ul>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 7]

Entrées pointe maintenant vers F4 (que l'on notera E⁺'F4).

Viandes pointe vers F6 (que l'on notera V⁺'F6).

Desserts pointe vers F7 (que l'on notera D⁺'F7.

Le fichier F8 (F8.html) :

<HTML>

<HEAD>

<TITLE> Fichier 8 </TITLE>

<STYLE TYPE="text/css">

</STYLE>

</HEAD>

<BODY BGCOLOR="#DADADA" LINK="#FF0000" ALINK="#FF00FF" VLINK="#000000"> <BR>

<CENTER> <H1> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H1> </CENTER> <BR> <BR> <BR>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F4.html">Entrées</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F6.html">Viandes</a> </H2>

<H2>                 <img src="images/Petite_Main.gif">   <a href="F7.html">Desserts</a> </H2>

<ul> <H2>

<ul>

<li> Salade </li>

<li> Charcuterie </li>

<li> Melon </li> </H2>

</ul>

<ul> <H2>

<ul>

<li> Entrecôte </li>

<li> Poulet </li>

<li> Escalope </li> </H2>

</ul>

<ul> <H2>

<ul>

<li> Crème renversée </li>

<li> Glaces </li>

<li> Fruits </li> </H2>

</ul>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 8]

Imaginons maintenant que nous voulions compléter ce menu, par une catégorie "poissons", une catégorie "fromage" et une catégorie "pizza". On passe ainsi de trois à six catégories, et le nombre de fichiers à éditer est de 2⁶ soit 64 fichiers !! Ce nombre est suffisamment grand et la méthode que nous venons de décrire est suffisamment fastidieuse pour ne pas se lancer dans un tel travail.

Ce petit exercice avait simplement pour but de montrer les limites du langage. Les présentations de données telles qu'on les voit sur les écrans des ordinateurs ne sont pas toujours réalisables facilement en HTML.

Le recours à la programmation permet de repousser certaines limites. Il permet de résoudre des listes de ce type sans limite du nombre de catégories.

Nous verrons plus tard au cours de nos leçons qu'il existe des listes repliables et dépliages sans pour autant d'avoir autant de pages HTML comme l'exercice ci-dessus.

Et enfin, pour terminer cette leçon, nous allons faire un bref résumé :

Nous résumons cette leçon ci-après :

Cette leçon est avant tout un exercice montrant les limites du langage HTML que nous avions déjà évoqué.

En résumé, rappelons que le niveau actuel d'HTML ne permet pas tous les types de représentation de l'information que l'on a l'habitude de trouver dans les applications d'informatique ou de micro-informatique.

L'interface de programmation peut cependant apporter une réponse très favorable à ces limitations dans de nombreux cas.

Fin de cette quinzième leçon, la prochaine sera consacrée aux formulaires concernant le langage HTML.

Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet.	Haut de page
Page précédente	Page suivante

Nombre de pages vues, à partir de cette date : le 27 Décembre 2019

Mon audience Xiti

Send an email to Corporate Webmaster for any questions or comments about this Web Site.

Web Site Version : 11. 5. 12 - Web Site optimization 1280 x 1024 pixels - Faculty of Nanterre - Last modification : JANUARY 02, 2020.

This Web Site was Created on, 12 JUNE 2019 and has Remodeled, in JANUARY 2020.