TP 09 : Liaison des pages d'un site — Polices web

Licence Informatique/Maths 1ère année

Alexandre Niveau — Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Dans ce TP on fait un premier site avec plusieurs pages qui utilisent une même feuille de style, et on manipule les polices CSS.

Notes de cours

Exercice 1 — De la page au site #

Adapté d’un exercice de Jean-Marc Lecarpentier

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW1-2022/TP09/ex1/index.html
(en remplaçant LOGIN par votre nom de login). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGINS" />
en remplaçant LOGINS par les noms de login des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Un mini site web vous est donné dans cette archive du TP, télécharger l'archive et installer le site sur votre serveur personnel.

Vous ne devez pas déplacer de dossier ou de fichier !

Il n'y a qu'un seul fichier CSS pour tout le site.

Compléter les pages et la feuille de style CSS pour que les liens et images fonctionnent comme les captures ci-dessous le montrent.

Infos complémentaires

  • commencer par ajouter le chemin de la feuille de style dans chaque fichier HTML. Celle-ci contient seulement une règle qui met le texte en rouge. Tester chaque page, tant que votre page n'a pas de rouge, inutile d'aller plus loin avant d'avoir résolu le problème
  • les éléments image (balise <img>) sont dans le code HTML mais il faut compléter leur attribut src
  • les liens (balise <a>) sont dans le code HTML mais il faut compléter leur attribut href
  • il faut mettre la propriété max-width: 1200px au body pour que le site fonctionne bien. Essayez de changer la largeur de la fenêtre : comprenez-vous ce que fait la propriété max-width ?
  • sur chaque page le logo du site doit être un lien vers la page d'accueil du site
  • la police des titres est à spécifier en CSS et le fichier woff est fourni dans l'archive
  • le lien du pied de page vers le site www.needpix.com doit s'ouvrir dans un nouvel onglet du navigateur

Ressources

Accueil Voyages 2020 Contact

Exercice 2 — Utilisation de polices #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW1-2022/TP09/ex2/polices.html
(en remplaçant LOGIN par votre nom de login). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGINS" />
en remplaçant LOGINS par les noms de login des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si dupont210 et durand212 ont travaillé ensemble, ils mettent <meta name="author" content="dupont210,durand212" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

L'objectif de l'exercice est d'utiliser des polices en CSS sur une page HTML. On va reproduire le modèle suivant :

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

Cette archive contient une arborescence avec le HTML et un répertoire style contenant un fichier screen.css vide et un répertoire fonts avec les fichiers WOFF des polices « Know Your Product » (utilisée pour le titre) et Archistico (utilisée pour le texte).

  1. Complétez le fichier screen.css pour reproduire le modèle. Remarque : la version « grasse » d'Archistico est assez particulière. Utilisez une grande taille de police (par ex. 3em) pour mieux voir ce qui se passe, et n'hésitez pas à zoomer (selon les OS et les navigateurs, la différence peut être plus ou moins visible).
  2. Une fois que tout est OK, renommez le répertoire style/fonts en style/tmp, sans toucher au code : cela aura pour effet que les fichiers WOFF ne seront pas trouvés par le navigateur. La page doit s'afficher exactement avec les styles par défaut habituels, c'est-à-dire comme ceci. Si ce n'est pas le cas, peut-être avez-vous utilisé un sélecteur d'élément strong dans votre CSS ? Retournez jeter un œil au cours !