Examen : Programmation WWW

Tous les documents sont autorisés (supports de cours, livres, exemples de fichiers HTML, CSS ou CGI)

Durée : 1h30

Première partie : HTML 4 (8 pts)

  1. (3 pts) Voici un court document écrit en HTML4 "strict", trouvez les 7 erreurs qui s'y sont glissées :
    <html>
      <head>
        <title>
          titre de la page
        </title>
      </head>
      <body>
        <center><h1>titre centré</h1>
        Voici le texte de la page.
        <li>Voici un élément de liste</li>
        <img src="logo.gif">
        <table summary="une table">
        <td>element1</td>
        <td>element2</td>
      </body>
    </html>
    
  2. (2 pts) Comment décririez-vous en HTML le tableau suivant ? Le tableau prend toute la largeur de la page, le bandeau supérieur fait 100 pixels de haut, et la première colonne fait 20% de la largeur.
    +---------------------------+
    |      titre                |
    +-----+---------------------+
    |tdm  | contenu             |
    |     |                     |
    |     |                     |
    |     |                     |
    |     |                     |
    +-----+---------------------+
    
  3. (2 pts) Décrivez la même structure avec un frameset
  4. (1 pt) Quel est l'intérêt d'écrire des documents respectant la syntaxe et la grammaire HTML, alors que les navigateurs arrivent souvent à afficher des documents mal formés ? Citez deux outils permettant de vérifier et/ou corriger cette syntaxe.

Deuxième partie : CSS (4 pts)

  1. (2 pts) Rappelez en une phrase l'intérêt de l'utilisation des feuilles de style, par rapport à la méthode qui consistait à include les éléments de style dans le HTML
  2. (2 pts) Écrivez une feuille de style comportant les caractéristiques suivantes :
    1. Le fond de la page est blanc, l'image de fond est "paper.gif", elle se répète horizontalement et verticalement, la marge à gauche est de 2cm, la police utilisée pour le corps du document est Arial (ou Helvetica, ou toute autre police sans sérif) en taille 12pt.
    2. les éléments de liste ordonnée sont (OL) écrits en bleu
    3. Les paragraphes de classe "important" sont écrits en rouge.
    4. les éléments de sous-liste (liste incluse dans une liste) sont écrits en vert.

Troisième partie : Protocole, clients et serveur (5 pts)

  1. (3 pts) Voici un exemple de transaction HTTP. La première ligne est la commande de connection au serveur (ici www-sop.inria.fr). La première ligne vide sépare la partie envoyée par le client (navigateur) de la réponse du serveur. Décrivez rapidement chaque ligne, repérée par son numéro :
    1. % telnet www-sop.inria.fr 80
    2. GET /chir/personnel/devernay/ HTTP/1.0
    3. User-Agent: Mozilla/4.61
    4. Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, image/png, */*
    5. Accept-Language: fr, en
    6.  
    7. HTTP/1.1 200 OK
    8. Date: Sun, 28 May 2000 13:47:17 GMT
    9. Server: Apache/1.2.6
    10. Last-Modified: Tue, 02 May 2000 08:59:59 GMT
    11. Content-Length: 8363
    12. Content-Type: text/html
    13.  
    14. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    15. ... (suite du document)
  2. (1 pt) À quoi sert l'en-tête de requête "If-Modified-Since: ..." dans une requête de type GET ?
  3. (1 pt) La connection du client au serveur WWW peut se faire soit directement, soit à travers un proxy-cache (à l'Université de Nice, un proxy-cache tourne sur le port 8080 de la machine cache.unice.fr). Un tel dispositif peut-être utile lorsque les connections directes vers l'extérieur sont impossibles (utilisation d'un firewall). Quel est l'autre intérêt essentiel d'un proxy-cache ?

Quatrième partie : formulaires et CGI (7 pts)

Le but est de réaliser un groupe de discussion (type forum ou news) à base de CGI, fonctionnant de la manière suivante :

  1. La page d'entrée dans le forum présentera la liste des titres de messages avec leurs auteurs. En bas de cette page, un formulaire, contenant les champs "auteur", "contenu" et "titre", permet de poster un nouveau message sur le groupe
  2. Quand on clique sur le message, on arrive sur une autre page, montrant le contenu du message. En bas de cette page, un formulaire, contenant les champs "auteur", "contenu" et "titre", permet de poster une réponse au message courant. Le champ titre est initialisé avec le titre de la page courante, précédé de la chaîne de caractères "Re: ".

Questions :

  1. (4 pts) Comment organiseriez-vous le fonctionnement de ce groupe de discussion sur la machine serveur (nombre et rôle des scripts CGI, fichiers stockés sur le serveur et leur contenu...) ? Inspirez-vous des exemples vus en TD.
  2. (3 pts) Expliquez en détail le fonctionnement du script permettant de poster un nouveau message dans le groupe, et si vous en avez le temps écrivez-le en shell ou en perl.

Frederic Devernay