TP M1106 n°2 - Partie 1 sur 2 - Durée 2h

Habillage CSS 3 : Tableaux - Centrage horizontal - Formulaires

Logos html 5 css 3

Objectifs

Dans cette première partie de TP, vous allez travailler sur l'habillage CSS 3 de tableau et formulaire HTML 5 (comme ceux vus au TP1) et voir comment on centre horizontalement un bloc dans son bloc parent.

Préambule (vu le contexte de TP en distanciel)

Vous êtes logué(e) sur une machine personnelle (Linux, Windows, Mac)
Vous travaillerez dans un répertoire TP2 lui même inclus dans un répertoire M1106 créé pour ce module.
Vous êtes libre d'utiliser l'éditeur qui vous convient. Sublime Text vous a été conseillé.

Vous déposerez alors en fin de séance une archive zip de ce répertoire sur Moodle (dépôt de vos archives zip TP). Un seul dépôt (une seule archive) pour les parties 1 et 2 de ce TP.

Habillage d'un tableau

Créez une page tp2.html contenant le code suivant :

<!doctype html>
<html>

<head>
<meta charset="utf-8"/>
<title> TP n°2 </title>
</head>

<body>

<h1> Tableau </h1>

<table>
  <caption> Présentation de quelques cours donnés dans l'institut PROFX</caption>

  <thead>
    <tr>
       <th></th>
       <th>Niveau 1</th>
       <th>Niveau 2</th>
       <th>Niveau 3</th>
    </tr>
  </thead>

  <tbody>
    <tr>
       <th rowspan="2">Daniel Martin</th>
       <td colspan="2">Un cours X1 pour étudiant de niveau 1 et 2</td>
       <td></td>
    </tr>
    <tr>
       <td colspan="3">Un cours X2 destiné à des étudiants de tout niveau</td>
    </tr>
    <tr>
       <th rowspan="2">Alan Turing</th>
       <td>Un cours X3 de niveau 1 </td>
       <td></td>
       <td></td>
    </tr>
    <tr>
       <td></td>
       <td colspan="2">Un cours X4 de niveau 2 et 3</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
       <th></th>
       <th>Niveau 1</th>
       <th>Niveau 2</th>
       <th>Niveau 3</th>
    </tr>
  </tfoot>
</table>
</body>
</html>

Vous reconnaissez le tableau que vous avez réalisé au TP1 et qui sans habillage spécifique s'affiche comme ceci :

Le but est maintenant d'habiller ce tableau de telle manière qu'il soit affiché comme ceci :

Habillage du tableau

Pour ce faire, associez à la page tp2.html une feuille de style tp2.css permettant cet habillage. Aides :

Couleurs : blanc (#FFF) en fond pour les cours, bleu #EFF6FF en fond pour les en-têtes, bleu #6495ed pour les bordures
La police de la légende est Verdana, celle du reste est sans-serif
Bordure externe du tableau = 3 pixels
Bordure interne = 1 pixel
Remarquer enfin :

le centrage du tableau, sa largeur par rapport à la fenêtre et son espacement par rapport à la légende (propriétés width et margin);
les largeurs des cases et leurs polices plus petites (pensez width et pourcentage);
les séparations entre les niveaux sont en pointillés;
les cases du tableau se touchent (border-collapse: collapse;)

Centrage horizontal d'une boîte (d'un bloc dans son parent)

Ajoutez à votre page le paragraphe suivant de la classe centre :

<p class="centre"> Une boîte contenant du texte qu'on souhaite centrée au milieu d'une page </p>

Complétez ensuite dans le fichier css la classe associée :

.centre{
  width: 400px;
  text-align: justify;
  background-color: yellow;
  border: 1px solid black;
  padding: .5em;
}

Il suffit d'ajouter une ligne mettant les marges externes à auto

Attention à ne pas confondre avec le centrage horizontal d'un texte dans un bloc qui se fait avec la propriété text-align: center;.

Habillages d'un formulaire

Les habillages qui suivent sont inspirés des nombreux exemples d'habillages que vous pourrez trouver sur w3schools.

Ajoutez à votre page le code suivant

<h1> Formulaire </h1>

<div class="form1">
  <form method="post" action="#">
    <label for="nom">Nom</label>
    <input type="text" id="nom" name="nom" placeholder="Votre nom.."/>
    <label for="prenom">Prénom</label>
    <input type="text" id="prenom" name="prenom" placeholder="Votre prénom.."/>
    <label for="groupe">Groupe</label>
    <select id="groupe" name="groupe">
      <option value="A1">A1</option>
      <option value="A2">A2</option>
      <option value="B1">B1</option>
      <option value="B2">B2</option>
    </select>
    <input type="submit" value="Submit"/>
  </form>
</div>

Sans habillage votre formulaire apparaît comme ceci :

Créez l'habillage spécifique à ce formulaire (Sélecteur CSS div.form1) pour qu'il s'affiche comme ceci (remarquez que le formulaire est centré horizontalement, il occupe 50% de l'espace, le fond est de couleur argent) :

Aide

div.form1 {
  /* Mettre le fond en couleur argent */
  /* Mettre des coins arrondis : border-radius: 5px;*/
  /* Mettre des marges internes à 20px */
  /* Mettre une largeur de bloc à 50% */
  /* Centré le bloc horizontalement (cf exo précédent) */
}

Des évolutions conjoncturelles cherchant à cerner l'évolution quantitative et qualitative à court terme de l'économie postnéoantéclassique vous amène à devoir faire évoluer votre formulaire pour qu'il s'affiche comme ceci :

La couleur du bouton Envoyer est grise et au survol elle devient #555.
En plus de div.form1 déjà présent il vous faut ajouter un habillage spécifique pour les champs de ce formulaire (i.e. ceux inclus dans un div de classe form1) :

Un habillage commun pour les champs input de type text et select fils d'un div de classe form1 :

div.form1 input[type=text], div.form1 select {
  /* On commence par mettre la largeur de chacun de ces champs à 100% de l'espace disponible, ce qui fait que chaque champ occupe une ligne */
  /* On enlève la bordure par défaut : border: none; */
  /* Les coins arrondis : border-radius: 4px; */
  /* Aération interne : 12px de marge interne en haut et en bas, et 20px à droite et à gauche */
  /* Aération externe : 8px de marge externe en haut et en bas, et 0 à droite et à gauche */
  /* Enfin il nous faut prendre en compte la bordure dans la place restante pour le bloc fils dans le bloc parent        */
  /* |avec box-sizing: border-box; (voir le lien donné ci-après pour démo bien expliquée et voir ce que cela donne sans) */
}

Démo box-sizing

Un habillage pour le bouton de soumission :

div.form1 input[type=submit] {
  /* Couleur du fond grise */
  /* Couleur du texte blanche */
  /* On enlève la bordure par défaut : border: none; */
  /* Les coins arrondis : border-radius: 4px; */
  /* Aération interne : 12px de marge interne en haut et en bas, et 20px à droite et à gauche */
  /* Aération externe : 8px de marge externe en haut et en bas, et 0 à droite et à gauche */
}

Il vous reste à finaliser avec l'habillage du survol du bouton de soumission

div.form1 input[type=submit]:hover {
  background-color: #555;
}

Des évolutions conjoncturelles blabla..., bref des circonstances 😄, vous amène à modifier encore une fois votre formulaire - Hé oui rien n'est fixe ma pauv'dame dans ce bas monde... - pour qu'il apparaisse comme ceci :

Il vous faut donc ajouter deux nouveaux champs pour saisir un courriel (input type="email") et un mode de passe (input type="password")

<label for="courriel">Courriel</label>
<input type="email" id="courriel" name="courriel" placeholder="Votre courriel.."/>

<label for="mdp">Mot de passe</label>
<input type="password" id="mdp" name="mdp" placeholder="Votre mot de passe.."/>

et les habiller dans le CSS

div.form1 input[type=text], div.form1 select, div.form1 input[type=email], div.form1 input[type=password] {

Puis, au lieu d'utiliser des images comme vous l'avez fait en deuxième partie du TP précédent, vous allez utiliser une police d'écriture particulière permettant d'afficher des icônes - Aussi vous pourrez habiller vos icônes comme du texte (les mettre en couleur, changer leur taille, ...). La police d'écriture utilisée sera https://fontawesome.com/v4.7.0/ (Font Awesome - qui signifie en français : police d'écriture (font) géniale/impressionnante (awesome)). Cette version est gratuite et nous suffira. D'autres versions existent nécessitant au moins une inscription. Cette police est construite à partir du langage CSS.

Vous pouvez voir les icônes que vous pouvez mettre ici https://fontawesome.com/v4.7.0/icons/, et vous avez des exemples ici https://fontawesome.com/v4.7.0/examples/.
Pour pouvoir les utiliser vous devez inclure dans vos pages HTML un lien vers un fichier CSS contenant ces polices. Par exemple
```
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
```
ou
```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
```
ou les télécharger depuis le site https://fontawesome.com/v4.7.0/get-started/ et mettre un lien local, mais ne choisissez pas cette solution pour M1106 afin d'alléger vos dépôts de TP.
Ensuite, pour mettre une icône ("un icône" se dit aussi - comme le mot vient de l'anglais icon - mais pour être sûr de ne pas se tromper : une icône est toujours juste), il suffit de placer dans le code HTML
```
<i class="classe de l'icône que vous voulez mettre" aria-hidden="true"></i>
```
à l'endroit où vous souhaitez mettre l'icône. Par exemple
```
<label for="prenom"><i class="fa fa-id-card" aria-hidden="true"></i> Prénom</label>
```
pour la première icône https://fontawesome.com/v4.7.0/icon/id-card placée devant le prénom.
Vous utiliserez la même icône pour le champ nom.
Pour trouver des icônes, vous avez cette page https://fontawesome.com/v4.7.0/icons/ et son moteur de recherche :

Aide :

L'icône choisie pour le courriel est https://fontawesome.com/v4.7.0/icon/envelope-o

<label for="courriel"><i class="fa fa-envelope-o" aria-hidden="true"></i> Courriel</label>

L'icône choisie pour le mot de passe est https://fontawesome.com/v4.7.0/icon/key
L'icône choisie pour le groupe est https://fontawesome.com/v4.7.0/icon/users

Faites valider votre page contenant vos résultats finaux (tableau | bloc centré horizontalement | formulaire final) en partageant votre écran via l'outil zoom.

Une pause de 10 mn est possible avant de passer à la deuxième partie une fois tout fini. Si vous avez fini avant les 2h aidez les autres à finir aussi :-)