1
00:00:03,250 --> 00:00:07,080
Aucun concepteur de pages Web respectueux de soi,

2
00:00:07,080 --> 00:00:10,990
serait aujourd'hui concevoir des pages Web sans inclure

3
00:00:10,990 --> 00:00:15,665
une certaine forme d'images ou de médias sur leurs sites Web.

4
00:00:15,665 --> 00:00:19,055
Les professeurs d'informatique sont une exception.

5
00:00:19,055 --> 00:00:23,390
À ce stade, vous vous attendez probablement à ce

6
00:00:23,390 --> 00:00:26,270
que je dise ça, mais ce n'est pas ce que je vais dire.

7
00:00:26,270 --> 00:00:29,255
Je vais dire :

8
00:00:29,255 --> 00:00:33,425
« Une photo vaut 12$ sur iStockphoto.com.

9
00:00:33,425 --> 00:00:38,060
Bootstrap fournit un support complet pour inclure

10
00:00:38,060 --> 00:00:42,800
des images et divers types de médias dans vos sites Web et vos pages Web.

11
00:00:42,800 --> 00:00:49,040
La balise HTML image va évidemment être utilisée pour inclure des images dans vos pages Web.

12
00:00:49,040 --> 00:00:55,170
Bootstrap fournit également un tas de classes que vous pouvez appliquer à

13
00:00:55,170 --> 00:01:02,215
la balise image afin d'améliorer encore la façon dont les images sont incluses dans votre page Web.

14
00:01:02,215 --> 00:01:08,535
Ainsi, vous pouvez utiliser une classe d'image appelée img-fluid qui rendra vos images réactives,

15
00:01:08,535 --> 00:01:15,195
ce qui signifie que la taille de l'image s'ajustera automatiquement à différentes tailles d'écran.

16
00:01:15,195 --> 00:01:22,585
Vous pouvez également utiliser une vignette img-qui mettra une bordure blanche autour de votre image.

17
00:01:22,585 --> 00:01:29,480
Vous pouvez également gérer les formes et les tailles des images comme vous le

18
00:01:29,480 --> 00:01:36,635
voyez dans cette image afin que vous puissiez avoir des images pour lesquelles vous créez des coins arrondis,

19
00:01:36,635 --> 00:01:38,995
soit les quatre coins,

20
00:01:38,995 --> 00:01:42,020
soit n'importe quelle paire de coins choisie.

21
00:01:42,020 --> 00:01:45,595
Ainsi, vous pouvez appliquer la classe autour d'elle pour

22
00:01:45,595 --> 00:01:49,450
créer une image avec des coins arrondis ou vous pouvez voir

23
00:01:49,450 --> 00:01:53,130
un trait d'union arrondi en haut à gauche ou à droite pour placer

24
00:01:53,130 --> 00:01:57,905
les coins arrondis dans l'un de ces quatre bords de votre image.

25
00:01:57,905 --> 00:02:02,780
Vous pouvez également appliquer un cercle arrondi pour créer des images circulaires.

26
00:02:02,780 --> 00:02:05,170
Ainsi, lorsque vous visitez des sites Web,

27
00:02:05,170 --> 00:02:10,310
vous verrez déjà des images utilisées de plusieurs façons.

28
00:02:10,310 --> 00:02:16,000
Vous vous souviendrez que nous avons vu le cours de la leçon précédente et l'exercice.

29
00:02:16,000 --> 00:02:21,085
Ici, j'illustre l'utilisation de la classe Card avec une image incluse.

30
00:02:21,085 --> 00:02:27,320
Donc, dans ce cas, nous incluons une image avec l'image de la carte de classe en haut et si vous

31
00:02:27,320 --> 00:02:30,760
incluez assez grande taille l'image que l'image sera incluse

32
00:02:30,760 --> 00:02:35,030
en haut et ensuite enfermée à l'intérieur d'une carte comme celle-ci.

33
00:02:35,030 --> 00:02:36,860
Si l'image est trop petite,

34
00:02:36,860 --> 00:02:41,245
elle peut être positionnée dans un coin de votre carte.

35
00:02:41,245 --> 00:02:47,315
Donc, utilisez une image assez grande pour être en mesure de définir une carte propre comme celle-ci.

36
00:02:47,315 --> 00:02:52,030
Donc, ici, vous verrez l'image décrite avec,

37
00:02:52,030 --> 00:02:56,035
les classes appliquées à cela, y compris l'image de carte supérieure

38
00:02:56,035 --> 00:03:00,510
et img-fluid pour rendre l'image réactive automatiquement.

39
00:03:00,510 --> 00:03:04,470
C' est ainsi que vous pouvez utiliser les images avec la classe Card

40
00:03:04,470 --> 00:03:08,525
pour définir les cartes que vous utilisez sur vos pages Web.

41
00:03:08,525 --> 00:03:16,605
Un autre moyen d'inclure des images et du contenu connexe dans vos pages Web est un objet multimédia.

42
00:03:16,605 --> 00:03:20,740
Un objet multimédia vous permet de spécifier une image que vous pouvez positionner

43
00:03:20,740 --> 00:03:26,225
à gauche ou à droite de la description.

44
00:03:26,225 --> 00:03:29,690
En outre, vous pouvez inclure un corps de média qui

45
00:03:29,690 --> 00:03:32,880
contient la description qui va avec l'image.

46
00:03:32,880 --> 00:03:35,110
Ainsi, comme vous le voyez dans cet exemple ici,

47
00:03:35,110 --> 00:03:41,270
le corps du média lui-même enferme tout contenu formaté en HTML ici.

48
00:03:41,270 --> 00:03:44,820
Donc, ici, j'utilise un h2 et h4 avec

49
00:03:44,820 --> 00:03:49,755
une classe p à l'intérieur du corps du média pour définir le contenu réel.

50
00:03:49,755 --> 00:03:54,240
Nous utiliserons l'objet média dans l'exercice qui suit.

51
00:03:54,240 --> 00:03:57,670
Vous pouvez également faire une intégration réactive du contenu.

52
00:03:57,670 --> 00:04:03,360
Ainsi, par exemple, si vous avez une vidéo que vous voulez inclure dans votre page Web,

53
00:04:03,360 --> 00:04:07,690
vous pouvez utiliser une classe iframe pour encadrer la vidéo,

54
00:04:07,690 --> 00:04:10,760
puis l'entourer dans la div avec les classes

55
00:04:10,760 --> 00:04:16,410
intégrées responsive donnant des tailles afin que vous puissiez 16by9,

56
00:04:16,410 --> 00:04:21,020
4by3 ou vidéo, le contenu à afficher.

57
00:04:21,020 --> 00:04:27,630
Si responsive embed, vous pouvez utiliser les

58
00:04:27,630 --> 00:04:34,450
balises HTML embed ou iframe ou vidéo ou objet, puis l'enfermer dans un div.

59
00:04:34,450 --> 00:04:41,345
Application de la fonction intégrée et aussi avec la fonction intégrée,

60
00:04:41,345 --> 00:04:47,295
en spécifiant les dimensions que vous souhaitez utiliser pour les dimensions 4by3 ou 16by9.

61
00:04:47,295 --> 00:04:53,685
C' est ainsi que vous pouvez également inclure du contenu vidéo dans vos pages Web.

62
00:04:53,685 --> 00:04:57,570
Maintenant que nous avons vu le soutien des images et des médias,

63
00:04:57,570 --> 00:05:02,230
il est temps de passer à un exercice où nous allons examiner comment nous pouvons inclure

64
00:05:02,230 --> 00:05:07,310
des images dans la page Web ou le site Web sur lequel nous avons travaillé.

65
00:05:07,310 --> 00:05:11,345
Nous apporterons quelques modifications à la page index.html en

66
00:05:11,345 --> 00:05:17,200
incluant des images et du contenu à l'aide de l'objet multimédia.