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.
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.
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é.
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.
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:
- 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" ;
- cinq boutons radio nommés "radioButtons1" avec le 2ème bouton
sélectionné ;
- 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") ;
- un bouton nommé "clearInputText1", intitulé "Clear", qui efface le
contenu de inputText1 quand on clique sur ce bouton ;
- 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 ;
- 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.
QCMs de w3schools sur HTML, XHTML, CSS et Javascript.
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 :
- la phrase "Feuille de présence des étudiants du cours XXX le ",
- 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),
- 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 ;
- 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).
- un élément de saisie de texte nommé "studentID", de 10 caractères de large ;
- un bouton radio nommé "présent" ;
- 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) ;
- un bouton nommé "clear", intitulé "Clear", qui efface les valeurs
contenues dans les éléments "studentID" et "date" ;
- 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).