1 00:00:03,780 --> 00:00:07,090 Il est temps de passer à l'exercice suivant. 2 00:00:07,090 --> 00:00:10,005 Dans cet exercice, nous allons traiter des images, 3 00:00:10,005 --> 00:00:13,660 comment inclure des images dans nos pages Web 4 00:00:13,660 --> 00:00:21,030 et comment utiliser l'objet multimédia de notre page Web. 5 00:00:21,040 --> 00:00:23,240 Comme première étape, 6 00:00:23,240 --> 00:00:27,890 accédez à vos instructions d'exercice et téléchargez le fichier image.zip, 7 00:00:27,890 --> 00:00:34,550 puis enregistrez-le dans votre dossier de confusion. 8 00:00:35,890 --> 00:00:42,360 Et puis décompressez le fichier pour obtenir un dossier nommé, img, 9 00:00:42,360 --> 00:00:44,210 et à l'intérieur, vous trouverez 10 00:00:44,210 --> 00:00:49,175 quelques images que nous allons utiliser dans cet exercice. 11 00:00:49,175 --> 00:00:53,115 Toutes les images sont au format png dans ce dossier. 12 00:00:53,115 --> 00:00:58,785 Nous allons maintenant travailler à ajouter quelques images à la page. 13 00:00:58,785 --> 00:01:02,310 Tout d'abord, ajoutons le logo de notre restaurant. 14 00:01:02,310 --> 00:01:06,360 Donc, en allant à la page index.html, dans le Jumbotron, 15 00:01:06,360 --> 00:01:11,130 vous verrez la deuxième div ici a le col-sm. 16 00:01:11,130 --> 00:01:17,295 Donc, nous allons réparer cela en ajoutant à cette div, 17 00:01:17,295 --> 00:01:24,030 et aligner le centre auto à cette div. 18 00:01:24,030 --> 00:01:26,620 Maintenant, à cette div, 19 00:01:26,620 --> 00:01:28,515 nous allons ajouter une image. 20 00:01:28,515 --> 00:01:33,790 Donc, laissez-moi utiliser l'image avec la source, img. 21 00:01:33,790 --> 00:01:40,710 Nous avons déjà mis le dossier d'images contenant les images dans notre projet. 22 00:01:40,710 --> 00:01:49,150 Donc, à partir de là, j'ajouterai le fichier logo.png comme image ici. 23 00:01:49,150 --> 00:01:58,140 En outre, je vais ajouter la classe comme fluide d'image, de 24 00:01:58,140 --> 00:02:06,410 sorte que cette image sera automatiquement réactive et s'adaptera à la taille de l'écran. 25 00:02:07,160 --> 00:02:09,634 Sauvegardons les modifications. 26 00:02:09,634 --> 00:02:14,810 Nous allons appliquer la même modification à la page aboutus.html, 27 00:02:14,810 --> 00:02:19,855 ainsi qu'à la page contactus.html dans le Jumbotron. 28 00:02:19,855 --> 00:02:23,350 Maintenant, quand vous regardez de plus près votre page web, 29 00:02:23,350 --> 00:02:26,350 vous constaterez que dans le Jumbotron, 30 00:02:26,350 --> 00:02:29,210 juste après ces mots, 31 00:02:29,210 --> 00:02:34,120 vous verrez l'image de notre restaurant qui y est insérée. 32 00:02:34,120 --> 00:02:36,905 Ensuite, nous allons dans le navbar, 33 00:02:36,905 --> 00:02:41,750 et là où nous avons ceci pour la marque navbar, 34 00:02:41,750 --> 00:02:47,915 je vais remplacer ces mots pour le restaurant par le logo correspondant. 35 00:02:47,915 --> 00:02:57,650 Donc, ces mots, je vais remplacer cela par img, 36 00:02:57,650 --> 00:03:03,280 et la source est logo.png. 37 00:03:03,280 --> 00:03:13,750 En outre, je vais spécifier un attribut de hauteur de 30, 38 00:03:14,310 --> 00:03:20,950 et un attribut de largeur de 41 à ce logo. 39 00:03:20,950 --> 00:03:28,530 Cette taille est adaptée à la marque navbar là-bas. 40 00:03:28,530 --> 00:03:30,330 Donc, sauvegardons les modifications. 41 00:03:30,330 --> 00:03:35,895 Je vais aller faire le même changement dans la page aboutus.html, 42 00:03:35,895 --> 00:03:39,745 et aussi la page contactus.html. En 43 00:03:39,745 --> 00:03:41,790 regardant la page web maintenant, 44 00:03:41,790 --> 00:03:44,900 vous verrez que le nom du restaurant a maintenant été remplacé 45 00:03:44,900 --> 00:03:49,835 par le logo du restaurant en petite taille là-bas. 46 00:03:49,835 --> 00:03:53,280 Vous voyez maintenant que lorsque vous accédez à la page À propos, 47 00:03:53,280 --> 00:03:56,720 vous verrez l'image qui y est incluse, 48 00:03:56,720 --> 00:03:59,700 et de même sur la page Contact, 49 00:03:59,700 --> 00:04:04,995 vous verrez que l'image a été mise à jour en revenant à la page principale. 50 00:04:04,995 --> 00:04:07,080 Maintenant, ce que nous allons faire, 51 00:04:07,080 --> 00:04:13,980 c'est d'utiliser un objet multimédia à la place de ces descriptions que nous avons ici, 52 00:04:13,980 --> 00:04:19,095 puis utiliser l'objet média pour les remplacer par 53 00:04:19,095 --> 00:04:25,370 la description et aussi une image à inclure. 54 00:04:25,370 --> 00:04:29,890 Cela donne une meilleure vue de notre page Web. 55 00:04:29,890 --> 00:04:32,725 Alors, allons de l'avant et faisons ce changement. 56 00:04:32,725 --> 00:04:37,695 Pour utiliser l'objet multimédia dans notre page index.html, 57 00:04:37,695 --> 00:04:40,555 nous allons accéder à la première ligne de contenu ici. 58 00:04:40,555 --> 00:04:44,930 Et puis juste là dans la deuxième div, 59 00:04:44,930 --> 00:04:51,380 je vais introduire un nouveau dev avec les médias de classe, 60 00:04:51,380 --> 00:04:57,500 et inclure le contenu à l'intérieur de cette div là, 61 00:04:57,500 --> 00:05:01,245 fermant la div. 62 00:05:01,245 --> 00:05:04,940 Maintenant, à l'intérieur de cette div, 63 00:05:04,940 --> 00:05:10,820 je vais introduire une image à utiliser là. 64 00:05:10,820 --> 00:05:14,840 Ici, je vais et dis classe d'image, 65 00:05:14,840 --> 00:05:20,120 et pour utiliser une image dans un objet multimédia, 66 00:05:20,120 --> 00:05:26,820 nous devons appliquer quelques classes supplémentaires liées à flex ici, 67 00:05:26,820 --> 00:05:31,545 donc j'applique le d-flex, puis mr-3. 68 00:05:31,545 --> 00:05:40,035 Donc, M signifiant marge droite avec le numéro 3. 69 00:05:40,035 --> 00:05:43,625 Cela donne une marge suffisante à droite de cette image, de 70 00:05:43,625 --> 00:05:53,205 sorte que la description est légèrement séparée de l'image dans la page Web. 71 00:05:53,205 --> 00:05:59,370 Et puis j'utiliserai la vignette de l'image pour cette image, 72 00:05:59,370 --> 00:06:08,650 puis j'utiliserai aussi align-self-center pour l'image, 73 00:06:08,650 --> 00:06:16,350 puis tapez la source de l'image, qui est img, 74 00:06:16,350 --> 00:06:23,570 et vous pouvez 75 00:06:23,570 --> 00:06:30,680 rechercher le nom de l'image dans le dossier img, 76 00:06:30,680 --> 00:06:34,340 et laissez-moi lui donner une alternative là, 77 00:06:36,240 --> 00:06:39,005 et fermez l'image. 78 00:06:39,005 --> 00:06:43,465 Cela va maintenant inclure l'image dans mon objet midi. 79 00:06:43,465 --> 00:06:49,830 En outre, je vais créer le corps du média pour cette image en 80 00:06:49,830 --> 00:06:56,840 disant corps de média de classe div, 81 00:06:56,840 --> 00:07:06,055 puis inclus ce h2 et p qui contient la description à l'intérieur de ce div là. 82 00:07:06,055 --> 00:07:10,365 Donc, laissez-moi indenter le contenu là, 83 00:07:10,365 --> 00:07:16,395 et puis fermer cette div ici. 84 00:07:16,395 --> 00:07:23,395 Avec cela, ma description est incluse dans le corps du média. 85 00:07:23,395 --> 00:07:25,430 En plus de ce h2, 86 00:07:25,430 --> 00:07:30,955 je vais introduire une classe comme mt-0. 87 00:07:30,955 --> 00:07:37,785 Avec cela, cette classe dit marge haut zéro. 88 00:07:37,785 --> 00:07:44,940 Ce titre sera aligné sur le haut de cet objet multimédia particulier ici. 89 00:07:44,940 --> 00:07:48,120 Avec ces modifications, sauvegardons les modifications, 90 00:07:48,120 --> 00:07:51,705 puis allons jeter un coup d'œil à notre page Web. 91 00:07:51,705 --> 00:07:53,930 En allant sur notre page Web, 92 00:07:53,930 --> 00:07:56,980 vous remarquerez immédiatement le changement dans la page Web. 93 00:07:56,980 --> 00:08:00,115 Vous pouvez maintenant voir qu'il y a une position d'image ici, 94 00:08:00,115 --> 00:08:03,650 puis la description 95 00:08:03,650 --> 00:08:08,375 qui était antérieure à cet emplacement a été correctement positionnée ici. 96 00:08:08,375 --> 00:08:13,280 Contrastez ceci avec les deux lignes restantes, 97 00:08:13,280 --> 00:08:17,290 et vous commencez maintenant à voir comment l'objet multimédia nous aide 98 00:08:17,290 --> 00:08:23,545 à transformer cela en quelque chose de plus dynamique. 99 00:08:23,545 --> 00:08:30,270 Je vais faire la même chose à la troisième rangée ici. 100 00:08:30,270 --> 00:08:38,155 La deuxième ligne sera laissée comme un exercice pour vous dans l'affectation. 101 00:08:38,155 --> 00:08:40,680 En allant à ce troisième exercice, 102 00:08:40,680 --> 00:08:48,730 je vais appliquer un changement similaire à cette troisième ligne pour introduire l'objet multimédia ici. 103 00:08:48,730 --> 00:08:51,595 Permettez-moi de présenter l'objet média là, 104 00:08:51,595 --> 00:08:54,240 puis à ce div, 105 00:08:54,240 --> 00:08:57,115 allez dans l'objet média, 106 00:08:57,115 --> 00:09:01,290 puis introduisez l'image que je vais utiliser ici. 107 00:09:01,290 --> 00:09:05,410 J' utilise la classe comme d-flex mr-3. 108 00:09:05,410 --> 00:09:08,830 Si vous positionnez l'image sur le côté droit, 109 00:09:08,830 --> 00:09:14,060 alors vous devez donner une marge comme ml-3 pour cela. 110 00:09:14,060 --> 00:09:20,560 En outre, je vais ajouter dans la classe de vignettes de l'image à cela, 111 00:09:20,560 --> 00:09:26,005 puis dire aussi, align-self-center. 112 00:09:26,005 --> 00:09:31,010 Ce sont les classes que je vais ajouter à cette image. 113 00:09:31,010 --> 00:09:35,670 Et puis, spécifions la source de cette image, 114 00:09:35,760 --> 00:09:46,880 img et alberto.png, puis je spécifierai l'alternative. 115 00:09:52,060 --> 00:09:57,400 Et après cela, ce h2 et h4 et le p, 116 00:09:57,400 --> 00:10:07,140 je vais les fermer à l'intérieur d'un div du corps des médias ici, 117 00:10:07,760 --> 00:10:11,845 fermant le div du corps des médias. 118 00:10:11,845 --> 00:10:17,845 Nous avons maintenant terminé l'objet multimédia dans la troisième rangée. 119 00:10:17,845 --> 00:10:19,230 Sauvegardons les modifications, 120 00:10:19,230 --> 00:10:22,700 puis allons jeter un oeil à notre page Web suivante. 121 00:10:22,700 --> 00:10:25,480 Maintenant, en regardant notre page web, 122 00:10:25,480 --> 00:10:30,685 vous remarquerez que nous avons la description du plat là-bas. 123 00:10:30,685 --> 00:10:32,760 Maintenant, si vous passez à la troisième ligne, 124 00:10:32,760 --> 00:10:37,705 vous voyez maintenant comment la troisième ligne a également été redéfinie. 125 00:10:37,705 --> 00:10:40,425 Notez l'utilisation du média à gauche, 126 00:10:40,425 --> 00:10:45,210 ce qui signifie que l'image est positionnée sur le côté gauche de cet objet multimédia, 127 00:10:45,210 --> 00:10:52,230 puis la page centrale du média positionne l'image au milieu de la description. 128 00:10:52,230 --> 00:10:55,760 Vous pouvez également utiliser le support en haut et en bas 129 00:10:55,760 --> 00:11:01,970 pour aligner l'image en haut et en bas de cette description. 130 00:11:01,970 --> 00:11:05,185 Avec cela, nous complétons cet exercice. 131 00:11:05,185 --> 00:11:12,970 Dans cet exercice, nous avons examiné l'utilisation d'images et d'objets multimédias dans notre page Web. 132 00:11:12,970 --> 00:11:14,535 C' est un bon moment, encore une fois, 133 00:11:14,535 --> 00:11:16,365 pour faire un bon commentaire, 134 00:11:16,365 --> 00:11:19,960 avec le message, les images et les médias.