ED 1 : HTTP, HTML

Exercice 1 - URLs

  1. Lancez un navigateur Web (Firefox, Google Chrome, etc.). Consultez l'URL http://www.w3.org/Consortium/activities. Le Web étant une "architecture client/serveur", dans l'exemple précédent, qui joue le rôle de client, qui joue le rôle de serveur ?

  2. Une URL (Universal Resource Locator - adresse universelle de données) a généralement la forme suivante :
    <protocole>://<nom de machine>.<nom de domaine><:numero de port>/<chemin>/<document>
    Décomposez l'URL précédente en ses différents éléments.
    • Si la partie <document> est vide, le serveur renvoie un document par défaut, souvent index.html.
    • Si le slash final n'est pas indiqué par l'utilisateur, le navigateur le rajoute automatiquement. Ainsi, le chemin envoyé au serveur est correct.
  3. Fabriquez une URL pour le protocole http, machine deptinfo, nom de domaine cnam.fr, port 80, chemin /new/.
  4. Faites de même en remplacant <nom de machine>.<nom de domaine> par 163.173.228.28. Comment s'appelle ce type de numéro?
     
    Lancez une fenêtre de commandes (terminal) pour utiliser les commandes suivantes:
    • nslookup <machine.domain> permet d'obtenir l'adresse d'une machine.
    • nslookup <adresse IP> permet d'obtenir le nom de la machine correspondante.

Exercice 2 - Serveur Web

  1. Consultez l'URL http://localhost/ (sous Windows) ou  http://localhost/~licencep (sous Linux). Qu'observez-vous ?
  2. A quoi fait référence le nom de machine localhost ? Qui joue le rôle du client et du serveur dans cet exemple ?
  3. Le serveur web Apache (lancé automatiquement au démarrage des machines en salle de TP) utilise un répertoire particulier pour stocker les fichiers de votre machine accessibles sur le web; ce répertoire est précisé par la variable DocumentRoot du fichier de configuration d'Apache.
    Dans la plupart des salles de TP ce répertoire de travail est C:\www (sur windows) et ~<login>/public_html (sur Linux); il sera référencé par %DOCUMENT_ROOT% dans le reste de ce document.
    Créez un fichier hello.txt dans %DOCUMENT_ROOT% et  consultez l'URL http://localhost/hello.txt ou http://localhost/~licencep/hello.txt.

Exercice 3 - HTML

Créez un nouveau répertoire  ed1 dans %DOCUMENT_ROOT%
  1. Consultez l'URL ../EXEMPLES/Ex3.html. Dans votre navigateur, visualisez le code source de cette page. Comment s'appelle ce format ? Est-ce un fichier binaire ? Qu'est ce qu'une balise ?
    • Affichage -> source permet d'afficher le code source d'une page HTML.
  2. Enregistrez cette page sous le nom "Ex3.html" dans votre répertoire de travail %DOCUMENT_ROOT%/ed1
  3. Visualisez cette page dans votre navigateur en construisant l'URL adéquate.
  4. Modifiez la page, par exemple en y modifiant le nom d'un réalisateur ou en y ajoutant un film. Visualisez la modification.
  5. Avec un éditeur de texte (Bloc-notes, Emacs, Visual Studio Code ou autre)  réalisez une page HTML avec pour titre "CINEMA DE QUARTIER", un titre de niveau 1 "CINEMA DE QUARTIER", un paragraphe indiquant "Bienvenue au cinéma de quartier. Cliquez ici pour voir nos programmes.". Ajouter un lien hypertexte sur le mot "ici", pointant vers l'URL www.allocine.fr.
    • Ne pas oublier l'extension lors de la sauvegarde du fichier.
  6. Le cinéma est ouvert le mardi (14h-22h) et le jeudi (10h-22h). Présentez cette information avec une liste non ordonnée.
  7. Que se passe-t'il si vous faites des erreurs dans les codes HTML ?
  8. Refaites le même travail avec un éditeur HTML (KompoZer). Comparez le document source obtenu. Continuez cet ED avec l'éditeur de texteVisual Studio Code.
  9. Le cinéma possède quatre salles nommées Tati, Trumbo, Scott et Kurosawa avec respectivement 100, 150, 50 et 50 places. Présentez cette information dans un tableau avec en-tête.
    • L'attribut border de la balise table permet d'afficher les bordures des cellules.
  10. Les 100 places de la salle Tati se décomposent en 80 fauteuils et 20 strapontins. Indiquez-le en insérant un tableau dans la cellule correspondante du tableau précédent.
  11. Chercher avec google Image (www.google.fr) une illustration de votre choix. Enregistrez cette image dans votre répertoire %DOCUMENT_ROOT%/ed1 et faites-la apparaître dans votre document.
  12. Faites une nouvelle page HTML contenant un message publicitaire. Insérez dans cette page une autre image de votre choix, mais sans la télécharger.