Exercices pour le cours "Bases du Web descriptif"

  1. Exo HTML 4.01. Créez un tableau ayant 2 colonnes et 3 lignes, faisant 17 em/px/cm de large, dont la 1ère colonne fait 33% de la largeur totale, contenant une image, une liste ordonnée, une liste non ordonnée, une cellule avec un fond coloré, un texte en couleur, un texte insécable (pas de retour chariot lorsque la fenêtre devient plus petite), un texte non insécable. Le fichier modèle de base pour HTML doit être réutilisé et adapté : adaptation de l'entête HTML, du titre, de l'auteur, ... Le source doit être clair, bien indenté, sans tabulation, en dessous de 80 caractères de large. Le fichier doit passer le validateur HTML/XHTML du W3C.

  2. 1er exo en XHTML Créez un fichier XHTML correspondant aux spécifications du précédent exercice mais devant en plus respecter les bonnes pratiques du W3C (notamment celles relatives à l'internationalisation) et les bonnes pratiques de programmation.

  3. Exo "bonnes pratiques du W3C" Créez un fichier XHTML contenant une liste non ordonnée de 4 points respectivement titrés "réseaux", "langages", "navigateurs" et "utilisateurs". Dans chacun de ces points vous listerez trois bonnes pratiques (pertinentes pour le point en question) : une relative à la mobilité, une relative à l'universalité et une sur l'accessibilité.

  4. Exo en XHTML+CSS Créez un fichier XHTML contenant
    - un paragraphe (de 3 lignes) en caractères Arial, justifié, dont la 1ère lettre apparait en majuscules à l'écran (bien qu'étant en fait en minuscule dans le fichier source), décalé de 2em vers la droite, contenant des mots cachés (apparaissant lors d'un copié-collé), contenant trois mots en bleu, et enfin, contenant un lien hypertexte non souligné, de couleur bleue avant d'avoir été activé (navigué) une fois et de couleur rouge après avoir été activé ;
    - un second paragraphe qui, lorsque le fichier est imprimé, débute sur une autre page et dont l'espace entre les lignes est de la taille d'une ligne ;
    - une liste ordonnée commencant à 3 (au lieu de 1 normalement) et dont les chiffres sont en caractères romains.

  5. Exo sur les formulaires en HTML+Javascript. Modifiez mon modèle de départ pour HTML avec formulaires (en gardant les sections 1, 2 et 4 de son code Javascript) pour créer un fichier HTML+javascript qui affiche une page ayant les éléments suivants dans cet ordre:

    1. une zone de texte nommé "textArea1", de deux lignes de hauteur, de 40 caractères de large, et initialisé avec le texte "Index de l'option sélectionnée dans la fenêtre pop-up: 4" ou bien "Index Javascript de l'option sélectionnée dans la fenêtre pop-up: 3" ;
    2. cinq boutons radio nommés "radioButtons1" avec le 2ème bouton sélectionné ;
    3. un élément de saisie de texte nommé "inputText1", de 30 caractères de large, initialisé avec la valeur "2" (sans les guillemets bien sûr) et ayant un script associé qui utilise la fonction "error" pour afficher un message d'erreur informatif/utile à chaque fois qu'un utilisateur change la valeur de inputText1 par une valeur qui n'est pas un nombre (note : il se peut que le navigateur attende que l'utilisateur clique sur un autre élément avant de générer un évènement "onChange") ;
    4. un bouton nommé "clearInputText1", intitulé "Clear", qui efface le contenu de inputText1 quand on clique sur ce bouton ;
    5. un bouton nommé "setRadioButtons1", intitulé "Sélection d'un des boutons radio", qui sélectionne le bouton radio dont l'index correspond au nombre inscrit dans inputText1 ;
    6. un bouton nommé "openWin1", intitulé "Ouvrez une fenêtre pop-up", qui ouvre une fenêtre nommée "WIN2" sans barre d'outils, de 400 pixels de large, et avec les éléments suivants dans cet ordre :
      - le texte "Dans l'élément de saisie de texte de la fenêtre d'appel, vous avez inscrit : ",
      - le dernier numéro entré dans inputText1,
      - un élément de type "select", nommé "select2", contenant les options intitulées "un", "deux", "trois" et "quatre", seulement deux d'entre elles étant affichées, l'option "Quatre" étant sélectionné, et ayant un script associé qui remplace le nombre à la fin de textArea1 avec l'index de l'option sélectionnée dans l'élément "select2" dès que cette option est modifiée.
  6. QCMs de w3schools sur HTML, XHTML, CSS et Javascript.

  7. Exo sur les cookies en HTML+Javascript. Créez un fichier HTML+javascript qui affiche une page avec les éléments suivants, dans l'ordre suivant :

    1. la phrase "Feuille de présence des étudiants du cours XXX le ",
    2. un élément de saisie de texte nommé "date" qui, par défaut, est initialisé à la date "15/12/2011", et qui à chaque fois qu'on le change fait apparaitre un message d'erreur informatif et pertinent si la date est invalide (de plus, la fonction "error" doit être ré-utilisée),
    3. un "tableau d'affichage" qui indique la présence ou l'absence des étudiants du cours XXX à la date indiquée dans l'élément "date" (des précisions sur les étudiants sont données ci-dessous)
      • ce tableau a une ligne par étudiant et deux colonnes :
        - la première colonne contient des numéros d'étudiants,
        - la seconde colonne contient "1" pour les étudiants présents à cette date et "0" pour les étudiants absents ;
      • toutes les informations du tableau doivent être lues dans les cookies de votre machine (le tableau doit donc être entièrement généré via Javascript ; les cookies doivent être créés via les éléments cités plus bas) ;
      • les noms des cookies contenant ces informations doivent débuter par "attendance_to_XXX_on_the_", suivi de la date (e.g., "2011_12_15_" pour la date 15/12/2011), suivi du numéro d'étudiant ;
      • les valeurs de ces cookies doivent être "0" ou "1" ;
      • s'il n'y a pas de tels cookies, la table générée est vide et le message "Pas d'information sur la présence d'étudiants au cours XXX à cette date" doit être affiché après ou à la place de la table ;
      • dans un premier temps, afin de pouvoir directement réutiliser la fonction "getCookie" qui vous a été fournie, considérez qu'il n'y a que trois étudiants et que leurs numéros d'étudiants sont respectivement s1, s2 et s3 (pour la date 15/12/2011 le nom d'un des cookies devra donc être "attendance_to_XXX_on_the_2011_12_15_for_s3") ;
      • dans un second temps, créez à partir de "getCookie" une fonction "getCookieArray" qui recherche tous les cookies dont les noms satisfont une expression régulière passée en paramètre (voir la fonction regExprIn à titre d'exemple) et renvoie un tableau associatif faisant correspondre les noms des cookies retrouvés à leurs valeurs associées (e.g., si l'on met ce tableau renvoyé dans la variable t, on peut avoir t["s1"]==0, t["s2"]==1 et t["s3"]==0) ; utilisez ensuite ce tableau associatif pour construire le tableau d'affichage cité plus haut sans utiliser "s1", "s2" et "s3" dans votre code (i.e., utilisez une boucle for pour parcourir tous les éléments du tableau associatif) ;
        une telle fonction "getCookieArray" pourra être demandée lors de l'examen ;
    4. le texte "Pour indiquer si un étudiant était présent ou absent à la date ci-dessus, remplissez les champs suivants (note: vous pouvez aussi changer la date).
    5. un élément de saisie de texte nommé "studentID", de 10 caractères de large ;
    6. un bouton radio nommé "présent" ;
    7. un bouton nommé "StoreInCookies", intitulé "Stocker dans les Cookies", qui déclenche les opérations suivantes :
      - la vérification que l'élément "date" contient une date valide (si ce n'est pas le cas,
      la fonction "error" doit être utilisée pour afficher un message d'erreur informatif et pertinent),
      - si la date est valide, la valeur du bouton radio "présent" (i.e., s'il est sélectionné ou pas) doit être stockée dans un cookie dont le nom est constitué comme indiqué plus haut (i.e., "attendance_to_XXX_on_the_", suivi de la date, suivi du numéro d'étudiant) ;
    8. un bouton nommé "clear", intitulé "Clear", qui efface les valeurs contenues dans les éléments "studentID" et "date" ;
    9. un bouton nommé "reload", intitulé "Reload", qui lorsqu'on clique dessus, déclenche la re-génération de la page en tenant compte de la date qui a été rentrée dans l'élément "date" (donc, si la date a été changée, une autre feuille de présence est affichée).