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

Dans cette séance de TP on va apprendre à installer Bootstrap en utilisant deux méthodes.

Puis, on verra comment Bootstrap modifie les propriétés CSS par défaut des éléments HTML.

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 et soumettre le répertoire m3206-tp1 sur AMeTICE.

Première partie : installer Bootstrap

Il y a deux façons (simples) d'utiliser Bootstrap dans une page web :

  1. Lier Bootstrap par CDN : on charge des fichiers qui sont en ligne.
  2. Lier Bootstrap en local : on télécharge le code source et on le lie comme si c'était un fichier .css

(1) Lier par CDN

Aller sur getbootstrap.com / Download / BootstrapCDN.

Copier les deux lignes dans votre document HTML : le lien vers les règles CSS dans l'élément head (juste avant la balise fermante) et le liens vers les scripts JavaScript dans l'élément body (juste avant la balise fermante aussi).

Ajouter aussi les autres deux lignes pour jQuery et Popper.js dans le body, mais avant le lien vers le code JavaScript.

Exercice 1

É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é.

(2) Lier les sources

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

Décompresser l'archive et le placer dans le répertoire du document HTML.

La description de tous les fichiers téléchargés est ici.

Il suffit d'avoir ceci : 

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

La description de tous ces fichiers est ici.

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

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

Il faut :

  1. lier le fichier CSS à la fin de l'élément head : <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
  2. lier le fichier JS à la fin de l'élément body : <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Exercice 2

Répétez l'exercice précédent en faisant les lien vers les sources de Bootstrap.

La liaison vers jQuery et Popper.js est nécessaire seulement pour certains outils de Bootstrap. Ces outils sont répertoriés dans la documentation de Bootstrap (ici).

Exercice 3

Écrivez un document HTML avec au moins un élément div avec la classe alert-dismissible (vous pouvez copier l'exemple ici). Commentez la ligne qui fait la liaison vers jQuery, cherchez l'erreur dans la console de votre navigateur web, et rajoutez le message dans un élément pre.

Exercice 4

Écrivez un document HTML avec au moins un élément div avec la classe dropdown (vous pouvez copier l'exemple ici). Commentez la ligne qui fait la liaison vers Popper.js, cherchez l'erreur dans la console de votre navigateur web, et rajoutez le message dans un élément pre.

Bilan

Si on installe Bootstrap par CDN :

Si on l'installe par les sources :

Deuxième partie : les tripes de Bootstrap

Bootstrap définit les règles CSS de beaucoup d'éléments HTML pour que la page web s'affiche 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.

Exercice 5

Dans cette exercice on va voir comment Bootstrap définit les propriétés CSS des éléments HTML.

Écrivez un document HTML contenant plusieurs (au moins dix) éléments section dans le body. Chaque section doit contenir un élément HTML différent (par exemple, a), suivi d'un élément pre qui contient toutes les propriétés CSS définies par Bootstrap pour cet élément (donc les propriétés de a).

Par exemple : 

...
<section>
  <a>un lien</a>
  <pre>
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: inherit;
  </pre>
</section>
...

Quelques exemples d'éléments HTML à étudier sont : dl, abbr, mark, pre ou kbd.

Annexe : quelques outils

Pensez à valider votre code HTML avec W3C Markup Validation Service. Cela vous permettra de vérifier que vous fermez toutes vos balises et vous apprendra quelques normes HTML moins connues.

Utilisez les raccourcis clavier pour travailler plus efficacement et laisser la souris tranquille. Par exemple :

Alt + Tab
Changer de fenêtre
Super + ↑
Agrandir la fenêtre. Essayez aussi les autres flèches
Ctrl + →
Déplacer le curseur au début du mot suivant. Essayez aussi ←
Ctrl + Début
Déplacer le curseur au début du texte. Essayez aussi Fin
Ctrl + PageUp
Changer d'onglet