Valid XHTML     Valid CSS2    

ENONCES DES TP INFORMATIQUE WEB

Développement Web L2

(Faculté des Sciences d'Angers)

gilles.hunault "at" univ-angers.fr

Table des matières

TP numéro 1   Pages Web sous Windows

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

TP numéro 3   CCS, formulaires et Javascript

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

TP numéro 5   Javascript : applications plus complexes

TP L2 numéro 1 (corrigé)   Pages Web sous Windows

  1. Quels sont les navigateurs Web disponibles en général ? Et à la fac ? Lequel ou lesquels sont les meilleurs et pourquoi ?

  2. Ecrire juste ESSAI : <H1>BONJOUR dans le fichier bonjour.htm à l'aide de Notepad++ (mais pas le bloc-notes standard de Xp).

    • Est-ce que le texte s'affiche avec un navigateur via Fichier/Ouvrir ?
    • ESSAI et BONJOUR sont-ils écrits pareils ? Pourquoi ?
    • Est ce que le texte s'affiche de façon identique quelque soit le navigateur ?
    • Le fichier est-il bien formé ? valide (sur le site du W3C) ?
    • Complétez le fichier pour qu'il soit valide XHTML Strict et vérifiez-le sur le site du W3C.
    • Ecrire un fichier sq.htm ("squelette") qui servira de modèle pour les exercices suivants.

    Installer Htmlvalidator et vérifier que le fichier est valide.

  3. Essayez de trouver plusieurs façons d'écrire BONJOUR BONSOIR sur deux lignes différentes à l'affichage. Remarque : il y en a au moins 6.

  4. Comment définir et tester des styles CSS ? Quell est "la" bonne méthode ? Par exemple, essayer d'afficher dans un élément h1 le texte bonjour les petits enfants avec le mot petits écrit en bleu foncé.

  5. Do you need to speak english to write Web pages ?

  6. Construire une liste numérotée puis non numérotée des courses : oeufs, pain, viande, fruits, légumes. Reprendre avec une liste à définition (faire un petit commentaire pour chaque ingrédient). Cherchez le mot oeuf avec Google. Comment faire un lien vers la page correspondante ? Cherchez une image d'oeuf avec Google Images. Comment afficher cette image ?

    Faire enfin un tableau (avec bordure) des courses oeufs, pain, viande fruits, légumes sous forme de tableau. La colonne 1 contiendra le mot avec son lien, la colonne 2 l'image (normalisée), la colonne 3 le petit commentaire. Comment mettre un lien sur le bas de la page de la liste de courses ?

    La page devra être valide au sens 'strict'. Attention : il y a une difficulté pour le lien avec légumes.

    Pour les plus fort(e)s, faire un vrai quadrillage plutôt que des bordures séparées, montrer la différence entre la couleur de fond par défaut du tableau, la couleur de fond de l'élément td et la couleur de fond d'un paragraphe inclus dans cet élément td.

    S'il reste du temps, on pourra mettre des liens sous des images de validation XHTML et CSS comme tout en haut de cette page....

  7. Reproduire le tableau de la page botablo.htm puis celui de la page botablo2.htm on essaiera de comprendre la différence entre <table bgcolor='yellow'>...,<td bgcolor='yellow'>... et <td><p bgcolor='yellow'>... Tester également border='100' puis les couples cellpadding='20' cellspacing='100' et cellpadding='20' cellspacing='100'.

  8. On veut s'affranchir du souligné sous un lien. Comment faire ? On essaiera de mettre un petit texte dans un paragraphe sur fond gris (paragraphe justifié à droite et à gauche et encadré) avec un lien en rouge sans souligné. Dupliquer le paragraphe et inventer un "bouton rectangulaire" en jouant sur les dimensions du style associé au lien. On ne commencera pas avec une page web vide mais avec le squelette sq.htm.

  9. Inventer la couleur bleu_tendre ou bleu_intense à l'aide d'un code RGB issu de ColorPicker (3.1). Copier-coller le texte suivant (tiré de wiki). Remarque : le site code-couleur est très bien aussi (merci, Séverin). 

    
Jules César

    C'est un général, homme politique et écrivain romain, né à Rome vers 100 av. J.-C.
    et mort le 15 mars 44 av. J.-C. (aux Ides de Mars). Son destin exceptionnel marqua le monde
    romain et l'histoire universelle : ambitieux et brillant, il s'appuya sur le courant
    réformateur et démagogue pour son ascension politique ; stratège et tacticien habile, il repoussa
    les frontières romaines jusqu'au Rhin et à l'océan Atlantique en conquérant la Gaule,
    puis utilisa ses légions pour s'emparer du pouvoir. Il se fit nommer dictateur à vie, et
    fut assassiné peu après par une conspiration de sénateurs. Il fut divinisé et son fils adoptif
    Octave, vainqueur de Marc Antoine acheva la réforme de la République romaine, qui laissa
    place au principat et à l'Empire romain.

    On utilisera pour cette première partie la grammaire transitionnelle. Mettez un titre de niveau 1 autour de Jules César puis écrivez à nouveau Jules César en taille 7 et encore une troisième fois en "font-size" 300pt. Qui est le plus gros ? Délimiter le paragraphe de biographie via l'élément p. Dupliquer le paragraphe et essayer de mettre la copie en retrait. On essaiera de trouver plusieurs solutions pour ce retrait. Mettre ensuite le titre en bleu_intense à l'aide d'un style en ligne puis avec un style nommé jc pris dans une feuille de style externe nommée cesar.css ; peut-on utiliser le style jc pour faire ressortir les mots Rome et République romaine ? Pourquoi est-ce "stupide" d'utiliser une feuille nommée cesar.css ? On ne commencera pas avec une page web vide mais avec le squelette sq.htm.

    Reprendre l'exercice avec la grammaire stricte.

TP L2 numéro 2 (corrigé)   Tableaux, listes, formulaires et CSS

  1. Recopier en local la page sen_ts.htm, les styles sen_demo1.css et sen_demo2.css. Testez ces 3 fichiers pour savoir s'ils sont valides et corrigez-les le cas échéant. Tester l'affichage si on met sen_demo1.css comme feuille de style pour sen_ts.htm puis quand on utilise sen_demo2.css.

  2. Ecrire un formulaire minimal pour remplacer le formulaire de base de Google. Qu'y a-t-il de plus dans le formulaire original de Google ?

    Pour les experts : écrire dans la même page un autre formulaire dont la recherche est restreinte à la France, un troisième restreint aux images et enfin un quatrième qui filtre les recherches pour protéger les enfants. Pourquoi, dans ce cas, certaines pages de Gilles Hunault sont-elles filtrées ?

  3. Que peut-on faire avec l'URI http://forge.info.univ-angers.fr/~gh/internet/ndjpm.php ? Essayer de voir comment cette adresse permet de connaitre le nombre de jours d'un mois donné. Pourquoi est-ce que ce script (programme) se nomme ndjpm ? Peut-on 'coincer' ce programme ? Lui faire afficher une erreur ?

  4. Faire une liste numérotée avec les mois Septembre, Octobre... ; peut-on commencer les numéros à 9 ? et mettre les nombres en latin ? Mettre un lien sous le nom du mois avec comme URI :

    http://forge.info.univ-angers.fr/~gh/internet/ndjpm.php?m=

    suivi du numéro du mois (?m=9 pour Septembre, ?m=10 pour Octobre etc.).

    Si on commence à 1957, quelle est la première valeur avec type='I' ? Pourquoi ?

    Si on commence à 2006, quelle est la deuxième valeur avec type='A' ? Pourquoi ?

  5. Ecrire un formulaire qui demande un numéro de mois et qui renvoie le nombre de jours dans ce mois. On utilisera l'URI de l'exercice précédent. Ecrire dans la même page un second formulaire qui utilise une liste de sélection non multiple qui affiche les noms de mois et qui renvoie le nombre de jours dans ce mois. Ecrire (toujours dans la même page) un troisième formulaire qui utilise une liste de boutons radio pour sélectionner le mois et qui renvoie le nombre de jours dans ce mois.

  6. Ecrire un formulaire qui demande un nombre et en affiche le double sur la même page. On utilisera Javascript avec une grammaire transitionnelle et on fera la multiplication par 2 'à la volée' dans un "onsubmit" ; on utilisera deux champs textes nommés respectivement nombre et double. L'action sera l'URL :

    http://forge.info.univ-angers.fr/~gh/internet/non.php

    et ne devra pas s'exécuter...

    Ajouter un autre formulaire qui demande un nombre et en affiche la moitié sur la même page. On utilisera Javascript avec une grammaire transitionnelle et on fera la multiplication par 2 'à la volée' dans un "onsubmit" ; on utilisera deux champs textes nommés respectivement nombre et demi.

    Modifier le deuxième formulaire pour qu'il affiche à la fois le double et la moitié avec un seul bouton d'envoi.

    Ecrire enfin un troisième formulaire qui affiche le tiers du nombre. Comment gérer les décimales ?

    Remarque : tout le code Javascript sera écrit dans la partie onsubmit. Pour les experts : mettre uniquements des fonctions dans le onsubmit, les définir dans un fichier externe et les charger dans l'élément head. Les fonctions transmettront tout l'objet formulaire. On testera alors la technique onsubmit=' fonction() ; return false ' versus la technique onsubmit=' return( fonction() ) ; dans ce deuxième cas, c'est la fonction qui renvoie false.

TP L2 numéro 3 (corrigé)   CCS, formulaires et Javascript

  1. Ecrire un formulaire qui demande un nombre de kilos et qui affiche son équivalent en grammes. On utilisera Javascript avec une grammaire stricte. Une première solution fera la conversion à la volée dans un "onsubmit", la deuxième solution utilisera une fonction de conversion mise dans un fichier externe (chargé dans head). On utilisera une action non vide qui ne devra pas être déclenchée. La fonction utilisée, soit conversionKilos(x) recevra tout le formulaire et non pas juste la valeur à convertir. On fera juste la conversion, mais aucune vérification sur le type, la valeur...

    Pour les experts : dans le deuxième formulaire, arrangez-vous pour rendre le champ de réponse invisible (propriété CSS nommée visible) et rendez-la visible quand on soumet le formulaire. Attention : ce n'est pas le même code avec Firefox et Internet Explorer.

  2. Ecrire une page Web qui met, via Javascript, la valeur 8 dans la variable a, la valeur 2 dans la variable b et qui ensuite calcule et affiche leur addition, soustraction, multiplication et division. Comment demander à Javascript d'écrire dans la page ? Utilisez une grammaire stricte. Attention : cet exercice n'utilise aucun formulaire. Exceptionnellement, on utilisera window.document.write.

    Ecrire dans la même page un formulaire qui demande deux nombres entiers et qui affiche leur addition, soustraction, multiplication et division. On utilisera Javascript avec une grammaire stricte et on soignera le cas de la division. On pourra ajouter la comparaison des deux nombres (à tester avec 13 et 2). Comment demander à Javascript d'écrire dans la page qui contient le formulaire ? Utilisez une grammaire stricte. Reprendre avec 3 nombres et ajouter au passage l'affichage par ordre croissant. Exceptionnellement, on utilisera window.document.write.

  3. Ecrire une page Web qui met via Javascript la valeur 8 dans la variable a, la valeur 2 dans la variable b et la valeur 6 dans la variable c. Comment afficher ces variables par ordre croissant ? On utilisera impérativement une fonction afficheCroiss(a,b,c) et on réfléchira à l'ensemble des cas possibles. Comment devrait-on faire si on avait 4, 5, 6... valeurs ? On pourra utiliser la liste de nombres 1 5 8 2 8 3 6 8 2 pour vérifier. Utilisez une grammaire stricte. Attention : cet exercice n'utilise aucun formulaire. Exceptionnellement, et ce sera la dernière fois, on utilisera window.document.write.

  4. Ecrire une fonction Javascript qui détermine le max d'un tableau et le nombre de fois où le max apparait avec la contrainte qu'on doit utiliser une seule boucle POUR qui fait à la fois la détermination du max et le calcul du nombres d'occurences.

  5. Comment peut-on trier les colonnes d'un tableau ? Est-ce compliqué ? Pourquoi ?

  6. Ecrire une page Web qui affiche "Désolé, cette page requiert Javascript." si Javascript n'est pas activé, mais qui crée sinon un élément h1 dont le texte est "Bonjour" écrit en gras et en bleu. On utilisera une fonction externe nommée creation chargée dans l'élement head et exécutée par <body onload='creation()'>. On pourra se servir de la feuille de style std.css.

    Comment se passer de <body onload='creation()'> ? Et surtout, pourquoi ?

TP L2 numéro 4 (corrigé)   Javascript : les éléments et les attributs

  1. Ecrire une page Web qui ne contient rien dans l'élément body mais qui crée en Javascript un élément p dont le texte est "Bonjour les petits enfants !" avec seulement le mot "petits" écrit en gras et en bleu puis qui crée un paragraphe avec juste un élément a utilisant les styles bouton_rectangulaire et vert_pastel. Si on clique sur le lien, alors tout devra être effacé et on verra seulement Bonsoir dans un élément h1. On utilisera std.css et la page devra être valide pour la grammaire "strict".

  2. Modifier chacun des éléments h1, p, select/option, textarea, pre et la case 1 du tableau dans la page avantjs.php à l'aide d'une fonction Javascript exécutée par un bouton (ou un lien affiché via CSS comme un bouton) en bas de page. Pour les plus fort(e)s, créer dynamiquement ce bouton si Javascript est actif.

  3. Que fait la fonction Javascript suivante ? Comment l'utilise-t-on ? 

    
     //    (gH)   -_-  nparag.js  ;  TimeStamp (unix) : 27 Février 2010 vers 20:30
     
     function npara(nbp,cible) {
     
     for (idp=1;idp<=nbp;idp++) {
       para = document.createElement("p") ;
       text = document.createTextNode("Ceci est le paragraphe "+idp) ;
       para.appendChild(text) ;
       cible.appendChild(para) ;
     } ; // fin pour idp
     
     } ; // fin de fonction npara

  4. Comment avoir une division fixe à gauche pour tous les navigateurs ? On s'arrangera pour avoir un ascenseur visible dans la partie droite dont le texte (par exemple n paragraphes, n étant paramétrable) est écrit par Javascript. Sinon, au pire, on pourra utiliser le code HTML suivant 60paragraphes.txt.

    Comment avoir 3 divisions fixes : une en haut, une à gauche et une en bas (pour tous les navigateurs ?) On s'arrangera pour avoir un ascenseur visible dans la partie droite dont le texte (par exemple n paragraphes, n étant paramétrable) est écrit par Javascript.

  5. Comment définir en haut de page une zone de textarea de 10 lignes qui montre le déroulement du script ?

    Et une zone préformatée fixe en bas qui fait 20 % de la fenêtre ?

    Et une zone de textarea fixe en bas de 10 lignes ?

    Quelle est la meilleure de ces solutions pour "debugger" du Javascript ?

  6. Ecrire une page Web qui affiche deux drapeaux (un français et un anglais) et trois paragraphes invisibles dont le second contient une zone d'entrée texte. Remplir ces champs via Javascript quand on clique sur le drapeau.

TP L2 numéro 5 (corrigé)   Javascript : applications plus complexes

  1. Ecrire un panneau d'affichage Eux/Nous avec des "gros" boutons nommés "+" et "-" pour modifier les scores, comme dans une salle de sports. On utilisera Javascript avec une grammaire stricte et on mettra un bouton pour remettre à zéro. On commencera par une version XHTML qui utilise un tableau, on remplacera ensuite les cases du tableau par des divisions sans style et on finira l'exercice à l'aide de styles CSS.

    Ecrire un affichage d'horloge numérique pour apprendre à lire l'heure, avec avec des "gros" boutons + et - pour modifier les minutes seulement. On initalisera à 9 h 50. On utilisera Javascript avec une grammaire stricte. On initialisera à 23 h 55.

    Beaucoup plus difficile (mais plus pédagogique). Ajouter un panneau qui écrit l'heure en dessous : dix heures moins le quart pour 8 h 45, 10 heures moins dix pour 8 h 50 etc.

  2. Ecrire une page qui demande un calcul dans une zone d'entrée et qui renvoie la valeur correspondante via eval (penser à try/catch pour intercepter les erreurs).

    Fournir ensuite un tableau qui ressemble à une calculatrice comme interface de saisie, comme par exemple :

      7   8 9 +
    4 5 6 -
    1 2 3 *
    0 . efface /

  3. Fournir une interface de fabrique de drapeaux, c'est-à-dire qu'à partir de rectangles de couleurs comme :

           
           

    on pourra remplir par sélection puis par glisser/déposer trois rectangles comme ci-dessous.

                             

     

     

                             

                             

    On utilisera une zone de textarea fixe en bas de 10 lignes pour tester les scripts, qu'on activera par un bouton en Javascript.

  4. On s'intéresse à la vérification locale d'un formulaire avant son envoi par le navigateur. Ajouter le code Javascript à la page saisie de façon à obliger l'utilisateur à remplir chaque champ repéré par une astérisque rouge qu'on masquera ensuite (propriété CSS nommée visibility) quand le champ correspondant est rempli. On utilisera une expression régulière pour tester la validité de l'email qui devra comporter au moins une chaine puis le symbole @ puis deux chaines séparées par un point.

Dans le même genre d'idées, on pourrait programmer en Javascript un jeu d'échecs (source ici), un tetris comme ici ou là, un mastermind comme celui-ci...

 

 

retour gH    Retour à la page principale de   (gH)