Intégration multimédia S3 (M3206) – Exercices de TD

Liste d'exercices à faire pendant les séances de TD.

TD #1

Exercice 1

Dans cet exercice nous allons faire une première mise en page avec Bootstrap. Pour cela, faites une grille avec trois lignes :

  • La ligne 1 contient trois colonnes de largeur 4, 5 et 3 respectivement.
  • La ligne 2 contient deux colonnes de largeur 2 et 10.
  • La ligne 3 contient cinq colonnes de largeur pareille, sauf pour la colonne centrale, qui s'adapte à son contenu.

Pour voir correctement votre mise en page, ajoutez du texte dans chaque colonne. Aussi, utilisez la règle CSS 

div {
  border: 1px solid black;
}

pour bien distinguer les colonnes.

Exercice 2

Dans cet exercice nous faisons une mise en page responsive, qui s'adapte à la largeur de l'écran. Nous avons deux lignes, avec deux colonnes chacune. Les instructions pour chaque colonnes sont :

  • Ligne 1, colonne 1 : largeur 6 par défaut, et 4 pour un écran xl
  • Ligne 1, colonne 2 : largeur 6 par défaut, et 8 pour un écran xl
  • Ligne 2, colonne 1 : largeur 4 par défaut, 7 pour les écrans lg et 6 pour les écrans xl
  • Ligne 2, colonne 2 : largeur 8 par défaut, 5 pour les écrans lg et 6 pour les écrans xl

Exercice 3

Modifiez l'exercice 1 pour avoir une ligne normale, une ligne incomplète et une ligne débordante.

Exercice 4

Nous allons pratiquer comment faire une mise en page avec différents alignements horizontaux et verticaux. Pour cela, faites une grille (statique) avec 2 × 2 colonnes telle que :

  • les colonnes de la première ligne sont collées en haut et centrées horizontalement.
  • les colonnes de la deuxième ligne sont centrés verticalement mais collées à droite.

Vous pouvez utiliser le modèle suivant, qui contient des colonnes avec des hauteurs différentes : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <style>
    div { border: 1px solid black; }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae tortor nisi. Proin eget consectetur neque, at tristique lorem.
      </div>
      <div class="col-4">
        Sed ut volutpat felis, eget accumsan lorem
      </div>
    </div>
    <div class="row">
      <div class="col-4">
        Suspendisse sollicitudin tellus urna, nec facilisis dolor consequat vitae. Praesent ultrices mi fermentum, vehicula enim sit amet, maximus magna. Nunc eleifend augue tortor, quis porta mauris sagittis vitae.
      </div>
      <div class="col-4">
        Quisque et augue finibus, pulvinar metus id, lobortis purus. Cras vulputate tortor a risus interdum feugiat.
      </div>
    </div>
  </div>
  <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>

Exercice 5

Nous allons mettre en pratique les classes de Bootstrap pour ajouter des espaces horizontaux entre les colonnes d'une même ligne. Dans cet exercice, faites une mise en page responsive qui utilise au moins les classes offset-3, offset-5, offset-lg-3 et offset-lg-5.

Vous pouvez utiliser le code HTML fourni dans l'exercice précédent pour aller plus vite.

Exercice 6

Faites une grille avec 1 ligne et 3 colonnes telle que :

  • Pour un petit écran, les colonnes contiennent A, B, et C
  • Pour un écran moyen, les colonnes contiennent B, C, et A
  • Pour un écran très grand, les colonnes contiennent C, A et B

TD #2

Exercice 1

Adaptez le code HTML suivant pour faire une pagination avec Bootstrap 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque vel lectus aliquet tempor ac a est. Vivamus non condimentum nibh. Morbi maximus lectus ullamcorper, ullamcorper libero ac, suscipit dui. Aliquam eget tortor urna. Vestibulum ac velit tincidunt, egestas urna et, molestie quam. Cras imperdiet, sapien quis tempor interdum, turpis lectus efficitur dui, a pretium leo magna non lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec facilisis ut nisi vitae sollicitudin. Duis pulvinar ultrices odio laoreet molestie. Donec lacinia placerat purus. Vestibulum felis leo, auctor et tortor ut, viverra malesuada ligula. Donec vehicula posuere nibh ut fringilla. Vestibulum quis pretium elit, ac posuere risus. Mauris ornare id ligula et tincidunt.
    </p>
    <p>
      Sed eu mauris leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean id augue sed magna placerat euismod. Suspendisse nulla libero, sodales nec placerat eget, pharetra at lorem. Maecenas cursus malesuada mollis. Duis scelerisque leo sit amet elit mattis semper. Praesent porta blandit orci, et mollis ligula commodo ut. Phasellus dictum vel risus vel convallis. Praesent libero nibh, faucibus at ornare vel, elementum a nulla. Pellentesque vitae pharetra purus, at tincidunt odio. Vivamus vehicula vestibulum enim, vitae elementum orci fringilla id. Phasellus ac arcu non orci fermentum consequat non at mi. Proin ornare, odio a ultrices laoreet, libero est semper nisl, sed dapibus enim est vitae dolor. Curabitur laoreet odio et ipsum lobortis, ut laoreet purus cursus. Curabitur congue eleifend rhoncus. 
    </p>
    <div class="row justify-content-center">
      <div class="col-auto">
        <a href="contents.php?page=1">Début</a>
        &hellip;
        <a href="contents.php?page=7">7</a>
        <a href="contents.php?page=8">8</a>
        <a href="contents.php?page=9">9</a>
        &hellip;
        <a href="contents.php?page=26">Fin</a>
      </div>
    </div>
  </div>
  <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>

Vous pouvez consulter la documentation ici si vous en avez besoin.

Exercice 2

Adaptez le code HTML suivant pour utiliser un popover au lieu de ce script. 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206</title>
  <meta charset="utf-8">
</head>
<body>
  <form method="post" action="signup.php">
    <label for="_email">Adresse e-mail</label>
    <input type="email" name="user_mail" id="_email">
    <button type="button" onclick="aide_email()">?</button>
    <p id="aide"></p>
    <input type="submit" value="Valider">
  </form>
<script>
  function aide_email() {
    document.getElementById("aide").innerHTML = "Écrivez votre adresse e-mail universitaire : prenom.nom@etu.univ-amu.fr";
  }
</script>
</body>
</html>

Vous pouvez consulter la documentation ici si vous en avez besoin.

Exercice 3

Adaptez le code HTML suivant pour utiliser la barre de navigation de Bootstrap. De plus, la barre doit être caché pour un tout petit écran. 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206</title>
  <meta charset="utf-8">
  <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    li {
      float: left;
    }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .active {
      background-color: #04AA6D;
    }

    li.dropdown {
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1;}

    .dropdown:hover .dropdown-content {
      display: block;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact" class="active">Contact</a></li>
    <li class="dropdown">
      <a href="#products" class="dropbtn">Products</a>
      <div class="dropdown-content">
        <a href="#products-hats">Hats</a>
        <a href="#products-belts">Belts</a>
        <a href="#products-socks">Socks</a>
      </div>
    </li>
    <li style="float:right"><a href="#about">About</a></li>
  </ul>
</body>
</html>

Vous pouvez consulter la documentation ici si vous en avez besoin.

Exercice 4

Adaptez le code HTML suivant pour faire un carousel avec Bootstrap. 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
  <div class="container">
    <div class="row">
      <div class="col">
        <img src="https://picsum.photos/id/1/400" class="img-fluid">
      </div>
      <div class="col">
        <img src="https://picsum.photos/id/2/400" class="img-fluid">
      </div>
      <div class="col">
        <img src="https://picsum.photos/id/3/400" class="img-fluid">
      </div>
      <div class="col">
        <img src="https://picsum.photos/id/4/400" class="img-fluid">
      </div>
      <div class="col">
        <img src="https://picsum.photos/id/5/400" class="img-fluid">
      </div>
    </div>
  </div>
  <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>

Vous pouvez consulter la documentation ici si vous en avez besoin.

Exercice 5

Adaptez le code HTML suivant pour faire un modal avec Bootstrap. 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>M3206</title>
  <meta charset="utf-8">
  <style>
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0,0.4);
    }

    .contenu {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      border: 1px solid #888;
      width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
    }

    @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0} 
      to {top:0; opacity:1}
    }

    @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
    }

    .fermer {
      color: white;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .fermer:hover,
    .fermer:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    .entete {
      padding: 2px 16px;
      background-color: #5cb85c;
      color: white;
    }

    .corps {
      padding: 2px 16px;
    }
  </style>
</head>
<body>
  <p>
    Proin nec dui non leo rhoncus mollis eu et tortor. Etiam tincidunt nisi commodo risus fringilla varius. Ut fermentum, lectus vitae posuere ultrices, leo nibh accumsan ipsum, eu ultricies risus leo at dui. Curabitur quis tortor non erat lobortis pharetra. 
    <button id="leBouton">Plus de détails</button>
  </p>

  <div id="leModal" class="modal">
    <div class="contenu">
      <div class="entete">
        <span class="fermer">&times;</span>
        <h2>Détails</h2>
      </div>
      <div class="corps">
        <p>
         Phasellus ultricies quam quis diam mattis hendrerit. Donec vel lacus condimentum magna vestibulum cursus eleifend non purus. Integer lorem nibh, tempor in dictum id, faucibus nec risus. Sed et leo diam. Morbi vitae convallis magna, non sodales risus. Sed eget dictum elit. Integer placerat nec enim at consectetur. Vestibulum libero velit, aliquet venenatis mauris ac, gravida vestibulum justo. Nullam laoreet eu ligula eu lobortis. Vivamus pellentesque, orci vel accumsan consequat, augue metus dignissim tellus, at eleifend velit ante eleifend nibh. Etiam facilisis bibendum leo.
       </p>
       <ol>
        <li>
         Morbi id arcu mauris. 
       </li>
       <li>
        Curabitur et luctus magna, sit amet malesuada dolor. In venenatis eget nibh ac interdum. 
      </li>
      <li>
        Vestibulum mollis ullamcorper aliquet. 
      </li>
      <li>
        Etiam tincidunt, ipsum non sodales rhoncus, quam urna placerat leo, eget egestas nibh libero ac tellus. 
      </li>
      <li>
        Vestibulum sagittis diam neque, ut hendrerit ligula sodales vel.
      </li>
    </ol>
  </div>
</div>

</div>

<script>
  var modal = document.getElementById("leModal");
  var btn = document.getElementById("leBouton");
  var span = document.getElementsByClassName("fermer")[0];

  btn.onclick = function() {
    modal.style.display = "block";
  }

  span.onclick = function() {
    modal.style.display = "none";
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

</body>
</html>

Vous pouvez consulter la documentation ici si vous en avez besoin.

Exercice 6

Adaptez le code HTML suivant pour faire un formulaire avec un accordéon en utilisant Bootstrap. 

<!DOCTYPE html>
<html>
<head>
  <title>Form</title>
  <style>
    body{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .main{
      width: 350px;
      height: 500px;
      background: red;
      overflow: hidden;
      border-radius: 10px;
    }
    #chk{
      display: none;
    }
    .signup{
      position: relative;
      width:100%;
      height: 100%;
    }
    label{
      color: #fff;
      font-size: 2.3em;
      justify-content: center;
      display: flex;
      margin: 60px;
      font-weight: bold;
      cursor: pointer;
      transition: .5s ease-in-out;
    }
    input{
      width: 60%;
      height: 20px;
      background: #e0dede;
      justify-content: center;
      display: flex;
      margin: 20px auto;
      padding: 10px;
      border: none;
      outline: none;
      border-radius: 5px;
    }
    button{
      height: 40px;
      margin: 10px auto;
      justify-content: center;
      display: block;
      color: #fff;
      background: #573b8a;
      font-size: 1em;
      font-weight: bold;
      margin-top: 20px;
      outline: none;
      border: none;
      border-radius: 5px;
      transition: .2s ease-in;
      cursor: pointer;
    }
    button:hover{
      background: #6d44b8;
    }
    .login{
      height: 460px;
      background: #eee;
      border-radius: 60% / 10%;
      transform: translateY(-180px);
      transition: .8s ease-in-out;
    }
    .login label{
      color: #573b8a;
      transform: scale(.6);
    }

    #chk:checked ~ .login{
      transform: translateY(-500px);
    }
    #chk:checked ~ .login label{
      transform: scale(1);  
    }
    #chk:checked ~ .signup label{
      transform: scale(.6);
    }

  </style>
</head>
<body>
  <div class="main">    
    <input type="checkbox" id="chk">

    <div class="signup">
      <form>
        <label for="chk" aria-hidden="true">Sign up</label>
        <input type="text" name="txt" placeholder="User name">
        <input type="email" name="email" placeholder="Email" >
        <input type="password" name="pswd" placeholder="Password">
        <button>Sign up</button>
      </form>
    </div>

    <div class="login">
      <form>
        <label for="chk">Login</label>
        <input type="email" name="email" placeholder="Email" >
        <input type="password" name="pswd" placeholder="Password">
        <button>Login</button>
      </form>
    </div>
  </div>
</body>
</html>

Vous pouvez consulter la documentation sur l'accordéon et les formulaires si vous en avez besoin.