1
00:00:03,780 --> 00:00:07,090
Time to move onto the next exercise.

2
00:00:07,090 --> 00:00:10,005
In this exercise, we're going to deal with images,

3
00:00:10,005 --> 00:00:13,660
how do we include images in our web pages,

4
00:00:13,660 --> 00:00:21,030
and how we can make use of the media object in our web page.

5
00:00:21,040 --> 00:00:23,240
As the first step,

6
00:00:23,240 --> 00:00:27,890
go to your exercise instructions and download image.zip file,

7
00:00:27,890 --> 00:00:34,550
and then save it to your confusion folder.

8
00:00:35,890 --> 00:00:42,360
And then unzip the file to obtain a folder named, img,

9
00:00:42,360 --> 00:00:44,210
and inside that you will find

10
00:00:44,210 --> 00:00:49,175
a few images that we are going to make use of in this exercise.

11
00:00:49,175 --> 00:00:53,115
All the images are in png format in that folder.

12
00:00:53,115 --> 00:00:58,785
We are now going to work to add some images to the page.

13
00:00:58,785 --> 00:01:02,310
First, let's add in the logo for our restaurant.

14
00:01:02,310 --> 00:01:06,360
So, going to the index.html page, in the Jumbotron,

15
00:01:06,360 --> 00:01:11,130
you'll see the second div here got the col-sm.

16
00:01:11,130 --> 00:01:17,295
So, we you're going to fix that up by adding to this div,

17
00:01:17,295 --> 00:01:24,030
and align self center to this div.

18
00:01:24,030 --> 00:01:26,620
Now, to this div,

19
00:01:26,620 --> 00:01:28,515
we're going to add in an image.

20
00:01:28,515 --> 00:01:33,790
So, let me use the image with the source, img.

21
00:01:33,790 --> 00:01:40,710
We have already put the image folder containing the images into our project.

22
00:01:40,710 --> 00:01:49,150
So, from there, I will add the logo.png file as the image here.

23
00:01:49,150 --> 00:01:58,140
In addition, I'm going to add the class as image fluid,

24
00:01:58,140 --> 00:02:06,410
so that this image will automatically be responsive and adapt to the screen size.

25
00:02:07,160 --> 00:02:09,634
Let's save the changes.

26
00:02:09,634 --> 00:02:14,810
We're going to apply the same change to both aboutus.html page,

27
00:02:14,810 --> 00:02:19,855
and also the contactus.html page in the Jumbotron.

28
00:02:19,855 --> 00:02:23,350
Now, when you take a closer look at your web page,

29
00:02:23,350 --> 00:02:26,350
you'll find that in the Jumbotron,

30
00:02:26,350 --> 00:02:29,210
right after this wordings,

31
00:02:29,210 --> 00:02:34,120
you will see the image for our restaurant inserted in there.

32
00:02:34,120 --> 00:02:36,905
Next, we'll go into the navbar,

33
00:02:36,905 --> 00:02:41,750
and then where we have this for the navbar brand,

34
00:02:41,750 --> 00:02:47,915
I'm going to replace these words for the restaurant with the corresponding logo.

35
00:02:47,915 --> 00:02:57,650
So, these words I'm going to replace that with img,

36
00:02:57,650 --> 00:03:03,280
and source is logo.png.

37
00:03:03,280 --> 00:03:13,750
In addition, I'm going to specify a height attribute of 30,

38
00:03:14,310 --> 00:03:20,950
and a width attribute of 41 to this logo.

39
00:03:20,950 --> 00:03:28,530
This size is apt for the navbar brand there.

40
00:03:28,530 --> 00:03:30,330
So, let's save the changes.

41
00:03:30,330 --> 00:03:35,895
I'm going to go and make the same change in the aboutus.html page,

42
00:03:35,895 --> 00:03:39,745
and also the contactus.html page.

43
00:03:39,745 --> 00:03:41,790
Taking a look at the web page now,

44
00:03:41,790 --> 00:03:44,900
you'll see the restaurant's name has now been replaced

45
00:03:44,900 --> 00:03:49,835
with the restaurant's logo in small size there.

46
00:03:49,835 --> 00:03:53,280
You now see that when you navigate to the About page,

47
00:03:53,280 --> 00:03:56,720
you will see the image being included there,

48
00:03:56,720 --> 00:03:59,700
and similarly on the Contact page,

49
00:03:59,700 --> 00:04:04,995
you will see that the image has been updated going back to the main page.

50
00:04:04,995 --> 00:04:07,080
Now, what we're going to do,

51
00:04:07,080 --> 00:04:13,980
is to use a media object in place of these descriptions that we have here,

52
00:04:13,980 --> 00:04:19,095
and then use the media object to replace

53
00:04:19,095 --> 00:04:25,370
these with the description and also an image to be included.

54
00:04:25,370 --> 00:04:29,890
That gives a better view of our web page.

55
00:04:29,890 --> 00:04:32,725
So, let's go ahead and make that change.

56
00:04:32,725 --> 00:04:37,695
To make use of the media object in our index.html page,

57
00:04:37,695 --> 00:04:40,555
we will go to the first row of content here.

58
00:04:40,555 --> 00:04:44,930
And then right there in the second div,

59
00:04:44,930 --> 00:04:51,380
I'm going to introduce a new dev with the class media,

60
00:04:51,380 --> 00:04:57,500
and enclose the content inside this div there,

61
00:04:57,500 --> 00:05:01,245
closing off the div.

62
00:05:01,245 --> 00:05:04,940
Now, inside this div,

63
00:05:04,940 --> 00:05:10,820
I'm going to introduce an image to be used there.

64
00:05:10,820 --> 00:05:14,840
Here I go in and say image class,

65
00:05:14,840 --> 00:05:20,120
and in order to use an image in a media object,

66
00:05:20,120 --> 00:05:26,820
we need to apply some additional flex related classes here,

67
00:05:26,820 --> 00:05:31,545
so I apply the d-flex, and then mr-3.

68
00:05:31,545 --> 00:05:40,035
So, M meaning margin right with number 3.

69
00:05:40,035 --> 00:05:43,625
That gives sufficient margin to the right of this image,

70
00:05:43,625 --> 00:05:53,205
so that the description is slightly set apart from the image in the web page.

71
00:05:53,205 --> 00:05:59,370
And then I will use image thumbnail for this image,

72
00:05:59,370 --> 00:06:08,650
and then also use align-self-center for the image,

73
00:06:08,650 --> 00:06:16,350
and then type in the source of the image, which is img,

74
00:06:16,350 --> 00:06:23,570
and you can look

75
00:06:23,570 --> 00:06:30,680
up the image name in the img folder,

76
00:06:30,680 --> 00:06:34,340
and let me give it an alternative there,

77
00:06:36,240 --> 00:06:39,005
and close off the image.

78
00:06:39,005 --> 00:06:43,465
This will now include the image into my midi object.

79
00:06:43,465 --> 00:06:49,830
In addition, I'm going to create the media body for this image by

80
00:06:49,830 --> 00:06:56,840
saying div class media body,

81
00:06:56,840 --> 00:07:06,055
and then enclosed this h2 and p that contains the description inside this div there.

82
00:07:06,055 --> 00:07:10,365
So, let me indent the content there,

83
00:07:10,365 --> 00:07:16,395
and then close off that div here.

84
00:07:16,395 --> 00:07:23,395
With that, my description is enclosed inside the media body.

85
00:07:23,395 --> 00:07:25,430
In addition to this h2,

86
00:07:25,430 --> 00:07:30,955
I'm going to introduce a class as mt-0.

87
00:07:30,955 --> 00:07:37,785
With this, this class says margin top zero.

88
00:07:37,785 --> 00:07:44,940
This title will be aligned to the top of this particular media object here.

89
00:07:44,940 --> 00:07:48,120
With these changes, let's save the changes and

90
00:07:48,120 --> 00:07:51,705
then go and take a quick look at our web page.

91
00:07:51,705 --> 00:07:53,930
Going to our web page,

92
00:07:53,930 --> 00:07:56,980
you will immediately notice the change in the web page.

93
00:07:56,980 --> 00:08:00,115
You can now see that there is an image position here,

94
00:08:00,115 --> 00:08:03,650
and then the description

95
00:08:03,650 --> 00:08:08,375
that was earlier in that location has been properly positioned here.

96
00:08:08,375 --> 00:08:13,280
Contrast this with the remaining two rows,

97
00:08:13,280 --> 00:08:17,290
and you now begin to see how the media object helps us

98
00:08:17,290 --> 00:08:23,545
to transform that into something more vibrant.

99
00:08:23,545 --> 00:08:30,270
I'm going to do the same thing to the third row here.

100
00:08:30,270 --> 00:08:38,155
The second row will be left as an exercise for you in the assignment.

101
00:08:38,155 --> 00:08:40,680
Going to that third drill,

102
00:08:40,680 --> 00:08:48,730
I'm going to apply a similar change to this third row to introduce the media object here.

103
00:08:48,730 --> 00:08:51,595
Let me introduce the media object there,

104
00:08:51,595 --> 00:08:54,240
and then to this div,

105
00:08:54,240 --> 00:08:57,115
go into the media object,

106
00:08:57,115 --> 00:09:01,290
and then introduce the image that I'm going to use here.

107
00:09:01,290 --> 00:09:05,410
I use the class as d-flex mr-3.

108
00:09:05,410 --> 00:09:08,830
If you are positioning the image to the right side,

109
00:09:08,830 --> 00:09:14,060
then you need to give a margin as ml-3 for it.

110
00:09:14,060 --> 00:09:20,560
In addition, I'm going to add in the image thumbnail class to this,

111
00:09:20,560 --> 00:09:26,005
and then also say, align-self-center.

112
00:09:26,005 --> 00:09:31,010
These are the classes that I'm going to add to this image.

113
00:09:31,010 --> 00:09:35,670
And then, let's specify the source of this image,

114
00:09:35,760 --> 00:09:46,880
img and alberto.png, and then I'll specify the alternative.

115
00:09:52,060 --> 00:09:57,400
And after this, this h2 and h4 and the p,

116
00:09:57,400 --> 00:10:07,140
I'm going to close them inside a media-body div here,

117
00:10:07,760 --> 00:10:11,845
closing off the media body div.

118
00:10:11,845 --> 00:10:17,845
We now have completed the media object in the third row.

119
00:10:17,845 --> 00:10:19,230
Let's save the changes,

120
00:10:19,230 --> 00:10:22,700
and then go and take a look at our web page next.

121
00:10:22,700 --> 00:10:25,480
Now, taking a look at our web page,

122
00:10:25,480 --> 00:10:30,685
you'll notice that we have the dish description there.

123
00:10:30,685 --> 00:10:32,760
Now, if you move to the third row,

124
00:10:32,760 --> 00:10:37,705
you now see how the third row has also been redefined.

125
00:10:37,705 --> 00:10:40,425
Note the use of the media left,

126
00:10:40,425 --> 00:10:45,210
meaning that the image is positioned to the left side in this media object,

127
00:10:45,210 --> 00:10:52,230
and then media middle page positions the image in the middle of the description.

128
00:10:52,230 --> 00:10:55,760
You can also use media top and media bottom,

129
00:10:55,760 --> 00:11:01,970
to align the image to the top and the bottom of this description.

130
00:11:01,970 --> 00:11:05,185
With this, we complete this exercise.

131
00:11:05,185 --> 00:11:12,970
In this exercise, we looked at the use of images and media object in our web page.

132
00:11:12,970 --> 00:11:14,535
This is a good time, again,

133
00:11:14,535 --> 00:11:16,365
to do a good comment,

134
00:11:16,365 --> 00:11:19,960
with the message, images and media.