TP n°2 - CSS

Objectifs :

L’objectif de ce TP est de découvrir le langage CSS en spécifiant la mise en forme du site web ressemblant beaucoup à celui commencé lors du TP nº1.

Préambule

Les sources de départ sont à télécharger ici. Vous pouvez les modifier à votre guise pour obtenir le résultat souhaité. Elles sont organisées comme ci-dessous :

La première partie de ce TP est fortement guidé, et le code CSS nécessaire pour obtenir le résultat désiré est généralement fourni.

Afin de laisser à ceux qui le souhaitent et sont en avance l’opportunité de chercher par eux-même, le code est masqué par défaut.

Notez toutefois que les dernières pages sont susceptible de vous donner un peu de fil à retordre car la solution n’est souvent plus fournie du tout.

Même si le code est fourni, il est important de comprendre ce que vous écrivez. N’hésitez pas à consulter la documentation en ligne pour chaque propriété CSS que vous utilisez.

Pages

Le site web est composé de quatre pages, dont la structure des trois première a été créée lors du TP nº1 : index.html, cv.html, et agenda.html. Pour ces trois pages, vous pouvez si vous le souhaitez reprendre votre propre code. La quatrième page, photos.html, est elle nouvelle. Elle permet d’admirer les photos rangées dans images/photos.

A terme, le site web ressemblera aux visuels ci-dessous:

Accueil

Agenda

Photos

Organisation des documents HTML

Le body de chaque document HTML commence par une balise nav et une liste de liens permettant de naviguer vers chaque page du site:

1
<nav>
2
  <ul class="menu-bar">
3
    <li><a href=".">Accueil</a></li>
4
    <li><a href="cv.html">Mon CV</a></li>
5
    <li><a href="calendar.html">Agenda</a></li>
6
    <li><a href="gallery.html">Photos</a></li>
7
  </ul>
8
</nav>

Cela deviendra bientôt la barre de navigation.

Le contenu principal de chaque page est ensuite contenu au sein d’une balise main, par exemple voici un extrait de index.html:

1
<main>
2
  <p>Bienvenue sur mon mini site web !</p>
3
  <a href="cv.html">
4
    <img src="images/cv.svg" alt="Icône de CV" />
5
  </a>
6
  <a href="mailto:jane.doe@univ-grenoble-alpes.com">
7
    <img src="images/mail.svg" alt="Icône de courriel" />
8
  </a>
9
  <a href="https://shs.univ-grenoble-alpes.fr">
10
    <img src="images/ufr.svg" alt="Logo de l'UFR SHS de l'Université Grenoble-Alpes"
11
      />
12
  </a>
13
</main>

Cette organisation commune à chaque page va nous permettre de créer une feuille de styles commune, par exemple pour mettre en forme la barre de navigation, ou encore définir la largeur du contenu principal: Page structure

Variables CSS fournies

En fait, une feuille de style communs.css est déjà fournie. Vous y trouverez entre autre une série de variables définissant la palette de couleurs du site:

:root {
    --couleur-6: #f7e7de;
    --couleur-5: #ffcdb2;
    --couleur-4: #ffb4a2;
    --couleur-3: #e5989b;
    --couleur-2: #b5838d;
    --couleur-1: #917681;
    --couleur-0: #6d6875;
}

l’utilisation d’une palette de couleur homogène a un impact important sur l’expérience utilisateur d’un site web, mais créer cette palette est difficile.

Premiers éléments de mise en forme commune

Commençons par définir quelques éléments de mise en forme qui s’appliqueront à toutes les pages. Ces éléments sont à définir dans le fichier communs.css.

Police de caractères

La police de caractère utilisée doit être « Gill Sans », ou à défaut n’importe quelle police de caractères sans empattement (sans serif). La taille de base de la police doit être 20px.

Voir la correction

html,
body {
  font-family: "Gill Sans", sans-serif;
  font-size: 20px;
}

Pour l’instant, les changements apportées à communs.css n’ont aucun impact sur les pages du site. Pourquoi ?

Création des feuilles de style de chaque page

Créer une feuille de style propre à chaque page dans le répertoire styles, par exemple créer le document accueil.css pour la page d’accueil.

Puis, insérer une balise link dans le head de chaque page afin de la lier à la feuille de style correspondante. Par exemple pour la page d’agenda:

1
<head>
2
  <meta charset="utf-8" />
3
  <link rel="stylesheet" href="styles/agenda.css" />
4
</head>

On pourrait Dans chacune de ses feuilles de styles, importer communs.css grâce à un import. C’est une très bonne solution. Malheureusement, si vous utiliser le live server de vscode il ne gère pas bien ce lien et vous n’aurez pas le reload automatique.

@import url("communs.css")

Vous pouvez donc plutôt ajouter une autre balise link dans le head de chaque page pour lier la feuille commune. Attention à ajouter cette balise avant la balise link spécifique a votre page. Souvenez vous de la cascade de CSS. Si vous avez des propriétés communes et que vous souhaitez la redéfinir pour une page spécifique, vous devez les spécifier après.

Nous avons définie la police de caractère pour la balise body, toutefois elle est appliquée par défaut à tous les éléments de la page (ou presque). Pourquoi ?

Largeur du contenu principal

Le contenu principal doit:

Mesurer au plus 800px de large,
être centré.

Voir la correction

main {
  max-width: 800px;
  margin: auto;
}

Pourquoi pas simplement width au lieu de max-width ?

Couleur des titres

Faire en sorte que la couleur de tous les titres h1 et h2 suive la variable --couleur-0.

Voir la correction

h1,
h2 {
  color: var(--couleur-0);
}

La barre de menu est commune à toutes les pages. Pour éviter de se répéter, définissons donc sa mise en forme dans communs.css également.

Objectif final :

Pour rappel, voici le code HTML de la barre de menu déjà présent dans chaque page:

Voir la correction

1
<nav>
2
  <ul class="menu-bar">
3
    <li><a href=".">Accueil</a></li>
4
    <li><a href="cv.html">Mon CV</a></li>
5
    <li><a href="calendar.html">Agenda</a></li>
6
    <li><a href="gallery.html">Photos</a></li>
7
  </ul>
8
</nav>

Disposition des liens

Aligner les éléments de liste horizontalement,
Supprimer les puces par défault.

Voir la correction

nav > ul > li {
    display: inline;
    list-style: none;
}

Couleurs

Les couleurs principales de la barre de menu sont données par les variables :

--couleur-0 pour l’arrière plan,
--couleur-6 pour le texte.

Voir la correction

nav {
    background-color: var(--couleur-0);
    color: var(--couleur-6)
}

nav > ul > li > a {
    color:inherit;
}

Définir la couleur du texte au niveau de la barre de menu plutôt que pour les liens qui la compose ne fonctionne pas, pourquoi ? Quelle autre technique aurions nous pu utiliser pour forcer le texte des liens à prendre la couleur définie par ses ancêtres ?

Espacement et mise en forme

espacer les liens de la barre de menu,
supprimer le soulignement par défault.

Voir la correction

nav > ul {
    /* Déclarations précédentes ici. */
    padding: 10px 0;
}

nav > ul > li > a {
    /* Déclarations précédentes ici. */
    margin: 0 10px;
    text-decoration: none;
}

Note : il y avait déjà des déclarations pour les selecteurs nav > ul > li > a et nav > ul dans votre feuille de style. Pour éviter les confusions au sein d’une même feuille de style, il est fortement préférable de regrouper les déclarations commune à un même sélecteur.

Il reste un espace entre la barre de menu, le haut de la page, et les côtés de la page. Pourquoi ? Comment s’en débarasser ?

Astuce : les outils de développement de votre navigateur permettent d’inspecter les différents éléments qui composent une page.

Voir la correction

html,
body {
    /* Déclarations précédentes ici. */
    margin: 0;
};

nav {
    /* Déclarations précédentes ici. */
    margin: 0;
}

Alignement

Centrer horizontalement les éléments du menu.

Voir la correction

nav {
    /* Déclarations précédentes ici. */
    text-align: center;
}

Survol

Inverser la couleur d’arrière-plan et la couleur du texte des liens lors du survol.

Voir la correction

nav > ul > li > a:hover {
  background-color: var(--couleur-6);
  color: var(--couleur-0);
}

Agrandir les liens, et arrondir les angles. Tip : border-radius peut être utilisé même s’il n’y a pas de bordure !

Voir la correction

nav > ul > li > a {
    /* Déclarations précédentes ici. */
    padding: 5px 10px;
    border-radius: 5px;
}

Pourquoi ajouter le padding sur nav > ul > li > a et pas nav > ul > li > a:hover ?

Indicateur de page courante

Dans le code HTML de chaque page, repérer cette page parmis les liens de navigation en rajoutant la classe active à la balise a correspondante. Par exemple pour agenda.html :

Voir la correction

1
<a href="agenda.html" class="active">Agenda</a>

Ajouter une bordure en dessous du lien de la page actuelle. Cette bordure:

est solide,
mesure 5px de haut,
est de couleur --couleur-5,
est droite (pas d’angles arrondie en bas).

Voir la correction

nav > ul > li > a.active {
    border-bottom-style: solid;
    border-bottom-color: var(--couleur-5);
    border-bottom-width: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

Page d’accueil

Centrer le texte et les images,
S’assurer que les images mesurent 50px de haut,
Écarter les images de 20px.

Page CV

Travaillons à présent sur la page CV.

État civil

Réduire l’espacement entre les paragraphes de l’état civil seulement (pas les autres sections) à 0.5rem,
Placer l’image de profil à gauche du texte,
S’assurer que l’image mesure 12rem de haut,
Ajouter 1rem de marge en dessous de l’image, et 3rem à droite.

Voir la correction

#etat-civil p {
  margin: 0.5rem;
}

img {
  float: left;
  height: 12rem;
  margin-right: 4rem;
  margin-bottom: 1rem;
}

Formations et Compétences

Reproduire approximativement la mise en page suivante:

Note : vous aurez peut être besoin d’ajuster un peu le code HTML.

Page agenda

Reproduire approximativement la mise en page suivante: Note: ne créez la légende que s’il vous avez le temps.

Page photos

Reproduire approximativement la mise en page suivante: Pour aller plus loin: il est possible d’appliquer conditionnellement un thème sombre (ou clair) afin de respecter les préférences de l’utilisateur. Comment ?

Tip : jetez un œil aux requêtes média.

Lancez vous dans la cuisine

Affutez vos couteaux sur CSS diner.

Note : bien évidemment, plate, bento et compagnie ne sont pas de « vrais » balise HTML.

Ce sujet de TP a bénéficié du travail de Philippe Genoud, Manuel Atencia Arcas, Quentin Roy et Dima Dalloul.

TP n°2 - CSS

Objectifs :

Préambule

Pages

Organisation des documents HTML

Variables CSS fournies

Premiers éléments de mise en forme commune

Police de caractères

Création des feuilles de style de chaque page

Largeur du contenu principal

Couleur des titres

Barre de menu

Disposition des liens

Couleurs

Espacement et mise en forme

Alignement

Survol

Indicateur de page courante

Page d’accueil

Page CV

État civil

Formations et Compétences

Page agenda

Page photos

Lancez vous dans la cuisine