Intégration multimédia S3 (M3206) - TP n° 1

Dans cette séance de TP on va analyser une mise en page responsive et manipuler le code CSS de Bootstrap.

Avant de commencer, créez un répertoire nommé m3206-tp1 contenant des répertoires exo1, exo2, etc. Chacun de ces répertoires contient votre travail sur l'exercice correspondant. Le fichier HTML de chaque exercice doit s'appeler index.html.

À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire m3206-tp1 et le soumettre sur AMeTICE.

Responsive web design

Il n'existe pas une méthode universelle pour concevoir une mise en page responsive pour un site web, mais il y a un ensemble de techniques utilisées couramment :

La meilleure façon d'apprendre est d'analyser des sites web.

Exercice 1

Dans cet exercice vous allez analyser la mise en page responsive d'un site web.

Allez sur YouTube et analysez comment la mise en page change entre un petit écran (400 pixels) et un grand écran (1600 pixels). Faites un schéma de chaque mise en page différente avec son intervalle de largeur.

Installer Bootstrap

Pour utiliser Bootstrap dans une page web, il faut importer un fichier CSS et un fichier JavaScript.

Chacun de ces fichiers peut être lié de deux façons :

  1. Par CDN : on charge un fichier qui est en ligne, sur un serveur externe, accessible via une URL.
  2. En local : on télécharge le fichier dans le répertoire racine et on donne son adresse relative.

(1) Par CDN

Allez sur getbootstrap.com / Get started / Quick start.

Copiez le lien vers la feuille de style CSS dans l'élément head, juste avant la balise fermante.

Copiez le lien vers le fichier de scripts JavaScript (bundle) dans l'élément body, juste avant la balise fermante aussi.

Exercice 2

Écrivez un petit document HTML qui contient au moins un élément h1, un élément p, et les liaisons vers Bootstrap par CDN.

Vérifiez (en regardant la console de votre navigateur web) que Bootstrap est bien chargé. Si rien n'est affiché, ça veut dire que tout marche.

(2) En local

Pour charger les fichiers de Bootstrap en local, il suffit de modifier ses deux liens (pour le CSS et pour le JS).

Allez sur getbootstrap.com / Download / Compiled CSS and JS / Download.

Décompressez l'archive et placez-le dans le répertoire du document HTML. La description de tous les fichiers téléchargés se trouve ici.

Il suffit d'avoir ceci (effacez les autres fichiers) : 

bootstrap/
├── css/
│   └── bootstrap.min.css
└── js/
    └── bootstrap.bundle.min.js

Donc, la structure de la page web doit être : 

votre-site-web/
├── bootstrap/
│   ├── css/
│   │   └── bootstrap.min.css
│   └── js/
│       └── bootstrap.bundle.min.js
└── index.html

Ensuite, il faut remplacer les liens de Bootstrap par CDN par des liens en local :

  1. pour le fichier CSS : <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  2. pour le fichier JS : <script src="bootstrap/js/bootstrap.bundle.min.js"></script>

Exercice 3

Répétez l'exercice précédent en faisant les liens vers les fichiers de Bootstrap en local.

Bilan

Si on installe Bootstrap par CDN :

Si on l'installe en local :

Les règles CSS de Bootstrap

Bootstrap définit les règles CSS de beaucoup d'éléments HTML pour que la page web soit affichée pareil sur tous les navigateurs web. Si vous avez téléchargé les sources, vous pouvez lire ces règles CSS dans le fichier bootstrap.css.

Autrement, vous pouvez voir les règles CSS d'un élément HTML directement dans votre navigateur web, dans les Outils de développement web. Cela permet de modifier une règle CSS et de voir son effet en temps réel, ou de retrouver une règle CSS dans un ensemble de fichiers.

Quelques astuces (sur Firefox) :

Exercice 4

Dans cet exercice vous allez voir comment Bootstrap redéfinit les règles CSS des éléments HTML. Pour cela, vous devez trouver une règle dans le document CSS de Bootstrap et la modifier.

Reprenez le document HTML de l'exercice 3 et ajoutez un lien (<a>) dans le paragraphe. Vous devez alors trouver la règle CSS qui définit la couleur du texte dans le lien (propriété color) dans le fichier CSS local et modifier sa valeur pour qu'il soit vert (green).

Pour cet exercice, faites le lien vers le fichier non-minifié, bootstrap.css, à la place de boostrap.min.css.

Vérifiez que votre modification est prise en compte.

Remarquez que le fichier CSS de Bootstrap ne contient que des règles CSS et des requêtes média. Vous pouvez donc tout comprendre dedans, et il ne faut pas hésiter à le lire pour bien comprendre ce que Bootstrap fait.

Modifier les règles CSS de Bootstrap

Si vous voulez définir une règle CSS qui est déjà définie dans Bootstrap, vous avez deux options :

  1. Modifier le fichier CSS de Bootstrap. C'est une très mauvaise idée pour plusieurs raisons.
  2. Ajouter une nouvelle règle.

Quand il y a deux règles CSS identiques avec des valeurs différentes, CSS utilise un algorithme pour décider laquelle il doit utiliser. Cet algorithme est assez complexe. La solution la plus simple est la suivante :

  1. Créez un nouveau fichier CSS vide.
  2. Copiez l'ancienne règle CSS (le sélecteur et la déclaration) et collez-la sur le fichier vierge. Vous pouvez trouver cette règle grâce aux outils de développement web de votre navigateur web.
  3. Changez la valeur dans ce fichier.
  4. Faites la liaison de votre fichier HTML vers le nouveau fichier CSS, mais après le lien vers Bootstrap (par CDN ou en local).

Cette règle modifiée écrasera l'ancienne car elle est lue après.

Exercice 5

Dans cet exercice vous allez mettre en pratique la modification d'une règle CSS.

Prenez ce document HTML et faites le nécessaire pour faire les modification suivantes :

  • La marge inférieure de l'élément h1 doit être de 2rem.
  • La taille de la bordure de la classe border doit être de 5 pixels.
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>M3206</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  <body>
    <h1>Exercice 5 du TP n° 1</h1>
    <p class="border">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus nisl in enim mollis dictum. Vivamus eu nulla odio. Vivamus condimentum ante et diam malesuada, vitae pretium eros elementum. Nulla facilisi. Nunc vel tempor sapien. Sed luctus egestas lectus vitae condimentum. Sed ac sem nibh. Mauris blandit placerat pellentesque. Sed pellentesque quis mauris et feugiat. Aliquam accumsan laoreet sem quis malesuada. 
    </p>
    <p class="border">
      Aenean sed nulla sed diam varius vestibulum eget vehicula ante. In mattis tristique ante. Morbi magna eros, efficitur vel tempus et, vulputate sit amet leo. Ut pretium purus metus, sed auctor felis ullamcorper vitae. Quisque sed tortor at magna pharetra ultricies ac ac tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce orci sapien, viverra ullamcorper ultricies ac, tempus eget turpis 
    </p>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

Vérifiez, visuellement mais aussi à l'aide des outils de développement web de votre navigateur web, que les nouvelles règles CSS écrasent celles définies dans Bootstrap.

L'utilisation d'un framework CSS ne doit pas vous imposer des règles de style. Il est donc utile de savoir le modifier pour le personnaliser selon votre goût, mais aussi pour vous distinguer des autres sites web utilisant le même framework.

Pour une modification plus profonde de Bootstrap, vous pouvez créer un thème, mais pour cela il faut connaître le langage Sass.