:: Enseignements :: ESIPE :: E3INFO :: 2024-2025 :: 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 de 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 public (ouvert à tous) car certains services ne sont pas ouverts, donc bizarrement, cela ne marche pas bien.

Pour tous les TPs, on vous demande un compte rendu au format HTML (avec sa feuille de style CSS). Le compte rendu du TP1 s'appelle 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 rédiger 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 suivants. Un copier/coller ou une capture d'écran de la réponse de la machine sont bienvenus, mais pas suffisant s'il n'y a pas d'explication autour.
Chaque compte rendu de TP doit être envoyé sur la plateforme elearning, au plus tard, le mardi soir qui suit la séance 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-arbre-a-moi.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 !
Créer le fichier tp1.css vide et ajouter un lien de votre compte rendu vers le fichier CSS pour que vous puissiez avoir un joli rendu lorsque, à la maison, vous ajouterez quelques sélecteurs CSS pour que cela ne soit pas trop moche.

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ée l'université (le nom de domaine du routeur qui est 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.
Warning : le ping ne marche pas sur le wifi de la fac, les admins réseaux ne vous aime pas ...
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 - Service HTTP

On va faire quelques requètes HTTP à la main pour voir comment le protocole HTTP marche.

On cherche à savoir à quoi correspond le fichier /etc/services. Pour cela, dans le terminal, tapez la commande man services
Utilisez la commande grep sur le fichier /etc/services pour déterminer le numéro du port TCP correspondant au service http.
Maintenant que l'on sait quel est le numéro de port TCP de HTTP, utilisez nc pour vous connecter au serveur Web de la machine www.example.com en utilisant le port TCP correspondant au protocole HTTP puis tapez la requête suivante :
```
     GET / HTTP/0.9
    
```
Puis ajouter deux retours à la ligne (RETURN, ENTER, etc)
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 ?
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 / HTTP/1.1
     Host: www.example.com

Pourquoi dans la version 1.1 du protocole HTTP, on doit fournir le Host ?
Enfin, sur la machine www.forax.org, faite la requête suivante et analysé la réponse
```
     GET / HTTP/1.1
     Host: www.forax.org
    
```
À quoi correspond la valeur de Location ?

Exercice 4 - Les listes et les tables

Changer votre compte rendu pour que chaque question / réponse de votre compte-rendu soit numérotée automatiquement en utilisant les balises OL / LI.
Au début de votre compte rendu, on va ajouter un cartouche indiquant votre nom, votre formation, et le numéro du TP et le nom de la matière sous forme d'une table HTML.
En ascii-art, cela donne
```
     -----------------------------------------
     |              | MICHEL PREFERERESTBASH |
     -----------------------------------------
     | ESIPE INFO 1 |                        |
     -----------------------------------------
     | TP 1 de Programmation Web             |
     -----------------------------------------
    
```
On veut un rendu le plus identique possible à la feuille de TP.
On peut noter que la dernière ligne est sur 2 colonnes, allez chercher dans la spécification du Standard HTML5 comment faire et indiquer dans votre compte rendu comme vous avez fait pour trouver la réponse et où elle se situe dans le document (oui, je sais c'est en anglais, mais vous êtes grand maintenant).
Vérifier que votre compte-rendu passe bien le validateur de HTML validateur du W3c
Si ce n'est pas le cas, modifier le HTML !