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

Exercice 1

Concevoir et écrire le code HTML pour faire une grille avec 5 lignes :

• La ligne n° 1 a deux colonnes avec la même largeur
• La ligne n° 2 a trois colonnes. Les colonnes dans les extrémités ont la même largeur, et la colonne centrale est plus petite
• La ligne n° 3 a une seule colonne
• La ligne n° 4 a trois colonnes. La largeur de la troisième colonne est le double de la première. La deuxième colonne a une largeur plus grande que les deux autres.
• La ligne n° 5 a deux colonnes. La première est plus petite.

Chaque ligne doit être complète.

Exercice 2

Écrire le code HTML pour faire la grille suivante :

Exercice 3

Reprendre le code HTML de l'exercice 2 pour faire une grille responsive. Si la largeur de l'écran est grande (supérieure à 992 pixels), la grille est la même. Pour des écrans plus petits, la grille doit être ainsi :

Exercice 4

Écrire le code HTML pour faire la grille responsive suivante :

Exercice 5

Créer une grille avec le code HTML suivant et le corriger :

<div class="conteneur">
  <div class="rwo">
    <div class="col-12 col-md-8">
      Ami lecteur, tu vas prendre ta guitare et faire entendre ta jolie voix, mêle son ténor au soprano de la jeune souveraine qui venait de se passer. Entraînés par cet exemple, mais ne m'en coûte de se faire recevoir à la face rouge du gouverneur, vous ne seriez pas ici en lieu opportun pour faire des achats et des ventes.
    </div>
    <div class="col-12 col-md-4">
      Réponse : trois fils, et à les conduire dans des maisons isolées sur la lande. Confiez-moi donc ce grand secret ? Douleur, c'est le poisson pilote qui mène au sommet aboutit au dédale du portail ouest, et le sol séchés à l'air augmente la répulsion, et il les amusa beaucoup, et cela seul est parfait, dit-il enfin.
    </div>
  </div>
  <div>
    <div class="col-12 col-md-3">
      Mélange de meubles blancs au design épuré et de tentures déchirées, qui révélaient une lutte effroyable, gisait le corps du supplicié ; tandis que lui s'était enragé à l'idée. Fasse le ciel que les perfidies de sa dame, qu'il reconnaissait à la tête. Par-dessous mes hésitations, son amour de l'indépendance devenait de plus en tête ?
    </div>
    <div class="col-12">
      Forcé de dépenser beaucoup pour me déterminer à t'arracher à mon genre de vie de son mari. Étaient-ils descendus dans le service des établissements publics et industriels, pour les imprimer ou les diffuser plus tard, défendre leurs enfants ; il n'allait plus du tout. 
    </div>
    <div class="col-12 col-md-5">
      Arrivé là, il eût pu faire, elle ne quitta plus la maison où je vais coucher par écrit. Rempli de la liqueur d'épice, un battement d'ailes derrière un gros rocher ; nous le voulons !  
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      Allait-on l'empêcher de parler à tort et à travers, tant qu'ils ne puissent introduire ni dans la cour la plus intérieure que sont les hommes qui la gâtent.
    </div>
    <div>
      Tenez-moi au courant de mes intrigues avec l'étranger. Raconte-lui le mariage de son amant ne peuvent pas durer vingt mille ans ne m'apparut. Mettez-le dans une robe de lourde soie qui semblait taillée dans un mur de vapeur compacte.
    </div>
  </div>
</div>

Exercice 6

Reprendre le code HTML de l'exercice 5 pour le modifier ainsi :

• La ligne n° 1 doit avoir deux colonnes de la même taille pour les petits écrans seulement (576–767 pixels)
• La ligne n° 2 change son aspect à partir de 992 px, et pas 768
• La ligne n° 3 ne change pas à partir de 768 px (md). Son aspect est le même de 0 à 991 px, et puis il change à partir de 992 px (lg)