Valid XHTML     Valid CSS2    

ENONCES DES TD

Développement Web L2

(Faculté des Sciences d'Angers)

gilles.hunault "at" univ-angers.fr

Table des matières

TD numéro 1     Langage XHTML et CSS

TD numéro 2     Formulaires, tableaux et propriétés

TD numéro 3     Eléments, attributs et Javascript

TD L2 numéro 1 (corrigé)     Langage XHTML et CSS

  1. Que signifie XHTML ? Quelle est la différence entre marqueur, élément, balise, entité et attribut ? Quelle est la structure hiérarchique d'une page web ? Est-il important de bien structurer une page ? Est-il obligatoire de bien structurer une page ? Est-il important d'écrire des pages valides ? Est-il obligatoire d'écrire des pages valides ? Est-ce la même chose de fermer une balise et un élément ?

  2. De quelles grammaires dispose-t-on pour bien écrire les pages Web ? Quelles en sont les règles ? A quoi servent-t-elles ?

  3. Quelle est, hors grammaire, la structure minimale d'un document XHTML complet qui contient juste un élément de type h1 dont le texte est "Bonjour" ?

  4. Détailler ce que fait le navigateur au vu de la balise suivante. On distinguera les grammaires strictes et transitionnelles. 

    
   <p id="dates" name="dates" style="font-size : 5 ; color : blue" class="mamf1 mamf2"...

  5. Ecrire le texte XHTML valide au sens transitionnel qui correspond aux indications suivantes. L'élement X1 a pour attribut X2 (de valeur X3) et X4 (de valeur X5). Il contient dans cet ordre le texte X6 puis l'élément autofermant X7 et en fin le texte X8 écrit en gras. Remplacer X1 par p, X2 par id, X3 par mfp, X4 par class, X5 par texte, X6 par Bonjour, X7 par hr, X8 par tout le monde. Qu'obtient-ton ?

  6. Fournir la structure minimale d'un document XHTML complet qui contient deux éléments de type h1 dont le texte est "Bonjour en XHTML à Angers" avec XHTML écrit en bleu foncé pour le premier et "Bonsoir les enfants" pour le second. On donnera des solutions valides XHTML et CSS pour les grammaires strictes et transitionnelles.

  7. Tracer le document de l'exercice précédent sous forme d'arbre haut/bas puis gauche/droite.

  8. Tracer l'arbre de l'exercice précédent sous forme de boites.

  9. Corriger le texte suivant pour qu'il soit bien formé : 

    
<table><tr><p align="left">Tou va <b>bien.</td></tr><td align="right">Donc c'est <font color="blue">super. 
</td></table>

  10. Remplacer les attributs de mise en forme du texte précédent par des styles. On donnera un solution valide XHTML et CSS pour la grammaire "strict".

  11. Quelles sont les règles de justification des colonnes quand on utilise un tableau ? Comment fait-on cela avec CSS ?

  12. Donner la liste des éléments XHTML vus en cours par ordre alphabétique.

TD L2 numéro 2 (corrigé)     Formulaires, tableaux et propriétés

  1. On me demande d'écrire l'élément x1 qui contient les éléments x2, x3... avec comme noms de style respectifs s1, s2, s3... Quel fragment XHTML valide dois-je écrire ? Y a-t-il une indentation particulière à respecter au niveau du code-source ? Pourquoi ? Application : x1 est ul et les autres xi sont des li. Au passage, comment écrit-on des indices et des puissances (et des puissances de puissances) comme dans :

    xi(n2) se prononce x indice i puissance n deux (comme xn2i ?)

  2. Quelle est la structure minimale d'un formulaire ? et d'un tableau ?

  3. Un formulaire (en mode GET) contient une entrée texte nommé JOUR, une liste de sélection nommée DR contenant : <option value='1'>Mancini</option><option value='2'>Poudlard</option>.... Le formulaire a aussi des boutons radios tous nommés HR donc voici le début du code-source : <input type='radio' name='HR' value='A' />9 h <input type='radio' name='HR' value='B' />14 h... Sachant que l'URL de l'action (fictive) du formulaire est http://pdrv.fr/parm, si l'utilisateur entre lun pour le jour, qu'il valide l'option Poudlard et qu'il rend actif le bouton radio correspondant à 9 h, quelle serait l'URL renvoyée par le navigateur ? Et si l'utilisateur écrit x=2 comme jour ? Et si le bouton d'envoi (submit) est nommé go et qu'il affiche 'envoi' ?

    Pour les experts : dans quel ordre les noms de champs d'entrée sont-ils transmis ? Le champ de nom pomme (tout en minuscules) est-il différent du champ de nom POMME (tout en majuscules) ? Peut-on avoir un attribut value dans un élément input sans avoir d'attribut name ?

  4. Comment peut-on interfacer Google-Web ? Et Google-images ? Et en mode "safe" ? On distinguera l'écriture d'une ancre (élément <a href="...) et l'utilisation d'un formulaire.

  5. Quel est le code XHTML et CSS pour obtenir le tableau suivant :

    Intitulé du cours Année Durée probable
    Dev Web L2 > 20 h
    Ajax non encore défini
    Php et Mysql L3 < 60 h
    XML M1 45 h
    M2 25 h

    Remarque : les noms de cours devront être justifiés à gauche et les durées à droite. La mention "non encore défini" sera centrée. Comment mettre le mot Ajax en bleu dans un fond jaune ?

  6. Que faut-il mettre dans un formulaire pour que le code Javascript s'exécute et que l'URL de l'action ne soit pas chargée ? Si l'URL est quand même chargée, que peut-on en déduire ?

  7. Combien y a-t-il de cm dans un 1 pouce ? En déduire un formulaire qui permet de trouver la taille d'un écran exprimé en pouces. On fournira une première solution avec le code Javascript écrit directement dans l'attribut onsubmit puis une deuxième avec une fonction écrite dans un fichier externe et chargée dans l'élément head. La fonction utilisera comme paramètre tout l'objet formulaire.

  8. Lorsque je lis le texte d'un formulaire, je trouve ceci écrit : <form><input type='text' value='5' /></form>. Y a-t-il une valeur par défaut pour le texte à saisir ? Est-ce correct : au sens de xhtml strict (tout le reste étant valide) ? intellectuellement ? Que manque-t-il (si on omet la mise en forme) pour avoir un "vrai" formulaire ?

  9. Je voudrais écrire un formulaire en mode GET qui demande un prénom et qui rajoute automatiquement comme paramètre à l'URL de l'action le mot section et la valeur 'grande'. Comment faire ?

  10. Lorsqu'un formulaire transmet un input type='text' dont la valeur est 5, peut-on savoir s'il s'agit d'un nombre ou d'une chaine de caractères ? Comment forcer Javascript à l'utiliser comme nombre ?

  11. Je veux écrire un formulaire qui affiche comme liste de sélection (et dans cet ordre) les mots 'pipounet' et 'pipounette' mais que le formulaire transmette respectivement les valeurs G et F pour le champ SEXE. Comment faire ? Honneur aux dames, comment mettre F comme choix par défaut ? et en rose ? Pourquoi ne faut-il pas nommer le champ SEXE ? Peut-on mettre les deux options validées par défaut ? Et quel est la valeur renvoyée dans ce cas ?

  12. J'ai deux boutons radio dans un formulaire qui affichent Non et Oui. Comment faire pour que le formulaire envoie comme valeurs associées 1 et 2 pour le champ 'pipouyou' ? Honneur aux pipoyous, comment mettre Oui choix par défaut ? et en bleu clair ?

  13. Que fait le code Javascript suivant ? On pourra tester avec a = 6 et b = 2 puis avec a = 'oui' et b = 'non' et enfin avec a = 'oui' et b = 2. Comment le tester rapidement avec un ordinateur ? 

    
      //  partie 1
     
      a = a + b
      b = a - b
      a = a - b
     
      //  partie 2
     
      c = a
      a = b
      b = c
     
      //  partie 3
     
      a = a * b
      b = a / b
      a = a / b

  14. Lorsque je teste mon programme Javascript qui utilise les valeurs issues d'un formulaire, il fonctionne bien avec 13 et 19 mais pas avec 3 et 21. Pourquoi ? On pourra imaginer que le programme se base sur l'ordre des valeurs.

  15. Avant de transmettre la valeur du champ REPONSE du formulaire, je voudrais tester avec Javascript si c'est bien un nombre entier positif. Quels évènements (clavier, souris...) puis-je utiliser ? Et sur quels éléments du formulaire ? Lesquels sont les plus simples ? Pourquoi est-ce 'mauvais' de mettre la validation sur le bouton d'envoi comme dans input type='submit' value='Ok' onclick='valider()' ? Et sur une image de soumission comme dans img src='...' alt='...' onclick='valider()' ?

  16. Que faudrait-il faire en Javascript pour tester qu'une ligne d'entrée contient un entier ? Et une suite de nombres entiers séparés par un ou plusieurs espaces (éventuellement vide) ? Et si la réponse à une question était le ballon rouge ? Que peut-on en déduire sur la validation d'un questionnaire dans une page Web ?

    On donnera le code Javascript détaillé pour tester si la variable lst contient une liste d'entiers en utilisant deux méthodes : a. le parcours de la chaine caractère par caractère ; b. à l'aide d'une expression régulière.

TD L2 numéro 3 (corrigé)     Eléments, attributs et Javascript

  1. Où doit-on mettre dans la page Web l'appel à des instructions Javascript ? A-t-on besoin d'une fonction ? A-t-on besoin d'une page valide ? Peut-on utiliser window.document.write ?

  2. Que fait le code Javascript suivant ? 

    
     //    (gH)   -_-  mystere.js  ;  TimeStamp (unix) : 27 Février 2010 vers 20:36
     
          var tabM = new Array("M","F","A") ; // Cours : Maths Francais Anglais
          var tabN = new Array(2,2,1)       ; // Nb exos par cours
          var tabI = new Array()            ; // Identifiant des exercices
     
          idi = -1 ;
     
          for (idm=0;idm<tabN.length;idm++) {
            for (ide=0;ide<tabN[idm];ide++) {
              idi = idi + 1 ;
              jde = ide + 1 ;
              tabI[idi] = tabM[idm] + jde ;
            } ; // fin pour ide
          } ; // fin pour idm

  3. Comment créer en Javascript un paragraphe et y mettre le texte Bonjour ?

    Comment supprimer en Javascript le paragraphe précédent et en créer un autre pour y mettre le texte Bonsoir ?

    Comment modifier en Javascript le paragraphe précédent pour y mettre le texte Bonjour puis le texte "à toutes et à tous" en bleu puis le texte Bonsoir ?

  4. Comment créer automatiquement en Javascript n paragraphes (n étant un paramètre de la fonction) dont les id sont respectivement "p01", "p02", etc. ?

  5. Comment construire une liste de sélection automatique à partir d'un tableau de mots ? On pourra penser aux mots "janvier", "février", "mars".. ou aux mots "2010", "2011", "2012"...

  6. Reprendre l'exercice précédent si le point de départ est une phrase avec des mots plutôt qu'un tableau de mots. On pourra par exemple utiliser la phrase "lundi mardi mercredi".

  7. Reprendre l'exercice précédent si le point de départ est une phrase avec des mots séparés par un ou plusieurs espaces. On pourra par exemple utiliser la phrase "lundi      mardi mercredi".

  8. Imaginez un système pour "débugger" du code Javascript. Donner les grandes lignes de ce système et les fonctions correspondantes.

  9. Que fait le code Javascript suivant ? 

    
      txt  = " Ceci est un <a href='google.fr' class='deco'>essai</a>" ;
      txt += " de <span class='gbleuf'>découpage</span> évolué." ;
     
      uu = /<(.*?)>/g ;
      pp = txt.match(uu)
      if (!pp) {
        alert("pas vu, pas pris !")
      } else {
        vv = uu.exec(txt)
        alert(vv[1]) ;
      } ;

 

Retour à la table des matières

 

 

retour gH    Retour à la page principale de   (gH)