TP 03 : Introduction à CSS

Exercice 1 — Expérimentation du CSS #

https://dev-LOGIN.users.info.unicaen.fr/TW1-2023/TP03/ex1/tim-avec-style.html

<meta name="author" content="LOGINS" />

On reprend la page simple sur Tim Berners-Lee créée au TP précédent : copiez le fichier HTML (pour ne pas modifier l'ancien exercice), collez-le au bon endroit et avec le bon nom sur votre espace web, et vérifiez tout de suite sur evalweb que tout est OK.

Appliquer ensuite les styles suivants, en utilisant un élément style (pas un attribut ! un élément, avec une balise ouvrante et une balise fermante) :

1. mettre les titres de section en orange ;
2. mettre le titre principal en italique ;
3. mettre les liens en gras ;
4. mettre des puces carrées à la place des puces rondes dans la liste ;
5. enlever le soulignement des liens.

Appliquer ensuite les styles suivants, en expérimentant :

1. augmenter la taille de la police du titre principal ;
2. ajouter un « cadre » autour des images (essayer plusieurs styles et plusieurs épaisseurs) ;
3. changer la couleur de fond de la page, tout en gardant un fond blanc pour les paragraphes.

Exercice 2 — Utilisation de l’inspecteur de Firefox #

Découverte de l'inspecteur

L'inspecteur de Firefox est un outil fondamental pour qui s'essaie au CSS. (Des équivalents existent pour les autres gros navigateurs.)

1. Aller sur un site quelconque, faire un clic droit sur un élément, et choisir « Inspecter » (pas « Inspecter les propriétés d'accessibilité » : c'est autre chose, qu'on verra plus tard). Une fenêtre apparaît, avec trois parties :
   • à gauche, le HTML ;
   • au milieu, les règles CSS appliquées à l'élément choisi ;
   • à droite, plusieurs onglets utiles, notamment un onglet « Calculé » (« Computed ») avec la valeur calculée pour toutes les propriétés CSS de l'élément choisi.
2. Passer la souris sur les propriétés CSS dans la partie centrale : des cases cochées apparaissent. En décocher certaines et observer l'effet sur la page.
3. Toujours dans la partie centrale, modifier des valeurs de propriétés CSS et observer l'effet sur la page (et sur les valeurs calculées dans l'onglet « Calculé » à droite).
4. Cliquer sur l'icône en forme de pointeur de souris en haut à gauche de l'inspecteur, et parcourir les éléments de la page.
5. Aller dans l'onglet « Mise en page » (« Layout ») du cadre de droite, et chercher la section « Modèle de boîte » (« Box model »). Elle montre une représentation graphique de la boîte de l'élément sélectionné, avec les valeurs en pixels des différentes dimensions (longueur et largeur, marges, paddings, bordures).

Exploiter les capacités de l'inspecteur

Ce qu'il est particulièrement important de comprendre, c'est que l'inspecteur ne vous montre pas le code que vous avez écrit, mais ce que le navigateur en a compris, ce qui permet de détecter de nombreuses erreurs. Plus précisément : comme dit en cours, quand le navigateur reçoit le HTML, il l'analyse pour construire l'arbre DOM. C'est cet arbre qui est utilisé pour afficher la page : une fois que l'arbre a été construit, le HTML reçu ne sert plus à rien. Ce que montre la partie de gauche de l'inspecteur, c'est une traduction (sérialisation) de l'arbre DOM en HTML, qui n'est pas nécessairement identique au code HTML reçu au départ.

1. Aller sur cette page et regarder le code source (clic droit puis « Code source de la page », ou alors « Control-U »). Il s'agit du code HTML reçu par le navigateur.
2. Retourner sur la page, ouvrir l'inspecteur et regarder la partie HTML ; comparer au code source de la page. Comprenez-vous ce qui se passe avec le paragraphe et la liste ?
3. Inspecter le footer : quelles sont les propriétés CSS que « voit » vraiment le navigateur ? Trouver l'erreur dans le code.

L'intérêt de l'inspecteur peut vous sembler anecdotique pour l'instant, mais il deviendra vite incontournable quand vous commencerez à faire de la mise en page.

Exercice 3 — Une page sur l’épagneul #

https://dev-LOGIN.users.info.unicaen.fr/TW1-2023/TP03/ex3/epagneul.html

<meta name="author" content="LOGINS" />

On vous fournit une image d'une page web.

On vous fournit également une archive contenant ce modèle ainsi qu'une arborescence avec

• un squelette HTML
• un fichier textes.txt avec les textes de la page
• les images (dans un répertoire images/)
• un répertoire style/ contenant une feuille de style CSS ainsi qu'une police de caractères

Placer l'arborescence sur votre serveur, puis lier la page HTML à la feuille de style CSS : tant que les couleurs de fond n'ont pas changé, c'est que ça n'a pas marché — inutile de continuer !

Compléter ensuite la page HTML et la feuille de style CSS pour obtenir un rendu aussi proche que possible de la page demandée. Votre page HTML doit être valide W3C.

Pour info, les couleurs utilisées sont #fcfcea (couleur de fond du texte), #FFA500 (couleur de fond du titre et séparations entre sections) et #333 (couleur de fond du pied de page).