Créée le, 19/06/2015

 Mise à jour le, 19/05/2019

Visiteurs N°  




Accueil
Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique Site en Français Site en Anglais
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or

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 23 MAI 2019

compteur de visite

    




Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 5. 14 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 19 MAI 2019.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en MAI 2019.