FRANCAIS francophone2.gif ANGLAIS

 

 

Created the, 12/06/2019

 Updated the, 02/01/2020

Visiteurs N°  


Home
Back to Main Sites New Blog Novelty Search engine Your Shopping Cart For Shopping Your Member Area Bookmarks, Your Favorite Games Static Welcome Page Site in French Web Site in English
Summaries
Basic Electronics Fundamental Technology Test your Knowledge Digital Theoretical Electronics Digital Practical Electronics Digital Electronic Lexicon Data book TTL Data book CMOS TVC Troubleshooting Mathematical
Microcomputers
Theoretical of Microcomputers Test your Knowledge Practical Microcomputers Computer Glossaries
Physical
The light Field of Action Electromagnetic Radiation
Technologies
Classification of Resistances Identification of Resistances Classification of Capacitors Identification of Capacitors
Mathematical Forms
Geometry Physical 1. - Electronic 1. 2. - Electronic 1. 3. - Electrical 1. 4. - Electromagnetism
Access to all our Products
E. T. F. - Volume I - 257 Pages E. T. F. - Volume II - 451 Pages E. T. F. - Volume III - 611 Pages E. T. D. - Volume I - 610 Pages N. B. M. - Volume I - 201 Pages E. T. M. - Volume I - 554 Pages Business at Home Books 34 free pages Our E-books Geometry Software Electronic Components Software
Overview of all our Products
E. T. F. - Volume I - 257 Pages E. T. F. - Volume II - 451 Pages E. T. F. - Volume III - 611 Pages E. T. D. - Volume I - 610 Pages E. T. M. - Volume I - 554 Pages Geometry Software Electronic Components Software
Our Lessons in PDF Formats
Basic Electronics Fundamental Technology Digital Theoretical Electronics Digital Practical Electronics Theoretical of Microcomputers Mathematics
Data Processing
Troubleshooting Win98 and WinXP PC Troubleshooting Glossary HTML and Programs PHP and Programs JavaScript (in progress) Creation of several Sites
Forums
Electronic Forum and Infos Electronic Forum and Poetry
Miscellaneous and others
Form of the personal pages News XML Statistics CountUs JavaScript Editor Our Partners and Useful Links Partnership Manager Our MyCircle Partners Surveys 1st Guestbook 2nd Guestbook Site Directories




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 23 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 F1Viandes 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">

       <!-- A { color:#993300; text-decoration:none; } A:hover { color:#FF0000;text-decoration:underline; } -->

                         </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> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="" onclick="javascript:Visibilitee('id_div_1'); return false;" >Menu Restaurant</a> </H1>

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

                  <H2> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <a href="F5.html">Entr&eacute;es</a> </H2>

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

                  <H2> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <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">

       <!-- A { color:#993300; text-decoration:none; } A:hover { color:#FF0000;text-decoration:underline; } -->

                         </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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <a href="F6.html">Entr&eacute;es</a> </H2>

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

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

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                             <li> Cr&egrave;me renvers&eacute;e </li>

                                                             <li> Glaces </li>

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

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </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">

       <!-- A { color:#993300; text-decoration:none; } A:hover { color:#FF0000;text-decoration:underline; } -->

                         </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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <a href="F7.html">Entr&eacute;es</a> </H2>

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

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

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                             <li> Entrec&ocirc;te </li>

                                                             <li> Poulet </li>

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

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </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">

       <!-- A { color:#993300; text-decoration:none; } A:hover { color:#FF0000;text-decoration:underline; } -->

                         </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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <a href="F8.html">Entr&eacute;es</a> </H2>

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

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

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                             <li> Entrec&ocirc;te </li>

                                                             <li> Poulet </li>

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

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </ul>

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                               <ul>

                                                             <li> Cr&egrave;me renvers&eacute;e </li>

                                                             <li> Glaces </li>

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

                                                               </ul>

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </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">

       <!-- A { color:#993300; text-decoration:none; } A:hover { color:#FF0000;text-decoration:underline; } -->

                         </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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <a href="F1.html">Entr&eacute;es</a> </H2>

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

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

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                             <li> Salade </li>

                                                             <li> Charcuterie </li>

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

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </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">

       <!-- A { color:#993300; text-decoration:none; } A:hover { color:#FF0000;text-decoration:underline; } -->

                         </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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <a href="F2.html">Entr&eacute;es</a> </H2>

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

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

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                             <li> Salade </li>

                                                             <li> Charcuterie </li>

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

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </ul>

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                               <ul>

                                                                     <ul>

                                                                            <li> Cr&egrave;me renvers&eacute;e </li>

                                                                            <li> Glaces </li>

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

                                                                     </ul>

                                                               </ul>

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </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">

       <!-- A { color:#993300; text-decoration:none; } A:hover { color:#FF0000;text-decoration:underline; } -->

                         </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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <a href="F3.html">Entr&eacute;es</a> </H2>

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

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

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                             <li> Salade </li>

                                                             <li> Charcuterie </li>

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

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </ul>

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                               <ul>

                                                                     <ul>

                                                                            <li> Entrec&ocirc;te </li>

                                                                            <li> Poulet </li>

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

                                                                     </ul>

                                                               </ul>

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </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">

       <!-- A { color:#993300; text-decoration:none; } A:hover { color:#FF0000;text-decoration:underline; } -->

                         </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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="images/Petite_Main.gif"> &nbsp; <a href="F4.html">Entr&eacute;es</a> </H2>

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

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

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                             <li> Salade </li>

                                                             <li> Charcuterie </li>

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

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </ul>

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                               <ul>

                                                                     <ul>

                                                                            <li> Entrec&ocirc;te </li>

                                                                            <li> Poulet </li>

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

                                                                     </ul>

                                                               </ul>

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </ul>

                     <ul> <H2>

                            <ul>

                                  <ul>

                                        <ul>

                                                 <ul>

                                                       <ul>

                                                             <ul>

                                                                   <ul>

                                                                         <ul>

                                                                               <ul>

                                                                                     <li> Cr&egrave;me renvers&eacute;e </li>

                                                                                     <li> Glaces </li>

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

                                                                               </ul>

                                                                         </ul>

                                                                   </ul>

                                                             </ul>

                                                       </ul>

                                                 </ul>

                                        </ul>

                                  </ul>

                            </ul>

                     </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 26 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.









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

compteur visite blog gratuit


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.