Premières pages, structure HTML

Formations enseignants ISN

Jean-Marc LecarpentierAlexandre Niveau

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Cette première séance de TP est essentielle puisque l'on met en place l'environnement de travail que l'on utilisera tout au long des TP, et que l'on aborde les bases du développement web avec la création et la validation de pages HTML.

Réalisez avec attention la mise en place de votre environnement de travail : le temps passé sera largement gagné ensuite en temps de développement grâce aux fonctionnalités des outils proposés.

Outre cette mise en place, les exercices ont pour objectif de voir ou revoir les bases de HTML, avec une difficulté graduelle, en particulier pour les premiers exercices. Le TP est très guidé au début, pour garantir que tout le monde comprenne les bases. Les exercices sont plus ou moins en auto-apprentissage ; l'utilisation des ressources du web pour apprendre de nouvelles techniques est en effet l'outil fondamental du développeur web !

Exercice 1 — Mise en place de l’environnement de travail : Hello world #

Fonctionnement de l'espace personnel

Le département met à votre disposition un espace personnel sur le web. Son fonctionnement est expliqué sur cette page de la FAQ du département, de manière un peu technique. Ci-dessous, un résumé très incomplet, mais qui se veut plus accessible pour les non-initié·e·s.

Votre espace personnel se divise en deux parties :

  • une partie publique, à l'adresse https://NUMETU.users.info.unicaen.fr/, accessible par le monde entier : vous pouvez y héberger des pages personnelles. La partie publique n'est pas activée par défaut, il faut en faire la demande (en justifiant d'un véritable besoin).
  • une partie privée, à l'adresse https://dev-NUMETU.users.info.unicaen.fr/, accessible uniquement par etupass/persopass (sauf à l'intérieur de l'université). Cet espace est dédié au développement : c'est là que vous devez faire les TP.

Attention : tout ce qui est publié dans votre espace personnel l'est sous votre entière responsabilité.

Cet espace personnel est hébergé sur un serveur web. Pour y publier des pages, il faut les transférer sur le serveur. Pour cela, plusieurs solutions sont possibles : utiliser un client SFTP ou monter l'espace personnel sur votre machine. Ces deux possibilités sont détaillées dans la section « Connexion au serveur » de la FAQ : allez la lire.

Sur le serveur, votre espace est dans le répertoire /users/NUMETU/. Il contient plusieurs répertoires, dont en particulier :

  • www-prod correspond à la partie publique de votre site,
  • www-dev correspond à la partie privée de votre site,
  • private est inaccessible depuis le web (on y met des fichiers contenant des mots de passe, par exemple),
  • evalweb contient les rapports de l'application d'évaluation des TP,
  • tmp contient les fichiers temporaires (upload).

Pour information, votre espace personnel a une interface web d'administration, à l'adresse https://NUMETU.users.info.unicaen.fr/myadmin/, qui permet notamment de consulter les messages d'erreur du serveur. Pour finir, la FAQ contient pas mal d'autres informations, notamment techniques ; assurez-vous de l'avoir consultée avant de poser des questions.

Questions

  1. Accédez au répertoire www-dev de votre espace personnel sur le serveur et créez-y un fichier index.html (s'il n'y en a pas déjà un).
  2. Ouvrez-le avec votre éditeur favori (si vous ne savez pas lequel choisir, prenez Geany, simple et relativement complet et léger).
  3. Écrivez n'importe quoi dedans, par exemple Hello world. Enregistrez.
  4. Ouvrez Firefox (on n'utilisera que Firefox dans ce module) et rendez vous à l'URL https://dev-NUMETU.users.info.unicaen.fr/. Vous devriez voir ce que vous avez écrit dans le fichier. Si ce n'est pas le cas, demandez de l'aide.
  5. Tant que vous y êtes, rendez vous à l'URL https://dev-NUMETU.users.info.unicaen.fr/evalweb/. Entrez vos identifiants. Vous devriez voir le rapport de rendu du TP4 d'Environnement informatique. Assurez-vous que votre rendu était correct, notamment la balise meta ! Tous les exercices à rendre du module Technologies web seront à déposer sur votre serveur, à l'endroit spécifié, avec la balise meta, comme au TP4 d'Environnement informatique.
  6. Retournez dans l'éditeur et essayez d'utiliser des balises HTML dans index.html, comme h1, em, strong, p, etc. (liste de tous les éléments HTML5) et regardez le résultat.
  7. La page ainsi créée n'est pas valide. Complétez-la en ajoutant les éléments nécessaires (voir « page minimale » dans le cours).
  8. Vérifiez que votre page est valide en utilisant le validateur du W3C ou son clone sur le serveur de l'université (qui supporte plus de charge). Modifiez-la jusqu'à ce qu'elle le soit.
  9. Dans Firefox, expérimentez le raccourci « Control-u » pour afficher le code source de la page. Essayez sur d'autres pages du web. Cette fonction est également accessible dans le menu contextuel (clic droit).
  10. Renommez le fichier index.html en hello.html et actualisez la page dans le navigateur : que se passe-t-il et pourquoi ?
  11. Créez un fichier squelette.html qui contient un squelette de page HTML5 vierge. Faites attention à ce que l'encodage du fichier soit UTF-8 (vérifiez dans les préférences de votre éditeur). Ce squelette est à conserver à portée de main ou à intégrer à une fonction dans votre éditeur : par la suite, il est important de pouvoir créer une page web vierge très rapidement.
  12. Vérifiez que votre page-squelette est bien valide, puis créez un répertoire TW1 pour le module (« TW1 » pour « Technologies Web 1 »), avec dedans un répertoire TP01 dans lequel vous ferez ce TP.

Attention à bien organiser votre serveur web, et attention aussi à ne pas y mettre tous vos fichiers, mais seulement ceux qui ont des raisons d'y être !

Exercice 2 — Première page HTML #

Adapté d’un exercice de Françoise Lambert et Frédéric Jurie

On vous fournit une image d'une page web, avec les styles de base du navigateur.

Capture d'écran de la page
Capture d'écran de la page (cliquer pour ouvrir l'image)

L'objectif est d'écrire en HTML5 valide le code permettant d'obtenir cette page.

NB : l'apparence (polices, tailles, détails…) d'une page en pur HTML peut varier fortement suivant le navigateur et le système d'exploitation. L'image fournie représente le rendu de Firefox sur une machine Ubuntu du département.

Instructions :

  • Vous pouvez utiliser l'éditeur de votre choix, mais assurez-vous que la coloration syntaxique soit bien activée (selon les éditeurs il peut être nécessaire d'enregistrer avant que ça ne s'active)
  • Indentez votre page au fur et à mesure, et écrivez les commentaires éventuels au fur et à mesure
  • Gardez quelque part (par exemple dans les marque-pages de votre navigateur) un lien vers cette page, qui liste tous les éléments HTML5 avec de bonnes explications sur leur sémantique. Vous en aurez besoin pour toute l’année.
  • Attention aux problèmes d’accents ; assurez-vous que tous les symboles s’affichent correctement (en cas de problème, vérifiez l'encodage utilisé par l’éditeur).
  • Ouvrez votre page avec plusieurs navigateurs et comparez les résultats obtenus. Sont-ils identiques ? Vous pouvez essayer avec le navigateur en ligne de commande lynx : lynx 'https://dev-NUMETU.users.info.unicaen.fr/TW1/TP01/premiere-page.html' ; il vous demandera peut-être votre etupass. (Pour quitter, appuyez sur q puis sur y pour confirmer.)
  • Validez impérativement votre page en utilisant le validateur en ligne du W3C ou son clone sur le serveur de l'université (qui supporte plus de charge). Votre page doit être validée sans erreur (les warning sont parfois pertinents, mais sont moins graves).

Exercice 3 — Le web, Tim et Mosaic #

On vous fournit une image d'une page web, avec les styles de base du navigateur.

Capture d'écran de la page
Capture d'écran de la page

Écrire en HTML5 valide le code permettant d'obtenir cette page. On utilisera les balises a, h1, h2, img, li, p et ul. Les images, le modèle et le texte peuvent être récupérés dans cette archive.

NB : l'apparence (polices, tailles, détails…) d'une page en pur HTML peut varier fortement suivant le navigateur et le système d'exploitation. L'image fournie représente le rendu de Firefox sur une machine Ubuntu du département.

Exercice 4 — Structure de page et HTML5 #

Voici une image d'une version simplifiée de la page Wikipedia de Robert Cailliau :

Une version simplifiée d'une page Wikipédia
Une version simplifiée d'une page Wikipédia

Vous ne pourrez pas reproduire cette image sans utiliser CSS, mais vous pouvez quand même vous « inspirer » de l'image pour écrire le HTML qui lui correspond.

L'objectif de l'exercice est de recréer le HTML correspondant à la page de référence en utilisant notamment des éléments HTML5 de structuration (main, nav, header, footer, article, section, aside, figure, etc.). Cherchez leur signification, dans le cours ou sur le web (en prenant garde aux sources de mauvaise qualité). N'hésitez pas à vérifier ensuite auprès de l'encadrant·e du TP la pertinence du choix des balises.

On vous donne dans cette archive le texte à utiliser (un peu différent de l'image de référence, ça n'a pas d'importance) et les images.

Attention, encore une fois, l'image de la page Wikipédia sert de référence pour identifier la structure de la page, mais on ne cherche pas à en reproduire l'apparence telle quelle (impossible sans CSS de toute façon) !