[LOGO]

Internet, World Wide Web et HTTP
Le but de ce premier TP est double :
  1. comprendre ce qu'est Internet, le Web et comment on peut interagir avec une machine distante à l'aide du plusieurs outils (clients) comme netcat (la commande nc) ou un navigateur Web (browser) ;
  2. créer sa première page web.

Le compte-rendu de ce TP devra être déposé sur la plateforme de elearning d'ici au dimanche 02/02 à 22:00 au plus tard.

Cette semaine comme toutes celles qui suivront, il est fortement recommandé de commencer par lire l'intégralité du sujet (ou au moins de l'exercice en cours) avant de répondre au question : cela vous permettra de mieux comprendre là où les exercices vont vous emmener !

Par ailleurs, si vous avez TP le jeudi ou le vendredi, il est aussi recommandé de lire les sujets de TP à la maison avant la séance, et de commencer à faire les questions jusqu'à ce que cela devienne difficile, pour être prêts à profiter de la présence de vos enseignants pendant la séance de TP !

Cette version du TP est spécialement adaptée aux élèves dont le système d'exploitation est Linux ou Mac OS. Une autre version est disponible si votre ordinateur utilise le système d'exploitation Windows.

Exercice 0 : On sort un papier et un crayon

C'est certes facile, mais tous les ans, certains élèves n'y parviennent pas…

Exercice 1 : On commence tranquillement !

Dans un premier temps, vous allez créer un espace sur votre compte où vous stockerez les TPs ainsi que les comptes rendus correspondants.
Bien sûr, pas de clickodrome, vous êtes grands, donc vous allez utiliser un terminal pour organiser les données.

  1. Ouvrez un terminal puis créez un répertoire "progweb" dans votre répertoire personnel (home directory).
    Rappel : la commande mkdir permet de créer un répertoire et cd permet de se déplacer dans les répertoires.
  2. Créez à l'intérieur du répertoire "progweb" un répertoire tp1.
  3. À l'intérieur du répertoire "tp1", lancez la commande suivante 
    gedit compte-rendu-tp1.html &
    Ce fichier vous servira de compte-rendu de TP.
    Si vous êtes sur MacOS et si gedit n'est pas installé, vous pouvez utiliser un éditeur alternatif, à condition de ne pas enregistrer votre document sous un format enrichi. Par exemple, vous pouvez créer votre document via la commande touch compte-rendu-tp1.html, puis l'ouvrir en utilisant le logiciel TextEdit, via la commande open -a TextEdit compte-rendu-tp1.html. Attention : il faudra l'enregistrer au format plain text, et bien conserver l'extension .html (et non pas .txt).
  4. Un compte-rendu consiste à expliquer ce que vous avez fait pour traiter chaque question (une phrase par question est souvent suffisante).
    Complétez le compte-rendu avec une explication de tout ce que vous avez fait depuis le début du TP.
Pour chaque TP de programmation Web, nous vous demanderons de rédiger un compte-rendu au fur et à mesure que vous faites le TP. Si vous ne finissez pas un TP lors d'une séance, il vous est demandé de le finir par vous-même et de le déposer sur la page elearning du cours.
Chaque compte-rendu devra être écrit en HTML. C'est d'ailleurs le sujet de l'exercice 2.

Exercice 2 : Document HTML de base

  1. Recopiez dans votre fichier de compte rendu le squelette de document HTML suivant : 
    <!DOCTYPE html>
<html>
  <head>
    <title>Compte-rendu de TP1</title>
  </head>
  <body>
    <h1>Compte-rendu de TP1</h1>
    <p>
      Votre nom ici !
    </p>
    <h2>Exercice 0 : On sort un papier et un crayon</h2>
    <p>
      Voilà, c'est fait !
    </p>
    <h2>Exercice 1 : On commence tranquillement !</h2>
    <p>
      …
    </p>
    <h2>Exercice 2&nbsp;: Document HTML de base</h2>
    <h3>À quoi servent les tags h1, h2 et h3 ?</h3>
    <p>
      …
    </p>
    <h3>À quoi sert le tag p ?</h3>
    <p>
      …
    </p>
  </body>
</html>

    Remplacez ensuite "Votre nom ici !" par votre nom.
    Utilisez un navigateur Web pour afficher le résultat
    Si le résultat ne s'affiche pas correctement (entre autres l'accent de "À quoi sert le tag p ?"), que manque-t-il comme information à la balise head pour que le fichier s'affiche correctement ?
    Le résultat devrait ressembler à ceci, mais avec des informations supplémentaires.
  2. À quoi servent les tags h1, h2 et h3 ?
  3. À quoi sert le tag p ?
  4. Remplacez les … des sections "Exercice 1" et "Exercice 2" par le texte que vous aviez écrit à ces deux exercices.
Dans la suite, nous vous demandons d'ajouter de nouvelles sections (une par exercice du TP) et de compléter votre compte-rendu.

Exercice 3 : Uniform Resource Locator

On cherche à savoir où est hébergée la page du cours.

  1. Ouvrez un navigateur Web et allez à l'URL suivante: 
    http://www.w3.org/standards/
    Quel est le nom de la machine à laquelle vous accédez ?
    Quel est le nom de domaine auquel vous accédez ?
  2. Si l'on exécute 
    host w3.org
    À quoi correspond la première ligne de la réponse ?
    À quoi correspond la deuxième ligne de la réponse ?
    Et la troisième ?
  3. Dans le navigateur Web, dans la barre contenant l'URL, remplacez le nom de la machine par son adresse IP pour vérifier que cela fonctionne toujours.
    Si ça ne marche pas, que se passe-t-il ? Essayez avec google.fr.
    À votre avis, pourquoi utilise-t-on des noms pour les machines plutôt que des adresses IP ?
  4. Exécutez la commande traceroute sur une de ces adresses IP.
    Qu'affiche cette commande ?
    Comment s'appelle le réseau sur lequel est connectée l'université (ou votre domicile) ?
    Quels sont les autres réseaux qui sont traversés ?
    Si vous êtes sur Mac, il se peut que votre traceroute se coince, cela peut aider d'ajouter l'option -I (par exemple traceroute -I 8.8.8.8).
  5. Actualité du jour : le cours de programmation web a commencé ! Pour le découvrir, on souhaite consulter la page http://vincentjuge1987.github.io/.
    Utiliser la commande host pour récupérer l'adresse IP correspondant à cette machine.
  6. On cherche maintenant à voir l'ancienne version du cours, que donnait Rémi Forax, à l'adresse https://forax.github.io/course/progweb/.
    Lancer la commande host pour récupérer l'adresse IP correspondant à cette machine. Qu'observe-t-on ?
    Que se passe-t-il si on essaye d'accéder à cette page dans le navigateur en remplaçant le nom de la machine par l'adresse IP trouvée précédemment ?
    Et si on remplaçait forax.github.io par vincentjuge1987.github.io au début de l'URL ? Expliquer pourquoi.

Exercice 4 : Service HTTP

On a vu en cours comment utiliser netcat (commande nc suivie de l'option -C pour éviter les problèmes d'encodage) pour appeler un service sur une machine distante. Nous allons pouvoir utiliser la même technique pour interroger un serveur Web.

  1. Utilisez nc pour vous connecter au serveur Web de la machine monge.univ-mlv.fr en utilisant le port TCP correspondant au protocole HTTP puis tapez la requête suivante et appuyez deux fois sur "Entrée" : 
    GET /ens/ HTTP/1.0
    Quel est le port TCP correspondant au protocole HTTP ?
    Quel est le header (l'en-tête, en français) de la réponse ?
    Note : le serveur envoie une réponse composée de deux parties, séparées par une ligne vide :
    1. le header, qui est ce qui nous intéresse pour le moment,
    2. une page HTML, à laquelle nous nous intéresserons plus tard.
  2. À quoi correspondent les 3 valeurs sur la première ligne de l'en-tête ?
  3. Quel est le nom du serveur Web ?
  4. À quoi correspond la valeur de Content-Type ?
  5. À quoi correspond la valeur de Content-Length ?
  6. Faites la même analyse mais avec la requête 
    GET /ens/toto.txt HTTP/1.0
  7. Enfin, faites la même analyse avec la requête 
    GET /index.html HTTP/1.0
    À quoi correspond la valeur de Location ?
  8. Que se passe-t-il lorsque je lance la commande wget monge.univ-mlv.fr/index.html ?
    Expliquer la signification des lignes qui apparaissent sur la ligne de commande.
© Université Gustave Eiffel