:: Enseignements :: ESIPE :: E3INFO :: 2020-2021 :: Programmation Web avec JavaScript ::

Internet, World Wide Web, HTTP, HTML, CSS

Le but de ce premier TP est de 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).
Chaque TP est à faire individuellement, devant sa machine seul !
Attention, ce TP nécessite que vous ne soyez pas sur un réseau WIFI publique (ouvert à tous) car certains services ne sont pas ouverts, donc bizarrement, cela marche pas bien.

Pour tous les TPs, on vous demanderas un compte rendu au format HTML (avec sa feuille de style CSS). Le compte rendu du TP1 s'appel tp1.html, et la feuille de style CSS correspondante tp1.css.
On vous demande pendant le TP de prendre des notes qui serviront de base à votre compte rendu, si vous rédigez trop les notes de votre compte rendu, vous n'aurez pas le temps de finir le TP dans les 2h imparties. Il est plus important de prendre des notes rapides lorsque vous avez accès aux machines puis de tranquillement rediger le compte rendu de TP chez vous.
Un compte rendu de TP doit indiquer ce que vous avez fait, ce que la machine affiche/fait, et votre analyse et ce pour chaque item des exercices suivantes. Un copier/coller ou une capture d'écran de la réponse de la machine sont bienvenus mais pas suffisant si il n'y a pas d'explication autour.
Chaque compte rendu de TP doit être envoyé sur la plateforme elearning, au plus tard, le vendredi soir qui suis la sécance de TP.

Exercice 1 - Document HTML de base

Recopiez dans votre fichier de compte rendu le squelette de document HTML suivant :

     <!DOCTYPE html>
     <html>
       <head>
       </head>
       <body>
        <h1>Compte Rendu de TP1</h1>
        <p>
          Votre nom ici !
        </p>
        <h2>Exercice: Document de base</h2>
        
        <h3>A quoi servent les tags h1, h2 et h3</h3> ?
        <p>
          votre réponse ici
        </p>
        ...
       </body>
     </html>

Remplacez ensuite "Votre nom ici !" par votre nom.
Utilisez un browser Web pour afficher le résultat
Si le résultat ne s'affiche pas correctement (entre autre l'accent de "réponse"), que manque t'il comme information à la balise head pour que le fichier s'affiche correctement ?

A quoi servent les tags h1, h2 et h3 ?
A quoi sert le tag p ?
Ajoutez à votre compte rendu la phrase suivante :
```
     Les tags HTML commencent par une balise ouvrante <foo> et finissent
     par une balise fermante </foo>
    
```
Note: pour votre compte rendu, il vous faudra surement utiliser les entités < qui correspond à < et > qui correspond à >.
Comment mettre en gras ou en italique ?
Astuce: ouvrez le fichier HTML correspondant au sujet de TP dans le browser avec un click bouton droit "View Page Source" puis cherchez le mot Shibboleet avec un Ctrl-F, cela devrait être juste au dessus.
Et comment faire pour mettre un mot à la fois en gras et en italique ?
On souhaite que le titre de la fenêtre du navigateur soit "Compte Rendu de TP1", comment faire ?
Note: la balise head possède un élément title.
Ajoutez un lien (le tag A) vers le cours avec comme titre cours de programmation web.
Prenez une feuille de papier puis dessinez l'arbre des différents tags correspondant à votre compte rendu.
Attention à bien respecter quel tag se trouve déclaré dans tel autre.
Avec votre smartphone (ou celui du voisin), prenez une photo de la feuille de papier sur laquelle vous avez dessiné l'arbre et envoyez-la vous par mail. Puis allez dans vos mails pour récupérer l'image et la sauvegarder sous le nom de mon-super-arbre.jpg.
Utilisez ensuite le tag img pour inclure l'image dans votre compte rendu.
Attention, cela risque d'être un peu gros visuellement, il vous faudra sûrement jouer avec les attributs width et height de img pour avoir une image de dimensions acceptables.
PS: N'oubliez pas l'attribut alt du tag img !
Creér le fichier tp1.css vide et ajouter un lien de votre compte rendu vers le fichier CSS pour que vous puissiez avoir un jolie rendu lorsque, à la maison, vous ajouterez quelques commandes CSS.

Exercice 2 - Uniform Resource Locator

On cherche à savoir où est hébergé le cours de programmation Web.

Ouvrez un navigateur Web et allez à l'URL suivante:
```
      http://monge.univ-mlv.fr/ens/
    
```
Quel est le nom de la machine à laquelle vous accédez ?
Quel est le nom de domaine auquel vous accédez ?
Si l'on exécute
```
     host monge.univ-mlv.fr
    
```
À quoi correspond la première ligne de la réponse ?
À quoi correspond la seconde ligne de la réponse ?
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.
A votre avis, pourquoi utilise-t-on des noms pour les machines plutôt que des adresses IP ?
On cherche maintenant à faire la même chose avec la machine hébergeant le cours http://forax.github.io/course/progweb/.
Utiliser la commande host pour récupérer l'adresse IP de la machine correspondant à l'URL.
Que se passe-t-il si on essaye d'accéder à la page du cours dans le browser en remplaçant le nom de la machine par l'adresse IP trouvée précédemment ?
Expliquer pourquoi.
Exécutez la commande traceroute sur l'adresse IP de la machine forax.github.io.
Qu'affiche cette commande ?
Quel est le nom du routeur de sortie (le premier que vous rencontrez) ?
Comment s'appelle le réseau sur lequel est connecté (le nom de domaine du routeur après le routeur de sortie) ?
Quels sont les autres réseaux qui sont traversés ?
Nous allons nous intéresser au site Web http://www.mai-ko.com/.
Quel est le nom de la machine hébergeant le site Web ?
Quel est le nom de domaine associé à cette machine ?
En utilisant la commande whois dans un terminal, trouvez quelle est la ville (sur terre) de l'hébergeur de cette organisation.
Note: au lieu d'envoyer n'importe quoi en paramètre de la commande whois, commencer par faire un man whois pour avoir le manuel de la commande whois, comme cela vous saurez ce que prend la commande whois comme paramétre.
Puis faites un ping sur la machine www.mai-ko.com.
Les temps affichés et le ttl vous semble-t'il corrects ?
Faire de même avec la machine forax.github.io qui héberge le cours (whois + ping)
Que pouvez vous en déduire (regarder le temps du ping et aussi le ttl) ?

Exercice 3 - Perroquet, quelle heure est-il ?

Jouons à interroger des services sur une machine distante.

On cherche à savoir à quoi correspond le fichier /etc/services. Pour cela, dans le terminal tapez la commande man services
Rappelez ce que fait la commande grep.
Utilisez la commande grep pour déterminer le numéro du port TCP correspondant au service echo.
Utilisez la commande nc (netcat) pour tester le service echo sur la machine gaspard.univ-mlv.fr.
Note1: soyez un peu curieux avant de répondre que cela ne fait rien.
Note2: pour fermer la session, on utilise Ctrl-D.
Faites la même manipulation avec le service daytime toujours sur la machine gaspard.univ-mlv.fr.
Comment interpréter la réponse de la machine ?
Enfin, quel est le port TCP correspondant au service HTTP ?

Exercice 4 - Service HTTP

Grâce à l'exercice précédent, nous savons comment appeler un service sur une machine distante. Nous allons pouvoir utiliser la même technique pour interroger un serveur Web.

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 :
```
     GET /ens/ HTTP/0.9
    
```
Quel est le header (l'entê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 :
- le header qui est ce qui nous intéresse pour le moment,
- puis le contenu HTML de la page Web, à laquelle nous nous intéresserons plus tard.
A quoi correspondent les 3 valeurs sur la première ligne de l'entête ?
Quel est le nom du serveur Web ?
A quoi correspond la valeur de Content-Type ?
A quoi correspond la valeur de Content-Length ?
Faites la même analyse mais avec la requête
```
     GET /ens/toto.txt HTTP/0.9
    
```
Enfin, faites la même analyse avec la requête
```
     GET /index.html HTTP/0.9
    
```
À quoi correspond la valeur de Location ?

Exercice 5 - Les listes et les tables

Dans votre compte rendu, écrivez la liste suivante sous forme d'une liste avec des bullet points (liste à puces en français).
```
     . carotte
     . navet
     . betterave
    
```

Dans votre compte rendu, écrivez la table de multiplication suivante sous forme d'une table HTML

      *  1  2  3  4
      1  1  2  3  4
      2  2  4  6  8
      3  3  6  9 12
      4  4  8 12 16

Modifiez la table pour que la première ligne et la première colonne soient considérées comme des titres (respectivement de colonnes ou de lignes).
On souhaite ajouter une case faisant 2 colonnes et une case faisant deux lignes.
Allez chercher dans la spécification du Standard HTML5 comment faire pour avoir de telles cases et expliquez dans votre rapport comment vous avez fait pour trouver l'information.