Valid XHTML     Valid CSS2    

CORRIGES DES TPS INFORMATIQUE WEB

Développement Web L2

(Faculté des Sciences d'Angers)

gilles.hunault "at" @univ-angers.fr

Table des matières

Corrigé du TP numéro 1   Pages Web sous Windows

Corrigé du TP numéro 2   Tableaux, listes, formulaires et CSS

Corrigé du TP numéro 3   CCS, formulaires et Javascript

Corrigé du TP numéro 4   Javascript : les éléments et les attributs

Corrigé du TP numéro 5   Javascript : applications plus complexes

Corrigé du TP L2 numéro 1 (énoncé)   Pages Web sous Windows

  1. Sous Windows XP ou Vista, les navigateurs Web disponibles sont Internet Explorer, Firefox, Opera, [Safari, Chrome, Maxthon]... Sous Linux, il y a les mêmes sauf Internet Explorer et Maxthon. La notion de "meilleur" n'existe que par rapport à des critères. Internet Explorer domine le marché à plus de 80 %, Firefox est plus configurable, Opera est plus conforme aux spécifications du W3C... Attention, il y a de "bonnes" différences entre Firefox 2 et Firefox 3.

    On utilisera désormais Firefox mais il sera bon de vérifier dans une autre salle ou chez soi que les pages s'affichent correctement avec Internet Explorer.

  2. Oui, le texte s'affiche avec tous les navigateurs et à peu près de la même façon : BONJOUR est écrit sur une ligne en dessous en plus gros et en plus gras que ESSAI. C'est tient au fait qu'on demande un titre de niveau 1 via l'élément h1. Le fichier n'est pas "bien formé" : il faut toujour fermer une balise ouvrante et il manque donc au moins </h1>. Pour qu'il soit valide, il faudrait indiquer la grammaire (DOCTYPE) et rajouter les éléments html, head, title, body.

    La validation du W3C se fait à l'adresse http://validator.w3.org/ (utiliser File Upload).

    Voici un tel fichier valide XHTML strict avec le lien qui le prouve : sen_bonjour.htm ; on notera l'adresse du validateur et son paramètre. Le squelette sq.htm est ici.

  3. On peut utiliser des paragraphes différents, des titres consécutifs, un retour à la ligne, un tableau. Et aussi un texte préformaté (avec des retours charriot) via l'élément pre, des divisions. Le fichier sen_lignes.htm présente toutes ces solutions. Le tableau est sans doute ici un peu "lourd" juste pour avoir une séparation dans le sens des lignes. Par contre, au niveau du "code-source" cela n'a aucune importance que les balises soient ou pas sur des lignes différentes. N'oubliez pas de lire le code-source de la solution !

  4. A propos des styles, le mieux est de procéder ainsi :

    • s'il s'agit juste de tester "un bout de code", ne pas s'embarasser de grammaire et écrire le style local en ligne à la volée,
    • après avoir testé le style en ligne, le mettre en style interne en début de fichier avec une grammaire transitionnelle,
    • pour un site "propre", tout externaliser et mettre une grammaire stricte.

  5. No, but it helps !. En d'autres termes et en français, ce serait mieux de savoir parler (et surtout lire) l'anglais (ou plus exactement l'américain) parce que toutes les spécifications et documentations sont au départ en anglais. Bien ou mal (on ne discutera pas ici de la quasi-hégémonie américano-capitaliste), c'est un fait et il faut s'y adapter pour au moins quelques années.

  6. Une liste ordonnée se fait avec l'élément ol et les items de liste sont définis par les éléments li. Pour une liste non ordonnée, on utilise l'élément ul au lieu de ol, avec les mêmes li. Pour une liste à définitions, l'élément dl comporte pour chaque terme un élément dt (terme) et un élément dd (définition). Vérification avec le fichier sen_courses.

    L'URL de la recherche du mot oeuf avec Google est http://www.google.fr/search?q=oeuf ; on la met comme lien hypertexte via l'élément a, attribut href. Pour pain, l'URL est http://www.google.fr/search?q=pain, etc. Pour mettre une image, on utilise l'élément img, attributs src et alt. Voir le même fichier sen_courses (en bas de page) .

    L'URL ne doit pas contenir d'accents. Il faut utiliser un codage nommé urlencodage ; le plus simple est d'utiliser la page http://www.albionresearch.com/misc/urlencode.php.

    Pour un tableau, l'élément conteneur est table ; les lignes sont définies par les éléments tr et chaque cellule est obtenue via l'élément td. La bordure se met avec l'attribut border au niveau de l'élément table. On peut jouer sur l'épaisseur, la couleur et la forme de la bordure. La propriété border-collapse permet de faire un "vrai quadrillage" et non un "bordurage"...

    Pour un lien en bas de page, il faut ajouter le symbole # avec le nom de la section. On définition la section avec l'attribut name dans une ancre (élément a). Vérification ici.

  7. Voir le code-source de sen_botablo.htm et sen_botablo2.htm ; les bgcolor indiqués pour table, td et p mettent respectivement une couleur de fond pour : tout le tableau, toute la case (cellule), la zone du paragraphe à l'intérieur de la case.

  8. La réponse est dans la propriété text-decoration. Dans le paragraphe que vous êtes en train de lire, le texte est justifié à droite et à gauche, comme le demande l'énoncé, le fond du paragraphe est gris, et un lien comme le mot Google est en rouge, sans souligné alors que c'est un lien. On consultera le code-source de ce paragraphe et le fichier de style std.css pour essayer de comprendre ce que signifie <p class='cadrej'>... et <a class='nou grouge' href=...

  9. Voir le code-source de sen_jules.php. Pour le retrait on peut utiliser l'élément blockquote ou simplement ajouter autour du paragraphe un élément div avec la bonne marge gauche. Cela ne vaut pas le coup de faire un feuille de style pour un fichier. En général, on fait une feuille pour un ensemble de pages, quitte à "bloquer" tous les styles qu'on utilise dans un seul fichier CSS selon l'adage de "mon premier sac à main de quand que j'avais 14 ans " (ça peut toujours servir...). Le style jc défini dans la feuille ne peut pas convenir pour autre chose que le titre car il comprend en plus de la couleur la modification de la taille des caractères. Il aurait plus judicieux de définir jc pour la couleur et gros pour la taille, de façon à utiliser class ='jc' dans le paragraphe et class ='gros jc' dans le titre.

    Pour la version grammaire stricte, voir sen_jules2.php ; le code-source contient des commentaires...

Corrigé du TP L2 numéro 2 (énoncé)   Tableaux, listes, formulaires et CSS

  1. Voir sen_ts1.htm et sen_ts2.htm comme résultats ; la seule différence dans le code-source est au niveau de l'élément link. On remarquera au passage combien il est "dangereux" d'utiliser des paragraphes vides avec <p>&nbsp;</p>...

  2. Voir le code-source de sen_comme_google.php ; dans le formulaire original, il y a plein de choses, dont le choix de la langue, les boutons utilisés...

  3. Avec l'URI http://forge.info.univ-angers.fr/~gh/internet/ndjpm.php, on peut obtenir le nombre de jours par mois, dont les initiales sont justement NJPM. On pourra vérifier que toute valeur autre que les nombres entiers 1, 2, 3... 12 provoque l'affichage d'un texte d'aide. Idem si on ne passe aucun paramètre (les paramètres sont après le symbole point d'interrogation). On peut 'coincer' le programme en écrivant m=01 car ce n'est pas prévu (0 est prévu, 1 est prévu, mais pas 01).

  4. Fastoche. Voir sen_cal1.php

  5. Re-fastoche. Voir sen_cal2.php

  6. Consulter le code-source de sen_nombres.php Pour les décimales, il faut convertir le texte en nombre réel avec parseFloat() puis utiliser la fonction toFixed() pour choisir le nombre de décimales.

    Pour que l'action (qui est obligatoire) ne s'exécute pas, il faut terminer le code Javascript par return false ;

    Pour les experts, consulter le code-source de sen_nombres_f.php et son fichier javascript nommé sen_nombres_f.js.

Corrigé du TP L2 numéro 3 (énoncé)   CCS, formulaires et Javascript

  1. Consulter le code-source de sen_kilos.php. Ce qui change, c'est qu'avec une grammaire stricte, on est obligé d'utiliser un fichier externe pour écrire le texte Javascript. Pour l'exercice, c'est le fichier sen_kilos.js ; il est chargé via l'attribut src dans l'élément script qui est lui-même dans l'élément head.

  2. Consulter le code-source de sen_deuxnombres.php ; l'url javascript: sous Firefox fournit une fenêtre qui affiche des messages d'erreur de Javascript, au chargement et à l'exécution. Cela a déjà été dit, mais comme tout le monde ne l'utilise pas, je le répète ! Le fichier Javascript utilisé est sen_deuxnombres.js.

  3. Avec 3 variables distinctes deux à deux, il y a 6 cas à envisager. A partir de trois variables, il vaut mieux mettre les variables dans un tableau et trier le tableau avant de l'afficher. Consulter le code-source de sen_ordrecroissant.php et le texte de son script sen_ordrecroissant.js.

  4. Voici une possibilité de solution, à intégrer dans une page Web : nbmax.js.

  5. Voir par exemple sortable (avec un seul t) ou sorttable (avec deux t). C'est compliqué parce qu'il peut y avoir, contrairement aux tableaux informatiques, des élements et des attributs...

  6. Consulter la page tp3fin.htm dont le code-source Javascript est ici.

    Utiliser l'attribut onload de l'élément body est dangereux : et si une autre fonction venait redéfinir cet attribut ? Il vaut mieux utiliser un gestionnaire d'évènements et ajouter la fonction demandée à l'évènement onload... Exemple ici.

Corrigé du TP L2 numéro 4 (énoncé)   Javascript : les éléments et les attributs

  1. Consulter la page tp4ex1.htm dont le code-source Javascript est ici.

  2. Consulter la page avantjssol.php dont le code-source est ici ; fichier de script utilisé : avantjssol.js.

  3. La fonction crée nbp paragraphes (nbp est le paramètre 1 de la fonction). Ces paragraphes sont ajoutés en tant qu'enfants du noeud cible (cible est le paramètre 2 de la fonction).

  4. Consulter la page fixegauche.php dont le code-source est ici, et dont le fichier CSS est fixe.css.

    Consulter ensuite la page fixes.php dont le code-source est là, et dont le fichier CSS est fixes.css.

  5. Consulter la page taenhaut.php dont le code-source est ici, et dont le fichier CSS est taenhaut.css. Fichier de script utilisé : taenhaut.js.

    Consulter ensuite la page prenbas.php dont le code-source est là, et dont le fichier CSS est prenbas.css. Fichier de script utilisé : prenbas.js.

    Consulter enfin la page taenbas.php dont le code-source est ici, et dont le fichier CSS est taenbas.css.

    La meilleure solution est sans doute la troisième car la plus "naturelle" : on regarde en haut ce qui se passe et on peut consulter en bas les informations de debug.

  6. Consulter la page chglng.php dont le code-source est ici ; fichier de script utilisé : chglng.js.

Corrigé du TP L2 numéro 5 (énoncé)   Javascript : applications plus complexes

  1. Consulter le code-source de sen_eux_et_nous.php et son fichier de script sen_eux_et_nous.js. Le corrigé fournit une solution avec un tableau, puis avec des divisions sans CSS et enfin avec des divisions en CSS ; le script fonctionne avec IE et FF comme indiqué en commentaires.

    L'horloge numérique c'est pratiquement la même chose que les panneaux de score de l'exercice précédent. Le seul changement c'est qu'il faut fonctionner en "modulo" 24 et 60 comme disent les mathématicien(ne)s.Consulter le code-source de sen_horloge.php et son fichier de script sen_horloge.js.

  2. Consulter la page calcgh.php dont le code-source est ici et son script calcgh.js ; le fichier CSS utilisé se nomme calcgh.css.

    La calculette proposée comme exemple par SELFHTML est très intéressante aussi. Copie locale valide en XHTML Strict ici.

  3. Consulter la page drapeaux.php dont le code-source est ici et son script drapeaux.js.

  4. Consulter la page saisieut.php dont le fichier Javascript est saisieut.js.

 

 

retour gH    Retour à la page principale de   (gH)