1
00:00:03,780 --> 00:00:07,090
Đến lúc chuyển sang bài tập tiếp theo.

2
00:00:07,090 --> 00:00:10,005
Trong bài tập này, chúng ta sẽ đối phó với hình ảnh,

3
00:00:10,005 --> 00:00:13,660
làm thế nào để chúng ta bao gồm hình ảnh trong các trang web của chúng tôi,

4
00:00:13,660 --> 00:00:21,030
và làm thế nào chúng ta có thể sử dụng các đối tượng phương tiện trong trang web của chúng tôi.

5
00:00:21,040 --> 00:00:23,240
Là bước đầu tiên,

6
00:00:23,240 --> 00:00:27,890
đi đến hướng dẫn tập thể dục của bạn và tải xuống tệp image.zip,

7
00:00:27,890 --> 00:00:34,550
và sau đó lưu nó vào thư mục nhầm lẫn của bạn.

8
00:00:35,890 --> 00:00:42,360
Và sau đó giải nén các tập tin để có được một thư mục tên, img,

9
00:00:42,360 --> 00:00:44,210
và bên trong mà bạn sẽ tìm thấy

10
00:00:44,210 --> 00:00:49,175
một vài hình ảnh mà chúng tôi sẽ sử dụng trong bài tập này.

11
00:00:49,175 --> 00:00:53,115
Tất cả các hình ảnh đều ở định dạng png trong thư mục đó.

12
00:00:53,115 --> 00:00:58,785
Bây giờ chúng ta sẽ làm việc để thêm một số hình ảnh vào trang.

13
00:00:58,785 --> 00:01:02,310
Trước tiên, chúng ta hãy thêm vào logo cho nhà hàng của chúng tôi.

14
00:01:02,310 --> 00:01:06,360
Vì vậy, đi đến trang index.html, trong Jumbotron,

15
00:01:06,360 --> 00:01:11,130
bạn sẽ thấy div thứ hai ở đây có col-sm.

16
00:01:11,130 --> 00:01:17,295
Vì vậy, chúng tôi bạn sẽ sửa chữa điều đó lên bằng cách thêm vào div này,

17
00:01:17,295 --> 00:01:24,030
và sắp xếp tự trung tâm để div này.

18
00:01:24,030 --> 00:01:26,620
Bây giờ, để div này,

19
00:01:26,620 --> 00:01:28,515
chúng ta sẽ thêm vào một hình ảnh.

20
00:01:28,515 --> 00:01:33,790
Vì vậy, để tôi sử dụng hình ảnh với nguồn, img.

21
00:01:33,790 --> 00:01:40,710
Chúng tôi đã đặt thư mục hình ảnh chứa các hình ảnh vào dự án của chúng tôi.

22
00:01:40,710 --> 00:01:49,150
Vì vậy, từ đó, tôi sẽ thêm các tập tin logo.png làm hình ảnh ở đây.

23
00:01:49,150 --> 00:01:58,140
Ngoài ra, tôi sẽ thêm lớp làm chất lỏng hình ảnh,

24
00:01:58,140 --> 00:02:06,410
để hình ảnh này sẽ tự động được đáp ứng và thích ứng với kích thước màn hình.

25
00:02:07,160 --> 00:02:09,634
Hãy lưu các thay đổi.

26
00:02:09,634 --> 00:02:14,810
Chúng tôi sẽ áp dụng cùng một thay đổi cho cả hai trang aboutus.html,

27
00:02:14,810 --> 00:02:19,855
và cũng là trang contactus.html trong Jumbotron.

28
00:02:19,855 --> 00:02:23,350
Bây giờ, khi bạn xem xét kỹ hơn trang web của bạn,

29
00:02:23,350 --> 00:02:26,350
bạn sẽ thấy rằng trong Jumbotron,

30
00:02:26,350 --> 00:02:29,210
ngay sau những từ này,

31
00:02:29,210 --> 00:02:34,120
bạn sẽ thấy hình ảnh cho nhà hàng của chúng tôi được chèn vào đó.

32
00:02:34,120 --> 00:02:36,905
Tiếp theo, chúng ta sẽ đi vào navbar,

33
00:02:36,905 --> 00:02:41,750
và sau đó nơi chúng ta có điều này cho thương hiệu navbar,

34
00:02:41,750 --> 00:02:47,915
tôi sẽ thay thế những từ này cho nhà hàng với logo tương ứng.

35
00:02:47,915 --> 00:02:57,650
Vì vậy, những từ này tôi sẽ thay thế mà với img,

36
00:02:57,650 --> 00:03:03,280
và nguồn là logo.png.

37
00:03:03,280 --> 00:03:13,750
Ngoài ra, tôi sẽ chỉ định một thuộc tính chiều cao của 30,

38
00:03:14,310 --> 00:03:20,950
và một thuộc tính chiều rộng của 41 cho logo này.

39
00:03:20,950 --> 00:03:28,530
Kích thước này là apt cho thương hiệu navbar ở đó.

40
00:03:28,530 --> 00:03:30,330
Vì vậy, chúng ta hãy lưu các thay đổi.

41
00:03:30,330 --> 00:03:35,895
Tôi sẽ đi và thực hiện thay đổi tương tự trong trang aboutus.html,

42
00:03:35,895 --> 00:03:39,745
và cũng là trang contactus.html.

43
00:03:39,745 --> 00:03:41,790
Nhìn vào trang web bây giờ,

44
00:03:41,790 --> 00:03:44,900
bạn sẽ thấy tên của nhà hàng bây giờ đã được thay thế bằng

45
00:03:44,900 --> 00:03:49,835
logo của nhà hàng với kích thước nhỏ ở đó.

46
00:03:49,835 --> 00:03:53,280
Bây giờ bạn thấy rằng khi bạn điều hướng đến trang Giới thiệu,

47
00:03:53,280 --> 00:03:56,720
bạn sẽ thấy hình ảnh được bao gồm ở đó,

48
00:03:56,720 --> 00:03:59,700
và tương tự trên trang Liên hệ,

49
00:03:59,700 --> 00:04:04,995
bạn sẽ thấy rằng hình ảnh đã được cập nhật trở lại trang chính.

50
00:04:04,995 --> 00:04:07,080
Bây giờ, những gì chúng ta sẽ làm,

51
00:04:07,080 --> 00:04:13,980
là sử dụng một đối tượng truyền thông thay cho những mô tả mà chúng ta có ở đây,

52
00:04:13,980 --> 00:04:19,095
và sau đó sử dụng đối tượng truyền thông để thay thế chúng

53
00:04:19,095 --> 00:04:25,370
bằng mô tả và cũng là một hình ảnh được đưa vào.

54
00:04:25,370 --> 00:04:29,890
Điều đó cung cấp cho một cái nhìn tốt hơn về trang web của chúng tôi.

55
00:04:29,890 --> 00:04:32,725
Vì vậy, chúng ta hãy tiếp tục và thực hiện sự thay đổi đó.

56
00:04:32,725 --> 00:04:37,695
Để sử dụng đối tượng phương tiện truyền thông trong trang index.html của chúng

57
00:04:37,695 --> 00:04:40,555
tôi, chúng tôi sẽ đi đến hàng đầu tiên của nội dung ở đây.

58
00:04:40,555 --> 00:04:44,930
Và sau đó ngay ở đó trong div thứ hai,

59
00:04:44,930 --> 00:04:51,380
Tôi sẽ giới thiệu một dev mới với các phương tiện truyền thông lớp học,

60
00:04:51,380 --> 00:04:57,500
và kèm theo nội dung bên trong div này có,

61
00:04:57,500 --> 00:05:01,245
đóng cửa div.

62
00:05:01,245 --> 00:05:04,940
Bây giờ, bên trong div này,

63
00:05:04,940 --> 00:05:10,820
tôi sẽ giới thiệu một hình ảnh được sử dụng ở đó.

64
00:05:10,820 --> 00:05:14,840
Ở đây tôi đi vào và nói lớp hình ảnh,

65
00:05:14,840 --> 00:05:20,120
và để sử dụng một hình ảnh trong một đối tượng phương tiện truyền thông,

66
00:05:20,120 --> 00:05:26,820
chúng ta cần phải áp dụng một số lớp liên quan đến flex bổ sung ở đây,

67
00:05:26,820 --> 00:05:31,545
vì vậy tôi áp dụng d-flex, và sau đó mr-3.

68
00:05:31,545 --> 00:05:40,035
Vì vậy, M có nghĩa là lề phải với số 3. Điều

69
00:05:40,035 --> 00:05:43,625
đó cho phép đủ lề bên phải của hình ảnh này,

70
00:05:43,625 --> 00:05:53,205
do đó mô tả được thiết lập một chút ngoài hình ảnh trong trang web.

71
00:05:53,205 --> 00:05:59,370
Và sau đó tôi sẽ sử dụng hình thu nhỏ hình ảnh cho hình ảnh này,

72
00:05:59,370 --> 00:06:08,650
và sau đó cũng sử dụng align-self-center cho hình ảnh,

73
00:06:08,650 --> 00:06:16,350
và sau đó gõ vào nguồn của hình ảnh, đó là img,

74
00:06:16,350 --> 00:06:23,570
và bạn có thể tra cứu

75
00:06:23,570 --> 00:06:30,680
tên hình ảnh trong thư mục img,

76
00:06:30,680 --> 00:06:34,340
và để tôi cho nó một thay thế ở đó,

77
00:06:36,240 --> 00:06:39,005
và đóng hình ảnh.

78
00:06:39,005 --> 00:06:43,465
Điều này bây giờ sẽ bao gồm hình ảnh vào đối tượng midi của tôi.

79
00:06:43,465 --> 00:06:49,830
Bên cạnh đó, tôi sẽ tạo ra cơ thể phương tiện truyền thông cho hình ảnh này bằng cách

80
00:06:49,830 --> 00:06:56,840
nói cơ thể phương tiện truyền thông div lớp,

81
00:06:56,840 --> 00:07:06,055
và sau đó kèm theo h2 này và p có chứa mô tả bên trong div này có.

82
00:07:06,055 --> 00:07:10,365
Vì vậy, hãy để tôi thụt lề nội dung ở đó,

83
00:07:10,365 --> 00:07:16,395
và sau đó đóng div đó ở đây.

84
00:07:16,395 --> 00:07:23,395
Với điều đó, mô tả của tôi được đính kèm bên trong cơ thể truyền thông.

85
00:07:23,395 --> 00:07:25,430
Ngoài h2 này,

86
00:07:25,430 --> 00:07:30,955
tôi sẽ giới thiệu một lớp như mt-0.

87
00:07:30,955 --> 00:07:37,785
Với điều này, lớp này nói margin top zero.

88
00:07:37,785 --> 00:07:44,940
Tiêu đề này sẽ được căn chỉnh trên cùng của đối tượng phương tiện truyền thông cụ thể này ở đây.

89
00:07:44,940 --> 00:07:48,120
Với những thay đổi này, chúng ta hãy lưu các thay đổi

90
00:07:48,120 --> 00:07:51,705
và sau đó đi và xem nhanh trang web của chúng tôi.

91
00:07:51,705 --> 00:07:53,930
Đi đến trang web của chúng tôi,

92
00:07:53,930 --> 00:07:56,980
bạn sẽ ngay lập tức nhận thấy sự thay đổi trong trang web.

93
00:07:56,980 --> 00:08:00,115
Bây giờ bạn có thể thấy rằng có một vị trí hình ảnh ở đây,

94
00:08:00,115 --> 00:08:03,650
và sau đó mô tả

95
00:08:03,650 --> 00:08:08,375
trước đó ở vị trí đó đã được đặt đúng vị trí ở đây.

96
00:08:08,375 --> 00:08:13,280
Ngược lại điều này với hai hàng còn lại,

97
00:08:13,280 --> 00:08:17,290
và bây giờ bạn bắt đầu thấy cách đối tượng truyền thông giúp chúng ta

98
00:08:17,290 --> 00:08:23,545
chuyển đổi nó thành một thứ gì đó sôi động hơn.

99
00:08:23,545 --> 00:08:30,270
Tôi sẽ làm điều tương tự với hàng thứ ba ở đây.

100
00:08:30,270 --> 00:08:38,155
Hàng thứ hai sẽ được để lại như một bài tập cho bạn trong bài tập.

101
00:08:38,155 --> 00:08:40,680
Đi đến khoan thứ ba đó,

102
00:08:40,680 --> 00:08:48,730
tôi sẽ áp dụng một thay đổi tương tự cho hàng thứ ba này để giới thiệu các đối tượng phương tiện ở đây.

103
00:08:48,730 --> 00:08:51,595
Hãy để tôi giới thiệu các đối tượng phương tiện truyền thông ở

104
00:08:51,595 --> 00:08:54,240
đó, và sau đó để div này,

105
00:08:54,240 --> 00:08:57,115
đi vào đối tượng phương tiện truyền thông,

106
00:08:57,115 --> 00:09:01,290
và sau đó giới thiệu hình ảnh mà tôi sẽ sử dụng ở đây.

107
00:09:01,290 --> 00:09:05,410
Tôi sử dụng các lớp như d-flex mr-3.

108
00:09:05,410 --> 00:09:08,830
Nếu bạn đang định vị hình ảnh ở phía bên phải,

109
00:09:08,830 --> 00:09:14,060
sau đó bạn cần phải cung cấp cho một lề như ml-3 cho nó.

110
00:09:14,060 --> 00:09:20,560
Ngoài ra, tôi sẽ thêm vào lớp hình thu nhỏ hình ảnh này,

111
00:09:20,560 --> 00:09:26,005
và sau đó cũng nói, align-self-center.

112
00:09:26,005 --> 00:09:31,010
Đây là những lớp học mà tôi sẽ thêm vào hình ảnh này.

113
00:09:31,010 --> 00:09:35,670
Và sau đó, chúng ta hãy chỉ định nguồn gốc của hình ảnh này,

114
00:09:35,760 --> 00:09:46,880
img và alberto.png, và sau đó tôi sẽ chỉ định thay thế.

115
00:09:52,060 --> 00:09:57,400
Và sau này, h2 này và h4 và p,

116
00:09:57,400 --> 00:10:07,140
Tôi sẽ đóng chúng bên trong một div phương tiện truyền thông cơ thể ở đây,

117
00:10:07,760 --> 00:10:11,845
đóng cửa div cơ thể phương tiện truyền thông.

118
00:10:11,845 --> 00:10:17,845
Bây giờ chúng tôi đã hoàn thành đối tượng phương tiện truyền thông ở hàng thứ ba.

119
00:10:17,845 --> 00:10:19,230
Hãy lưu các thay đổi,

120
00:10:19,230 --> 00:10:22,700
và sau đó đi và xem trang web của chúng tôi tiếp theo.

121
00:10:22,700 --> 00:10:25,480
Bây giờ, hãy nhìn vào trang web của chúng tôi,

122
00:10:25,480 --> 00:10:30,685
bạn sẽ nhận thấy rằng chúng tôi có mô tả món ăn ở đó.

123
00:10:30,685 --> 00:10:32,760
Bây giờ, nếu bạn di chuyển đến hàng thứ ba,

124
00:10:32,760 --> 00:10:37,705
bây giờ bạn thấy hàng thứ ba cũng đã được định nghĩa lại như thế nào.

125
00:10:37,705 --> 00:10:40,425
Lưu ý việc sử dụng các phương tiện bên trái,

126
00:10:40,425 --> 00:10:45,210
có nghĩa là hình ảnh được đặt ở phía bên trái trong đối tượng phương tiện này,

127
00:10:45,210 --> 00:10:52,230
và sau đó phương tiện trung trang định vị hình ảnh ở giữa mô tả.

128
00:10:52,230 --> 00:10:55,760
Bạn cũng có thể sử dụng phương tiện truyền thông trên cùng và phương tiện truyền thông dưới cùng,

129
00:10:55,760 --> 00:11:01,970
để căn chỉnh hình ảnh trên cùng và dưới cùng của mô tả này.

130
00:11:01,970 --> 00:11:05,185
Với điều này, chúng tôi hoàn thành bài tập này.

131
00:11:05,185 --> 00:11:12,970
Trong bài tập này, chúng tôi đã xem xét việc sử dụng hình ảnh và đối tượng phương tiện trong trang web của chúng tôi.

132
00:11:12,970 --> 00:11:14,535
Đây là thời điểm tốt, một lần nữa,

133
00:11:14,535 --> 00:11:16,365
để làm một bình luận tốt,

134
00:11:16,365 --> 00:11:19,960
với thông điệp, hình ảnh và phương tiện truyền thông.