Il est temps de passer à l'exercice suivant.
Dans cet exercice, nous allons traiter des images,
comment inclure des images dans nos pages Web
et comment utiliser l'objet multimédia de notre page Web.
Comme première étape,
accédez à vos instructions d'exercice et téléchargez le fichier image.zip,
puis enregistrez-le dans votre dossier de confusion.
Et puis décompressez le fichier pour obtenir un dossier nommé, img,
et à l'intérieur, vous trouverez
quelques images que nous allons utiliser dans cet exercice.
Toutes les images sont au format png dans ce dossier.
Nous allons maintenant travailler à ajouter quelques images à la page.
Tout d'abord, ajoutons le logo de notre restaurant.
Donc, en allant à la page index.html, dans le Jumbotron,
vous verrez la deuxième div ici a le col-sm.
Donc, nous allons réparer cela en ajoutant à cette div,
et aligner le centre auto à cette div.
Maintenant, à cette div,
nous allons ajouter une image.
Donc, laissez-moi utiliser l'image avec la source, img.
Nous avons déjà mis le dossier d'images contenant les images dans notre projet.
Donc, à partir de là, j'ajouterai le fichier logo.png comme image ici.
En outre, je vais ajouter la classe comme fluide d'image, de
sorte que cette image sera automatiquement réactive et s'adaptera à la taille de l'écran.
Sauvegardons les modifications.
Nous allons appliquer la même modification à la page aboutus.html,
ainsi qu'à la page contactus.html dans le Jumbotron.
Maintenant, quand vous regardez de plus près votre page web,
vous constaterez que dans le Jumbotron,
juste après ces mots,
vous verrez l'image de notre restaurant qui y est insérée.
Ensuite, nous allons dans le navbar,
et là où nous avons ceci pour la marque navbar,
je vais remplacer ces mots pour le restaurant par le logo correspondant.
Donc, ces mots, je vais remplacer cela par img,
et la source est logo.png.
En outre, je vais spécifier un attribut de hauteur de 30,
et un attribut de largeur de 41 à ce logo.
Cette taille est adaptée à la marque navbar là-bas.
Donc, sauvegardons les modifications.
Je vais aller faire le même changement dans la page aboutus.html,
et aussi la page contactus.html. En
regardant la page web maintenant,
vous verrez que le nom du restaurant a maintenant été remplacé
par le logo du restaurant en petite taille là-bas.
Vous voyez maintenant que lorsque vous accédez à la page À propos,
vous verrez l'image qui y est incluse,
et de même sur la page Contact,
vous verrez que l'image a été mise à jour en revenant à la page principale.
Maintenant, ce que nous allons faire,
c'est d'utiliser un objet multimédia à la place de ces descriptions que nous avons ici,
puis utiliser l'objet média pour les remplacer par
la description et aussi une image à inclure.
Cela donne une meilleure vue de notre page Web.
Alors, allons de l'avant et faisons ce changement.
Pour utiliser l'objet multimédia dans notre page index.html,
nous allons accéder à la première ligne de contenu ici.
Et puis juste là dans la deuxième div,
je vais introduire un nouveau dev avec les médias de classe,
et inclure le contenu à l'intérieur de cette div là,
fermant la div.
Maintenant, à l'intérieur de cette div,
je vais introduire une image à utiliser là.
Ici, je vais et dis classe d'image,
et pour utiliser une image dans un objet multimédia,
nous devons appliquer quelques classes supplémentaires liées à flex ici,
donc j'applique le d-flex, puis mr-3.
Donc, M signifiant marge droite avec le numéro 3.
Cela donne une marge suffisante à droite de cette image, de
sorte que la description est légèrement séparée de l'image dans la page Web.
Et puis j'utiliserai la vignette de l'image pour cette image,
puis j'utiliserai aussi align-self-center pour l'image,
puis tapez la source de l'image, qui est img,
et vous pouvez
rechercher le nom de l'image dans le dossier img,
et laissez-moi lui donner une alternative là,
et fermez l'image.
Cela va maintenant inclure l'image dans mon objet midi.
En outre, je vais créer le corps du média pour cette image en
disant corps de média de classe div,
puis inclus ce h2 et p qui contient la description à l'intérieur de ce div là.
Donc, laissez-moi indenter le contenu là,
et puis fermer cette div ici.
Avec cela, ma description est incluse dans le corps du média.
En plus de ce h2,
je vais introduire une classe comme mt-0.
Avec cela, cette classe dit marge haut zéro.
Ce titre sera aligné sur le haut de cet objet multimédia particulier ici.
Avec ces modifications, sauvegardons les modifications,
puis allons jeter un coup d'œil à notre page Web.
En allant sur notre page Web,
vous remarquerez immédiatement le changement dans la page Web.
Vous pouvez maintenant voir qu'il y a une position d'image ici,
puis la description
qui était antérieure à cet emplacement a été correctement positionnée ici.
Contrastez ceci avec les deux lignes restantes,
et vous commencez maintenant à voir comment l'objet multimédia nous aide
à transformer cela en quelque chose de plus dynamique.
Je vais faire la même chose à la troisième rangée ici.
La deuxième ligne sera laissée comme un exercice pour vous dans l'affectation.
En allant à ce troisième exercice,
je vais appliquer un changement similaire à cette troisième ligne pour introduire l'objet multimédia ici.
Permettez-moi de présenter l'objet média là,
puis à ce div,
allez dans l'objet média,
puis introduisez l'image que je vais utiliser ici.
J' utilise la classe comme d-flex mr-3.
Si vous positionnez l'image sur le côté droit,
alors vous devez donner une marge comme ml-3 pour cela.
En outre, je vais ajouter dans la classe de vignettes de l'image à cela,
puis dire aussi, align-self-center.
Ce sont les classes que je vais ajouter à cette image.
Et puis, spécifions la source de cette image,
img et alberto.png, puis je spécifierai l'alternative.
Et après cela, ce h2 et h4 et le p,
je vais les fermer à l'intérieur d'un div du corps des médias ici,
fermant le div du corps des médias.
Nous avons maintenant terminé l'objet multimédia dans la troisième rangée.
Sauvegardons les modifications,
puis allons jeter un oeil à notre page Web suivante.
Maintenant, en regardant notre page web,
vous remarquerez que nous avons la description du plat là-bas.
Maintenant, si vous passez à la troisième ligne,
vous voyez maintenant comment la troisième ligne a également été redéfinie.
Notez l'utilisation du média à gauche,
ce qui signifie que l'image est positionnée sur le côté gauche de cet objet multimédia,
puis la page centrale du média positionne l'image au milieu de la description.
Vous pouvez également utiliser le support en haut et en bas
pour aligner l'image en haut et en bas de cette description.
Avec cela, nous complétons cet exercice.
Dans cet exercice, nous avons examiné l'utilisation d'images et d'objets multimédias dans notre page Web.
C' est un bon moment, encore une fois,
pour faire un bon commentaire,
avec le message, les images et les médias.