TP 1 - Architecture du Web

Retour à la page de l'UE

Dans ce TP, vous devrez effectuer des actions et répondre à des questions. Vous devrez produire un compte-rendu du TP, qui sera un fichier du format de votre choix (texte, odt, pdf...). Les questions pour lesquelles il faudra écrire la réponse dans le compte-rendu auront ce style : encadrées en pointillés sur fond gris. Pour le rendu de ce premier TP, vous joindrez simplement votre compte-rendu à un e-mail que vous enverrez à jplozi [à] unice [point] fr. Le titre de votre e-mail devra commencer par [SLZA0341-TP1].

Exercice 1 : un avant-goût d'HTML

Nous n'avons pas encore vu HTML en cours, mais pas de panique ! Vous n'avez rien besoin de savoir pour faire cet exercice, au cours duquel vous serez guidé. Grâce au navigateur Chromium, ouvrez la page suivante : http://www.i3s.unice.fr/~jplozi/intro_web/exemples/bonjour_html.html

Il s'agit d'une page web basique écrite en HTML. Affichez sa source (i.e., son code HTML) et essayez de la comprendre. Dans la source, vous verrez des balises. Il s'agit de blocs de la forme <balise>contenu</balise>.

Question 1.1. Repérez les quatre éléments suivants :
  1. Le titre de la page
  2. Le code de la page
  3. Le texte d'en-tête principal
  4. Un paragraphe
Quelles balises HTML y sont associés ?

Via un menu contextuel, affichez l'inspecteur de Chromium sur la page. Celui-ci vous permet de modifier le code HTML de la page localement (les modifications ne seront pas stockées sur le serveur, et elles seront perdues lorsque vous fermez la page).

Question 1.2. Modifiez le texte de l'en-tête pour qu'il dise "Ma page web", et supprimez le texte barré ("Ce texte est à supprimer"). La balise <em> permet de mettre en valeur du texte : servez-vous-en pour mettre en valeur la chaîne "HTML 5". Quel effet cela a-t-il ? Insérez le code source de la page modifié dans votre compte-rendu.

Exercice 2 : la pile de protocoles

Maintenant que nous avons accédé à une page web via le navigateur, nous allons mettre les mains dans le cambouis et essayer de comprendre ce qui se passe à plus bas niveau lorsqu'on accède à cette page web.

Ouvrez un terminal (xterm). Grâce à une commande telle que ping, nslookup, host, ou dig, trouvez l'adresse IPv4 de www.i3s.unice.fr. Si vous ne savez pas ce que fait une commande, vous pouvez consulter son manuel en utilisant la commande man.

Question 2.1. Quelle est l'adresse IP de www.i3s.unice.fr ?
Question 2.2. La commande ping6 utilise exclusivement le protocole IPv6. Utilisez-la avec www.i3s.unice.fr. Quel résultat obtenez-vous ? Que pouvez-vous en déduire ?

La commande traceroute permet de suivre le chemin de vos paquets de données lorsque vous vous connectez à un serveur distant.

Question 2.3. Utiliser la commande traceroute pour voir la trace du cheminement de vos paquets vers www.i3s.unice.fr. Par quelles machines/routeurs vos paquets passent-t-ils ? Ignorez les lignes avec seulement des astérisques (il s'agit de serveurs qui n'ont pas pu être identifiés).

La page web suivante décrit le protocole HTTP 1.0: http://tools.ietf.org/html/rfc1945#section-5.1.2. Dans la section 5.1.2, vous avez des exemples de requêtes HTTP.

Question 2.4. Quelle requête HTTP GET permettrait d'accéder à la page que vous avez consultée dans l'exercice 1 ?

Sans entrer dans les détails, la commande telnet permet d'établir une session TCP/IP avec une machine. Connectez-vous avec telnet à www.i3s.unice.fr, sur le port 80, qui est le port par défaut du protocole HTTP. Tapez votre requête HTTP GET, puis tapez entrée deux fois. Si vous ne vous êtes pas trompés, vous devriez recevoir un header HTTP, et le code source de la page que vous aviez consultée dans le premier exercice.

Question 2.5. Le header HTTP vous donne des informations sur le serveur qui vous a servi la page. Quel est le code HTTP que vous avez reçu ? Quelle est la valeur du champ Server ? Qu'est-ce que cela signifie ?
Question 2.6. Produisez une requête GET sur www.i3s.unice.fr qui vous renvoie une erreur 404. Vérifiez avec telnet que vous recevez bien ce code d'erreur.

Exercice 3 : les URLs

Comme nous l'avons vu en cours, dans une URL, une ancre ("anchor") permet de spécifier un emplacement dans une page web. Pour lier une ancre à un morceau de la page, on utilise, dans une balise HTML, le paramètre id.

Question 3.1. Affichez la source HTML de cette page de TP. À quel attribut id correspond le premier exercice ? Donnez une URL telle que, lorsqu'on l'entre dans la barre d'adresse du navigateur, il ouvre la page du TP, et la première ligne affichée est "Exercice 1: un avant-goût d'HTML".

Le script PHP ../exemples/A2moinsB2.php récupère les variables A et B passées dans l'URL, puis calcule et affiche A²-B². Si A ou B ne sont pas passées dans l'URL, le script considère que leur valeur est zéro.

Question 3.2. Produisez une URL qui utilise le script A2moinsB2.php pour afficher la valeur 5.

La base de données WHOIS permet de consulter des informations sur tout nom de domaine enregistré.

Question 3.3. Aller sur le site http://www.gandi.net et trouvez où vous pouvez accéder à la base de données WHOIS pour un nom de domaine. Consultez la base de données pour le domaine unice.fr. À quelle date a-t-il été enregistré ?

Exercice 4 : votre espace web

Dans votre répertoire personnel, créez un répertoire appellé www, s'il n'existe pas. Dans ce répertoire, récupérez le fichier bonjour_html.html de l'exercice 1 à l'aide de la commande wget. Renommez-le (commande mv) en index.html. Copiez index.html (commande cp) dans un fichier nommé toto.html. Modifiez toto.html (avec un éditeur de texte tel que gedit ou emacs) pour supprimer le texte barré.

Question 4.1. Accedez à http://www-mips.unice.fr/~login/index.html (vous devez remplacer login par votre nom d'utilisateur). Accédez maintenant à http://www-mips.unice.fr/~login/toto.html. Finalement, accédez à http://www-mips.unice.fr/~login/ Que constatez-vous ? Qu'est-ce que cela signifie ?

Supprimez la page toto.html. Lancez cette commande sur index.html :

chmod a-r index.html
Question 4.2. Chargez à nouveau la page index.html dans votre navigateur. Que constatez-vous ? Qu'a fait la commande chmod précédente ? Vous pouvez utiliser son manuel et/ou rechercher sur internet pour trouver une réponse.

Pour annuler l'action de votre précédente commande chmod, utilisez :

chmod a+r index.html

Supprimez la page toto.html. Créez un répertoire ~/www/images/. Sur Google Images, téléchargez une (petite) image et enregistrez-la dans ce répertoire. Modifiez votre page index.html afin d'afficher l'image en bas de votre page. Pour trouver comment faire, recherchez sur google "balise img html" (ou "img tag html") afin de comprendre le fonctionnement de la balise img.

Question 4.3. Quelle ligne de HTML avez-vous utilisé pour afficher une image en bas de votre page ?

En bas de votre page, ajoutez un lien vers le site de l'université de Nice. Pour savoir comment ajouter un lien en HTML, cherchez sur Google ! Vous trouverez facilement une solution.

Question 4.4. Quelle ligne de HTML avez-vous utilisé pour ajouter un lien vers le site de l'université de Nice en bas de votre page ?

Pour aller plus loin...

Modifiez la page index.html pour la faire ressembler à un début de page web personnelle. Vous pouvez regarder la source de ce TP et essayer de la comprendre pour découvrir comment faire certaines choses en HTML. Expérimentez !

Valid XHTML 1.1