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

Dans cette séance de TP vous allez apprendre comment utiliser Bootstrap pour insérer des images sur une page web.

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

Les images

Bootstrap propose la classe .img-fluid pour rendre les images responsives. Ainsi, une image ne dépasse jamais son conteneur. 

<img class="img-fluid" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo de Google">

Exercice 1

Dans cet exercice on va voir l'effet de la classe .img-fluid sur un élément img.

Faites un document HTML avec un grille contenant 1 ligne avec 3 colonnes. Chaque colonne doit contenir une image avec la classe .img-fluid. Vous pouvez utiliser les URLs suivantes pour vos images. 

https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Hollow_Horn_Bear_LCCN_2016858434_%282%29_%28cropped%29.jpg/626px-Hollow_Horn_Bear_LCCN_2016858434_%282%29_%28cropped%29.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Billie_Holiday%2C_Downbeat%2C_New_York%2C_N.Y.%2C_ca._Feb._1947_%28William_P._Gottlieb_04251%29.jpg/736px-Billie_Holiday%2C_Downbeat%2C_New_York%2C_N.Y.%2C_ca._Feb._1947_%28William_P._Gottlieb_04251%29.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Ansel_Adams_and_camera.jpg/607px-Ansel_Adams_and_camera.jpg

Pour bien voir la différence, ajoutez une autre ligne identique, mais sans les classes .img-fluid.

En plus de rendre le fichier HTML, ajoutez une capture d'écran où on voit la différence entre les deux lignes.

Pour faire une vignette (thumbnail), on peut utiliser la classe .img-thumbnail à la place de .img-fluid. Cela ajoute une bordure.

Si on veut ajouter un légende à une image, on peut utiliser les classes .figure, .figure-img et .figure-caption, en plus de .img-fluid. 

<figure class="figure">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="figure-img img-fluid" alt="Logo de Google">
  <figcaption class="figure-caption">Ceci est le logo de Google.</figcaption>
</figure>

Exercice 2

Modifiez l'exercice précédent pour ajouter des légendes aux images. Utilisez les trois nouvelles classes. Ne recopiez pas la deuxième ligne de la grille avec les images non responsives.

Imbriquer les grilles

Considérez la grille suivante, avec deux colonnes indépendantes. Notez que les colonnes à gauche ne sont pas alignées avec celles à droite.

Pour faire ceci, il suffit d'imbriquer les grilles :

  1. Faire une grille avec une seule ligne qui a deux colonnes (A et B).
  2. Dans la colonne A, faire une nouvelle grille avec deux lignes.
  3. Dans la colonne B, faire une nouvelle grille avec trois lignes.

Voici le code HTML résultant. 

<div class="row">
  <div class="col">
    <div class="row">
      <div class="col"></div>
    </div><!--.row-->
    <div class="row">
      <div class="col"></div>
    </div><!--.row-->
  </div><!--.col-->
  <div class="col">
    <div class="row">
      <div class="col"></div>
    </div><!--.row-->
    <div class="row">
      <div class="col"></div>
    </div><!--.row-->
    <div class="row">
      <div class="col"></div>
    </div><!--.row-->
  </div><!--.col-->
</div><!--.row-->

Si vous avez compris l'exemple précédent (franchement, le code HTML est plus facile à écrire qu'à lire), alors vous êtes maintenant capable de faire une mise en page avec de colonnes indépendantes.

Exercice 3

Faites une mise en page comme Pinterest pour afficher plein d'images. Il faut au moins 4 colonnes avec des images, toutes avec de tailles différentes.

Vous pouvez utiliser les URLs suivantes pour vos images. 

https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Minggu_Pagi_6.45_%287_February_1954%29_cover.jpg/565px-Minggu_Pagi_6.45_%287_February_1954%29_cover.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Bergelut_dengan_asap_nan_beracun.jpg/678px-Bergelut_dengan_asap_nan_beracun.jpg
https://upload.wikimedia.org/wikipedia/commons/c/ca/Venice_Carnival_-_Masked_Lovers_%282010%29.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Bertillon%2C_Alphonse%2C_fiche_anthropom%C3%A9trique_recto-verso.jpg/800px-Bertillon%2C_Alphonse%2C_fiche_anthropom%C3%A9trique_recto-verso.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Advertisement_for_Hudson%27s_Soap_with_policemen_%28front%29._Wellcome_L0069078_-_Restoration.jpg/800px-Advertisement_for_Hudson%27s_Soap_with_policemen_%28front%29._Wellcome_L0069078_-_Restoration.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Ngayogyakarta-style_blangkon%2C_2015-05-17_04.jpg/800px-Ngayogyakarta-style_blangkon%2C_2015-05-17_04.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/2014_Origami_modu%C5%82owe.jpg/583px-2014_Origami_modu%C5%82owe.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Daruma_doll%2C_cut_out%2C_03.jpg/600px-Daruma_doll%2C_cut_out%2C_03.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Charles_Cooper_Henderson_-_Mail_Coaches_on_the_Road-_the_Louth-London_Royal_Mail_progressing_at_Speed_-_Google_Art_Project.jpg/800px-Charles_Cooper_Henderson_-_Mail_Coaches_on_the_Road-_the_Louth-London_Royal_Mail_progressing_at_Speed_-_Google_Art_Project.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Samuel_D._Ehrhart_-_An_International_High_Noon_Divorce_%281906%29.jpg/800px-Samuel_D._Ehrhart_-_An_International_High_Noon_Divorce_%281906%29.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/%EC%84%9C%EB%B4%89%EC%B4%9D_%EA%B8%88%EA%B4%80_%EA%B8%88%EC%A0%9C%EB%93%9C%EB%A6%AC%EA%B0%9C.jpg/738px-%EC%84%9C%EB%B4%89%EC%B4%9D_%EA%B8%88%EA%B4%80_%EA%B8%88%EC%A0%9C%EB%93%9C%EB%A6%AC%EA%B0%9C.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Bangles_Ornaments.jpg/800px-Bangles_Ornaments.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Geiko_Kimiha.jpg/682px-Geiko_Kimiha.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Banaue_Philippines_Handmade-brooms-01.jpg/710px-Banaue_Philippines_Handmade-brooms-01.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/%D0%9C%D1%83%D1%81%D1%81%D0%B5%D0%BC_%28%D1%84%D0%BE%D0%BB%D1%8C%D0%BA%D0%BB%D0%BE%D1%80%D0%BD%D1%8B%D0%B9_%D1%84%D0%B5%D1%81%D1%82%D0%B8%D0%B2%D0%B0%D0%BB%D1%8C%29_%D0%B2_%D0%A2%D0%B0%D0%BD-%D0%A2%D0%B0%D0%BD%D0%B5_%28%D0%9C%D0%B0%D1%80%D0%BE%D0%BA%D0%BA%D0%BE%29.jpg/800px-%D0%9C%D1%83%D1%81%D1%81%D0%B5%D0%BC_%28%D1%84%D0%BE%D0%BB%D1%8C%D0%BA%D0%BB%D0%BE%D1%80%D0%BD%D1%8B%D0%B9_%D1%84%D0%B5%D1%81%D1%82%D0%B8%D0%B2%D0%B0%D0%BB%D1%8C%29_%D0%B2_%D0%A2%D0%B0%D0%BD-%D0%A2%D0%B0%D0%BD%D0%B5_%28%D0%9C%D0%B0%D1%80%D0%BE%D0%BA%D0%BA%D0%BE%29.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Cigarette_smuggling_with_a_book.JPG/800px-Cigarette_smuggling_with_a_book.JPG
https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/You_need_only_one_soap%2C_Ivory_soap_-_Strobridge_%26_Co._Lith._-_Restoration_by_Adam_Cuerden.jpg/514px-You_need_only_one_soap%2C_Ivory_soap_-_Strobridge_%26_Co._Lith._-_Restoration_by_Adam_Cuerden.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Streisand_Estate.jpg/800px-Streisand_Estate.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Dolceacqua43_-_Artista_locale_mentre_dipinge_un_acquarello.jpg/800px-Dolceacqua43_-_Artista_locale_mentre_dipinge_un_acquarello.jpg
https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Salt_Farmers_-_Pak_Thale-edit1.jpg/800px-Salt_Farmers_-_Pak_Thale-edit1.jpg

Encore la Wikipédia

S'il vous reste du temps, faites l'exercice suivant.

Exercice 4

Continuez l'exercice sur la nouvelle mise en page pour Wikipédia. Vous pourrez maintenant utiliser les classes pour les images que vous venez d'apprendre.