Aucun concepteur de pages Web respectueux de soi,
serait aujourd'hui concevoir des pages Web sans inclure
une certaine forme d'images ou de médias sur leurs sites Web.
Les professeurs d'informatique sont une exception.
À ce stade, vous vous attendez probablement à ce
que je dise ça, mais ce n'est pas ce que je vais dire.
Je vais dire :
« Une photo vaut 12$ sur iStockphoto.com.
Bootstrap fournit un support complet pour inclure
des images et divers types de médias dans vos sites Web et vos pages Web.
La balise HTML image va évidemment être utilisée pour inclure des images dans vos pages Web.
Bootstrap fournit également un tas de classes que vous pouvez appliquer à
la balise image afin d'améliorer encore la façon dont les images sont incluses dans votre page Web.
Ainsi, vous pouvez utiliser une classe d'image appelée img-fluid qui rendra vos images réactives,
ce qui signifie que la taille de l'image s'ajustera automatiquement à différentes tailles d'écran.
Vous pouvez également utiliser une vignette img-qui mettra une bordure blanche autour de votre image.
Vous pouvez également gérer les formes et les tailles des images comme vous le
voyez dans cette image afin que vous puissiez avoir des images pour lesquelles vous créez des coins arrondis,
soit les quatre coins,
soit n'importe quelle paire de coins choisie.
Ainsi, vous pouvez appliquer la classe autour d'elle pour
créer une image avec des coins arrondis ou vous pouvez voir
un trait d'union arrondi en haut à gauche ou à droite pour placer
les coins arrondis dans l'un de ces quatre bords de votre image.
Vous pouvez également appliquer un cercle arrondi pour créer des images circulaires.
Ainsi, lorsque vous visitez des sites Web,
vous verrez déjà des images utilisées de plusieurs façons.
Vous vous souviendrez que nous avons vu le cours de la leçon précédente et l'exercice.
Ici, j'illustre l'utilisation de la classe Card avec une image incluse.
Donc, dans ce cas, nous incluons une image avec l'image de la carte de classe en haut et si vous
incluez assez grande taille l'image que l'image sera incluse
en haut et ensuite enfermée à l'intérieur d'une carte comme celle-ci.
Si l'image est trop petite,
elle peut être positionnée dans un coin de votre carte.
Donc, utilisez une image assez grande pour être en mesure de définir une carte propre comme celle-ci.
Donc, ici, vous verrez l'image décrite avec,
les classes appliquées à cela, y compris l'image de carte supérieure
et img-fluid pour rendre l'image réactive automatiquement.
C' est ainsi que vous pouvez utiliser les images avec la classe Card
pour définir les cartes que vous utilisez sur vos pages Web.
Un autre moyen d'inclure des images et du contenu connexe dans vos pages Web est un objet multimédia.
Un objet multimédia vous permet de spécifier une image que vous pouvez positionner
à gauche ou à droite de la description.
En outre, vous pouvez inclure un corps de média qui
contient la description qui va avec l'image.
Ainsi, comme vous le voyez dans cet exemple ici,
le corps du média lui-même enferme tout contenu formaté en HTML ici.
Donc, ici, j'utilise un h2 et h4 avec
une classe p à l'intérieur du corps du média pour définir le contenu réel.
Nous utiliserons l'objet média dans l'exercice qui suit.
Vous pouvez également faire une intégration réactive du contenu.
Ainsi, par exemple, si vous avez une vidéo que vous voulez inclure dans votre page Web,
vous pouvez utiliser une classe iframe pour encadrer la vidéo,
puis l'entourer dans la div avec les classes
intégrées responsive donnant des tailles afin que vous puissiez 16by9,
4by3 ou vidéo, le contenu à afficher.
Si responsive embed, vous pouvez utiliser les
balises HTML embed ou iframe ou vidéo ou objet, puis l'enfermer dans un div.
Application de la fonction intégrée et aussi avec la fonction intégrée,
en spécifiant les dimensions que vous souhaitez utiliser pour les dimensions 4by3 ou 16by9.
C' est ainsi que vous pouvez également inclure du contenu vidéo dans vos pages Web.
Maintenant que nous avons vu le soutien des images et des médias,
il est temps de passer à un exercice où nous allons examiner comment nous pouvons inclure
des images dans la page Web ou le site Web sur lequel nous avons travaillé.
Nous apporterons quelques modifications à la page index.html en
incluant des images et du contenu à l'aide de l'objet multimédia.