TP 01 : Premières pages, validation

Licence Humanités Numériques 1ère année

Jean-Marc Lecarpentier — Justine Reynaud

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Exercice 1 — Serveur et pages web #

Serveur personnel

Le résumé d'utilisation de votre serveur personnel présente les différentes étapes.

  • Dans votre navigateur Firefox, allez à l'URL https://dev-XXXX.users.info.unicaen.fr avec XXXX qui est votre n° étudiant.e
    Que trouvez-vous sur votre serveur ?
  • Utilisez Filezilla pour se connecter à votre serveur en sFTP.
  • Dans le dossier www-dev de votre serveur, créez un dossier 1HU91, allez dedans et créez un dossier TP01 puis ex1 et placez vous dedans (vous devez donc être dans www-dev/1HU91/TP01/ex1/).
  • Regardez sur Firefox le contenu de votre site personnel. Qu'est-ce qui a changé ?

Première page

  • Sur votre ordinateur, créez un dossier pour les TPs de 1HU91 et créez un dossier TP01 dedans.
  • Lancez votre éditeur de code (Atom ou autre)
  • Créez un nouveau fichier et collez-y le contenu HTML de ce fichier.
  • Enregistrez le fichier avec le nom test1.html sur votre ordinateur dans votre dossier TP01. Attention pour les utilisateur de Windows, dans votre gestionnaire de fichiers, l'extension des fichiers est cachée pae défaut, donc on ne voit pas le .html. Pour changer ça voir comment faire.
  • Avec Filezilla, placer le fichier test1.html sur votre serveur dans le dossier www-dev/1HU91/TP01/ex1/.
  • Allez voir la page web correspondante dans votre navigateur.
  • Faire de même une deuxième page test2.html avec le contenu HTML de ce fichier et la placer sur le serveur dans www-dev/1HU91/TP01/ex1/.
  • Allez voir la page web correspondante dans votre navigateur. Quelles sont les différences d'affichage ?
  • Regardez le code source des 2 pages en faisant Ctrl-U (dans Firefox). Les codes sources correspondent au texte que vous avez dans vos fichiers test1.html et test2.html. Quelles sont les différences ?

Validation des pages

  • Allez sur le site du validateur HTML du W3C.
  • Attention le validateur ne peut pas accéder à vos serveurs (accès restreint) donc vous devez utilisar la validation par File Upload en envoyany votre fichier HTML ou Direct Input en faisant un copier/coller du contenu de votre fichier.
  • Validez vos 2 fichiers test1.html et test2.html. Quelles sont les différences ?
  • Que peut-on conclure ?

Vérification de votre TP

Pour chaque TP à venir, vous aurez à terminer un ou plusieurs exercices et à les mettre en ligne sur votre serveur à un URL précis donné dans l'énonce. Un robot parcourera ensuite vos serveurs pour collecter des informations sur ce qui a été déposé. Si votre exercice n'est pas placé au bon endroit, il sera considéré comme non rendu et noté 0.

Pour éviter les erreurs, un service de vérification vous permet de vous assurer que votre exercice est bien placé. Nous allons tester si la page test1.html est bien placée sur votre serveur.

  • Connectez vous au serveur evalweb à https://evalweb.users.info.unicaen.fr/etu/ avec votre etuP@ss.
  • Utilisez la liste déroulante pour choisir l'exercice à tester. Quel est le résultat ?
  • Modifiez votre fichier test1.html pour y ajouter la balise meta qui indique qui est l'auteur de la page comme ceci :
    <meta name="author" content="XXXX" />
    où XXXX est votre n° étudiant.
  • Enregistrer le fichier et placer cette nouvelle version sur le serveur.
  • Tester à nouveau avec evalweb.

Exercice 2 — Glossaire HTML #

Compléter le glossaire des éléments HTML sur ecampus.