5. Développement Web - TP5





Résultat attendu :

Résultat TP5
index.html

Notez que la police d'affichage
a été modifiée en Verdana





5.1. Application d'un style sur la page index.html

Insérer un lien dans la section head de la page index.html de manière à introduire une référence vers un fichier CSS que l'on nommera style.css.

Dans le navigateur (Google Chrome ou Chromium), charger cette page puis ouvrir le panneau des Outils de développement avec Ctrl + Maj + I.

Recharger ensuite la page en appuyant sur F5.

5.2. Modification du fichier CSS

On va dans le cadre de ce TP utiliser flexbox afin de positionner nos éléments.

5.2.1. Modification de body

Dans le fichier CSS introduire une rubrique pour body :

  1. body {
  2.     display: flex;
  3. }

Recharger la page en appuyant sur F5 : on voit que les éléments sont disposés horizontalement les uns à la suite des autres.

Il va donc être nécessaire de changer l'orientation afin que les éléments soient verticalement les uns à la suite des autres. Modifiez alors la partie body comme suit :

  1. body {
  2.     display: flex;
  3.     flex-direction: column;
  4. }

Recharger la page en appuyant sur F5. On voit que la disposition est conforme à ce que l'on désirait.

Modifier également la police pour qu'elle soit de type Verdana ou Tahoma ou sans-serif.

5.2.2. Modification de header

On veut que le header ait une hauteur de 200 pixels et que le texte (h1) soit centré horizontalement et verticalement.

  1. header {
  2.     height: 200px;
  3.     background-color: black;
  4. }

Il faut ensuite modifier la balise h1 mais qui se trouve à l'intérieur de header :

  1. header h1 {
  2.     line-height: 200px;
  3.     font-size: 40px;
  4.     text-align: center;
  5.     color: rgb(204, 204, 153);
  6. }

La couleur d'affichage est modifiée en #e0d090. Il s'agit d'une couleur proche de Lima Bean.

Recharger la page et constater que le texte n'est pas aligné verticalement. Pourquoi ?

la réponse est simple, mais encore faut-il le savoir : la balise h1 dispose par défaut d'une marge. Il suffit de la retrouver dans les styles associés à h1 dans les Outils de développement dans l'onglet Eléments.

Il faut donc supprimer la marge comme celà :

  1. header h1 {
  2.     line-height: 200px;
  3.     font-size: 40px;
  4.     text-align: center;
  5.     color: rgb(204, 204, 153);
  6.     margin: 0;
  7. }

5.2.3. Modification de body pour coller aux bords

Vous devriez vous apercevoir que le header n'est pas collé aux bords de la fenêtre de visualiation du document HTML. La encore la faute est due à une marge par défaut associée à body

. Il faut encore modifier la marge et la définir à 0 pour obtenir un affichage correct :

  1. body {
  2.     margin: 0;
  3.     display: flex;
  4.     flex-direction: column;
  5. }

5.2.4. Modification de la barre de navigation

Nous allons à présent nous intéresser à la barre de navigation nav. Tout comme pour le header, nous allons définir une hauteur de 40 pixels et une couleur de fond gris (gray).

  1. nav {
  2.     height: 40px;
  3.     background-color: gray;
  4. }

Il faut ensuite modifier le mode d'affichage de la liste et de ses éléments :

  1. nav ul {
  2.     list-style-type: none;
  3.     margin: 0;
  4.     display: flex;
  5.     justify-content: center;
  6.     align-items: center;
  7. }

On passe ensuite aux balises li :

  1. nav ul li {
  2.     margin: 0;
  3.     padding: 0 30px;
  4.     line-height: 40px;
  5. }

Ce n'est pas terminé, il faut modifier la balise a de chaque élément :

  1. nav ul li a {
  2.     text-decoration: none;
  3.     font-weight: bold;
  4.     color: goldenrod;
  5. }

Et enfin, pour un effet de style, on va modifier la couleur du lien quand la souris passe dessus :

  1. nav ul li a:hover {
  2.     color: white;
  3. }

5.2.5. Modification du bas de page

Procéder comme avec le header en définissant un footer de 100 pixels de haut et en positionnant le paragraphe à l'intérieur au centre.

5.2.6. Modification du contenu princial

La balise main occupe le reste de la page mais on aimerait qu'elle occupe tout le reste de la fenêtre. Il faut dans ce cas modifier sa hauteur, mais tout dépendra de la hauteur de la fenêtre également appelée viewport. On définit donc main de la façon suivante :

  1. main {
  2.     display: flex;
  3.     flex-direction: column;
  4.     justify-content: center;
  5.     align-items: center;
  6.     min-height: calc(100vh - 340px);
  7. }

On utilise flexbox pour centrer le contenu du main et on calcule (calc) la hauteur du main en fonction de la hauteur du viewport : 100hv signifie 100% of height of viewport, c'est à dire la taille de la fenêtre en pixels.