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.
Exercice 1 — De la page au site #
Adapté d’un exercice de Jean-Marc LecarpentierCet 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-2023/TP09/ex1/accueil.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. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.
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 attributsrc
- les liens (balise
<a>
) sont dans le code HTML mais il faut compléter leur attributhref
- il faut mettre la propriété
max-width: 1200px
aubody
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 (attribut
target
du lien). Attention, ceci est à utiliser avec parcimonie, voir par ex. cet article.
Exercice 2 (optionnel) — Utilisation de polices #
L'objectif de l'exercice est d'utiliser des polices en CSS sur une page HTML.
On va reproduire le modèle suivant :
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).
- 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). - Une fois que tout est OK, renommez le répertoire
style/fonts
enstyle/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émentstrong
dans votre CSS ? Retournez jeter un œil au cours ! - Renommez à nouveau le répertoire
style/tmp
enstyle/fonts
, pour que votre chargé·e de TP puisse corriger la version avec polices.