Blocs

Dans ce TP, vous ne travaillerez pas sur votre site web. Les connaissances apprises dans ce TP seront appliquées à votre site dans le TP suivant.

Un bloc est un rectangle (le plus souvent dans une balise <div> ou <span>) destiné à contenir des textes, images, etc.

Marges et Bordure

Autour du rectangle sont définies :

la marge intérieure (padding) ;
la bordure (border) ;
la marge extérieure (margin).

Marges intérieures et extérieures.

Il est possible de définir les quatre marges (haut, droite, bas, gauche) à la même valeur, ou d'utiliser une valeur différente pour chacune d'entre elles.

.classe1 {
  /*
   * Toutes les marges intérieures mesurent 10 pixels ;
   * toutes les marges extérieures mesurent 5 pixels.
   */
  padding: 10px;
  margin: 5px;
}

.classe2 {
  /*
   * Les marges intérieures mesurent (dans le sens des aiguilles d'une montre) :
   *   5 pixels en haut, 10 pixels à droite, 15 pixels en bas, 20 pixels à gauche.
   * Les marges extérieures mesurent (dans le sens des aiguilles d'une montre) :
   *   5 pixels en haut, 5 pixels à droite, 10 pixels en bas, 10 pixels à gauche.
   */
  padding: 5px 10px 15px 20px;
  margin: 5px 5px 10px 10px;
}

Bordures

Les feuilles de style CSS permettent de définir :

le style (plein, pointillé, tirets, etc.) ;
la couleur ;
l'épaisseur.

Il est possible de définir ces paramètres tous ensemble, ou séparément ; pour les quatre côtés, ou séparément. Voir l'exemlpe ci-dessous.

.classe1 {
  /* Toutes les bordures mesurent 5 pixels, en pointillé, de couleur noire. */
  border: 5px dashed black;
}

.classe2 {
  /*
   * Les bordures en haut et à gauche sont définies ;
   * celles en bas et à droite ne sont pas visibles.
   */
  border-left: 5px dashed black;
  border-top: 10px dashed red;
}

.classe3 {
  /* Les trois paramètres sont définis séparément. */
  border-width: 5px;
  border-style: dashed;
  border-color: black;
}

.classe4 {
  /* Les trois paramètres sont définis séparément, pour la bordure de gauche uniquement. */
  border-left-width: 5px;
  border-left-style: dashed;
  border-left-color: black;
}

Pour plus d'information sur les bordures, voir :

en français : Mozilla web docs ou OpenClassrooms ;
en anglais : w3schools.

À vous !

Dans votre dossier personnel, créer un dossier bloc1, et téléchargez dans ce dossier les fichiers bloc1.html et bloc1.css.
Ouvrir le fichier bloc1.html avec Firefox, et les fichiers bloc1.html et bloc1.css avec un éditeur de texte.
Faites un clic droit sur le bloc Foo, puis sélectionner Examiner l'élément. Une console s'ouvre en bas de la fenêtre. Elle permet de :
- visualiser les marges (intérieures et extérieures) ;
- visualiser les règles de css qui s'appliquent à chacun des blocs ;
- modifier les règles de css à la volée (mais ces modifications ne sont pas sauvegardées).
Sans modifier le fichier bloc1.html, modifier le fichier bloc1.css pour que le second bloc ressemble à ceci.

N'hésitez pas à utiliser la console pour vous aider dans ce travail.

Taille et Positionnement

Nous aimerions obtenir le positionnement ci-dessous.

Dans votre dossier personnel, créer un dossier bloc2, et téléchargez dans ce dossier les fichiers bloc2.html et bloc2.css.

Toutes les modifications sont faites dans le fichier bloc2.css (le fichier bloc2.html ne doit pas être modifié).
Marges et bordures
1. Modifiez la couleur du titre <h1>.
2. En modifiant la bordure inférieure, soulignez les titres <h2> en pointillés.
3. Modifiez l'arrière plan des blocs carte en blanc.
4. Modifiez les bordures de la classe carte : 2 pixels de large, couleur de votre choix, avec des coins légèrement arrondis.
5. Définissez les marges des blocs carte : 30 pixels pour la marge intérieure, 20 pixels pour la marge extérieure.
Taille
1. Dans le fichier bloc2.css, ajouter aux blocs carte les propriétés suivantes.
```
.carte {
 min-width: 10em;
 max-width: 20em;
 min-height: 10em;
}
```
  Ces propriétés signifient : la largeur doit être comprise entre 10em et 20em, et la hauteur doit être au moins égale à 10em (le « em » est une unité de longueur égale à la largeur d'une lettre m minuscule).
2. Modifier le css pour que le bloc titre ait aussi une largeur minimale de 10em (mais pas de largeur maximale, ni de hauteur minimale).
Positionnement
1. Ajouter aux blocs carte le paramètre suivant.
```
.carte {
 float: left;
}
```
  Ce paramètre signifie que les blocs doivent être placés les uns à côté des autres, sur le côté gauche (en passant à la ligne si l'espace n'est plus suffisant).
2. Réduire la taille de la fenêtre du navigateur pour simuler celui d'un téléphone portable. Vérifiez que toute la page est visible sans nécessiter de faire défiler l'écran (scroller) horizontalement.

Validation

Vérifiez que les pages bloc1.html et bloc2.html ne produisent aucune erreur sur http://validator.w3.org.
Vérifiez que les fichiers bloc1.css et bloc2.css ne produisent aucune erreur sur https://jigsaw.w3.org/css-validator.

Évaluation

Complétez la fiche d'évaluation, copiez votre travail dans le dossier partagé, rendez-moi la fiche d'évaluation, et passez au TP suivant.

⚠️ Attention ! ⚠️