1
00:00:07,420 --> 00:00:14,980
Let's see how we can use images inside our HTML by using what is called image tag.

2
00:00:15,580 --> 00:00:21,520
Image tag is used to embed images into our HTML document.

3
00:00:21,700 --> 00:00:25,210
And for the images, we have two ways of using it.

4
00:00:25,240 --> 00:00:32,740
One is we can download any image that we want and put it inside our project structure here.

5
00:00:33,610 --> 00:00:37,880
Or we can link the image from a different server.

6
00:00:37,900 --> 00:00:39,920
So let's see the syntax first.

7
00:00:39,940 --> 00:00:42,100
Then I will show you the two ways.

8
00:00:42,280 --> 00:00:46,810
First of all, I'm going to add a comment by saying image tag.

9
00:00:47,230 --> 00:00:51,490
And remember, that image tag is also self-closing tag.

10
00:00:51,490 --> 00:00:53,020
And it goes like this.

11
00:00:54,430 --> 00:00:59,410
And for the image tag we are going to pass in additional attribute.

12
00:00:59,620 --> 00:01:02,140
The first one is called the ERs.

13
00:01:02,180 --> 00:01:05,360
RC meaning the source attribute.

14
00:01:05,379 --> 00:01:11,710
And this one is used to specify the URL of the image that we want to use.

15
00:01:12,160 --> 00:01:16,030
And we bring in equal to a code as that.

16
00:01:16,060 --> 00:01:20,800
So inside here we are going to specify where we can have the image.

17
00:01:20,950 --> 00:01:24,970
So let me show you this website called Pixabay.com.

18
00:01:25,000 --> 00:01:30,820
And over here, we can use free stock lines, these images inside our project.

19
00:01:31,060 --> 00:01:35,230
So for this, we can download any image, for example.

20
00:01:35,260 --> 00:01:37,810
Let me select this.

21
00:01:37,810 --> 00:01:41,230
I like nature, so I would like to use this.

22
00:01:41,470 --> 00:01:48,610
And let's go ahead and download this image by clicking on free download and select the PC.

23
00:01:48,850 --> 00:01:52,750
Let me select the 6040 and download.

24
00:01:53,860 --> 00:02:00,430
And as you can see, it has been downloaded and I'm going to put it inside my project.

25
00:02:00,520 --> 00:02:04,720
So over here, I'm going to create a folder called Images.

26
00:02:05,790 --> 00:02:10,830
And I'm going to drag and drop the image inside that.

27
00:02:11,500 --> 00:02:15,820
And let me rename it to something like Sky.

28
00:02:17,260 --> 00:02:20,320
Now we have the image that we want to use.

29
00:02:20,320 --> 00:02:24,140
So over here we need to locate where the image is.

30
00:02:24,160 --> 00:02:31,710
So we need to go to one up level dot four slash and inside the images.

31
00:02:31,720 --> 00:02:33,520
This way I have the image.

32
00:02:33,520 --> 00:02:36,060
Save it and let's have a look.

33
00:02:36,070 --> 00:02:38,950
And as you can see, this is the image.

34
00:02:39,160 --> 00:02:43,450
But over here for the input and image, they are on the same line.

35
00:02:43,450 --> 00:02:47,110
So I can use the line break to separate them.

36
00:02:47,110 --> 00:02:50,530
So over here I can use the be our.

37
00:02:51,400 --> 00:02:54,220
And yeah, now you have some spacing.

38
00:02:54,250 --> 00:02:57,460
This is one way of using images.

39
00:02:57,490 --> 00:03:00,790
Next step is that we can link the image.

40
00:03:00,790 --> 00:03:07,690
You are here from different server, for example, the view over here, right click and click on copy,

41
00:03:07,690 --> 00:03:10,330
image address and back here.

42
00:03:10,510 --> 00:03:14,080
Remove this one and paste that.

43
00:03:14,410 --> 00:03:16,360
Save it and let's have a look.

44
00:03:16,870 --> 00:03:20,950
As you can see, this is an image from Pixabay.com.

45
00:03:20,980 --> 00:03:21,760
All right.

46
00:03:21,760 --> 00:03:25,660
And we have a couple of attributes that we need to pass in.

47
00:03:25,660 --> 00:03:29,620
But the most required one is the source attribute.

48
00:03:29,830 --> 00:03:36,190
And we also have what is called the alt attribute and inside the tag of the image.

49
00:03:36,930 --> 00:03:39,970
Let me add some space here and provide art.

50
00:03:39,990 --> 00:03:42,000
So what is the art attribute?

51
00:03:42,000 --> 00:03:46,020
This is used to provide alternative text for the image.

52
00:03:46,200 --> 00:03:53,730
And this attribute is also required as it provides a text description of the image for users who are

53
00:03:53,730 --> 00:03:58,890
unable to see it, or for search engines to understand the content of the image.

54
00:03:58,980 --> 00:04:03,150
So inside here we provide more details about the image.

55
00:04:03,330 --> 00:04:05,940
I will say that background image.

56
00:04:07,090 --> 00:04:13,240
So it's important for this one is that, let's say for some reasons, our image couldn't load in that

57
00:04:13,240 --> 00:04:13,510
way.

58
00:04:13,510 --> 00:04:20,589
We are going to see the art attribute that is a value for the art and also it is good for screen readers

59
00:04:20,589 --> 00:04:21,190
also.

60
00:04:21,190 --> 00:04:26,350
So the art attribute and then the source attribute are all required fields.

61
00:04:26,710 --> 00:04:29,820
The next attribute is called the weight attributes.

62
00:04:29,830 --> 00:04:33,880
Let's say that we want to decrease the width of this image.

63
00:04:33,880 --> 00:04:39,740
So over here we provide width and provide a value.

64
00:04:39,760 --> 00:04:45,220
So let's say I want to provide a width of 250 pixels.

65
00:04:46,740 --> 00:04:47,970
Now let's see.

66
00:04:48,000 --> 00:04:51,210
As you can see, this is the width of the image.

67
00:04:51,210 --> 00:04:57,480
So as you move on, we'll be using CSS to control the behavior of the images.

68
00:04:57,810 --> 00:05:05,580
And before ending this video, we have one more type of tag that you can use to insert image, and that

69
00:05:05,580 --> 00:05:07,340
is the picture tag.

70
00:05:07,350 --> 00:05:10,510
And this one is for HTML five.

71
00:05:10,530 --> 00:05:11,460
So here you go.

72
00:05:11,460 --> 00:05:12,900
You provide picture.

73
00:05:14,750 --> 00:05:18,530
And inside here we are going to provide the source.

74
00:05:18,890 --> 00:05:23,200
One cool thing about the picture tag is that it is responsive.

75
00:05:23,210 --> 00:05:26,780
Well, when you get back to CSS, you will talk about responsive design.

76
00:05:27,230 --> 00:05:33,170
Remember that different users will use different devices to access your application.

77
00:05:33,500 --> 00:05:38,400
Some devices screens are big, some are small, for example, mobile users.

78
00:05:38,450 --> 00:05:46,220
So if you provide a fixed width of 250, it means that irrespective of the device the user is using

79
00:05:46,220 --> 00:05:48,050
is going to be 250 pixels.

80
00:05:48,230 --> 00:05:54,680
But let's say that on smaller screens we want to decrease the size of the image something like 50 pixels

81
00:05:54,680 --> 00:05:59,040
and on large screens we are going to use, let's say 100 pixels or percent.

82
00:05:59,060 --> 00:06:01,800
That's where picture comes into play.

83
00:06:01,820 --> 00:06:06,020
So inside here we provide a tag called source.

84
00:06:06,840 --> 00:06:09,180
And this source also is self-closing.

85
00:06:09,210 --> 00:06:09,810
Tag.

86
00:06:09,810 --> 00:06:16,250
And over here you provide the SLC set and then the image you URL.

87
00:06:16,260 --> 00:06:17,700
So I'll copy this one.

88
00:06:18,630 --> 00:06:21,360
And paste it here and that.

89
00:06:22,140 --> 00:06:29,580
And for this we have additional attribute called media, meaning media query arriving about CSS.

90
00:06:29,580 --> 00:06:30,870
You understand this.

91
00:06:31,050 --> 00:06:39,180
So over here we provide this screen and as that and max dash width.

92
00:06:40,450 --> 00:06:43,330
Equal to $600.

93
00:06:43,600 --> 00:06:44,680
What does it mean?

94
00:06:44,710 --> 00:06:53,350
It simply means that if a user is using a device which screen is more than the 600 pixels, then we

95
00:06:53,350 --> 00:06:56,080
can change the width of this image.

96
00:06:56,140 --> 00:07:00,400
With this one, we need to provide a specific image with specific side.

97
00:07:00,430 --> 00:07:02,080
Don't worry, forget about the CSS.

98
00:07:02,080 --> 00:07:08,290
You're going to use CSS to control the behavior of this and I want to copy this same image.

99
00:07:08,800 --> 00:07:13,420
Let me save it to be on one line and I'll paste that.

100
00:07:13,450 --> 00:07:15,520
Save it and let's have a look.

101
00:07:15,670 --> 00:07:22,150
Well, so for this, we can specify the width of this image, but for the meantime, let's maintain

102
00:07:22,150 --> 00:07:22,830
it as it is.

103
00:07:22,840 --> 00:07:26,650
And let's change this one to, let's say.

104
00:07:28,220 --> 00:07:29,540
1086.

105
00:07:29,630 --> 00:07:30,560
So don't worry.

106
00:07:30,560 --> 00:07:34,640
As you move on, that is when you get back to CSS, you better understand media query.

107
00:07:34,640 --> 00:07:39,570
For the meantime, understand how we can use image style to display images.

108
00:07:39,590 --> 00:07:41,060
Let's continue in the next video.