Let's see how we can use images inside our HTML by using what is called image tag.
Image tag is used to embed images into our HTML document.
And for the images, we have two ways of using it.
One is we can download any image that we want and put it inside our project structure here.
Or we can link the image from a different server.
So let's see the syntax first.
Then I will show you the two ways.
First of all, I'm going to add a comment by saying image tag.
And remember, that image tag is also self-closing tag.
And it goes like this.
And for the image tag we are going to pass in additional attribute.
The first one is called the ERs.
RC meaning the source attribute.
And this one is used to specify the URL of the image that we want to use.
And we bring in equal to a code as that.
So inside here we are going to specify where we can have the image.
So let me show you this website called Pixabay.com.
And over here, we can use free stock lines, these images inside our project.
So for this, we can download any image, for example.
Let me select this.
I like nature, so I would like to use this.
And let's go ahead and download this image by clicking on free download and select the PC.
Let me select the 6040 and download.
And as you can see, it has been downloaded and I'm going to put it inside my project.
So over here, I'm going to create a folder called Images.
And I'm going to drag and drop the image inside that.
And let me rename it to something like Sky.
Now we have the image that we want to use.
So over here we need to locate where the image is.
So we need to go to one up level dot four slash and inside the images.
This way I have the image.
Save it and let's have a look.
And as you can see, this is the image.
But over here for the input and image, they are on the same line.
So I can use the line break to separate them.
So over here I can use the be our.
And yeah, now you have some spacing.
This is one way of using images.
Next step is that we can link the image.
You are here from different server, for example, the view over here, right click and click on copy,
image address and back here.
Remove this one and paste that.
Save it and let's have a look.
As you can see, this is an image from Pixabay.com.
All right.
And we have a couple of attributes that we need to pass in.
But the most required one is the source attribute.
And we also have what is called the alt attribute and inside the tag of the image.
Let me add some space here and provide art.
So what is the art attribute?
This is used to provide alternative text for the image.
And this attribute is also required as it provides a text description of the image for users who are
unable to see it, or for search engines to understand the content of the image.
So inside here we provide more details about the image.
I will say that background image.
So it's important for this one is that, let's say for some reasons, our image couldn't load in that
way.
We are going to see the art attribute that is a value for the art and also it is good for screen readers
also.
So the art attribute and then the source attribute are all required fields.
The next attribute is called the weight attributes.
Let's say that we want to decrease the width of this image.
So over here we provide width and provide a value.
So let's say I want to provide a width of 250 pixels.
Now let's see.
As you can see, this is the width of the image.
So as you move on, we'll be using CSS to control the behavior of the images.
And before ending this video, we have one more type of tag that you can use to insert image, and that
is the picture tag.
And this one is for HTML five.
So here you go.
You provide picture.
And inside here we are going to provide the source.
One cool thing about the picture tag is that it is responsive.
Well, when you get back to CSS, you will talk about responsive design.
Remember that different users will use different devices to access your application.
Some devices screens are big, some are small, for example, mobile users.
So if you provide a fixed width of 250, it means that irrespective of the device the user is using
is going to be 250 pixels.
But let's say that on smaller screens we want to decrease the size of the image something like 50 pixels
and on large screens we are going to use, let's say 100 pixels or percent.
That's where picture comes into play.
So inside here we provide a tag called source.
And this source also is self-closing.
Tag.
And over here you provide the SLC set and then the image you URL.
So I'll copy this one.
And paste it here and that.
And for this we have additional attribute called media, meaning media query arriving about CSS.
You understand this.
So over here we provide this screen and as that and max dash width.
Equal to $600.
What does it mean?
It simply means that if a user is using a device which screen is more than the 600 pixels, then we
can change the width of this image.
With this one, we need to provide a specific image with specific side.
Don't worry, forget about the CSS.
You're going to use CSS to control the behavior of this and I want to copy this same image.
Let me save it to be on one line and I'll paste that.
Save it and let's have a look.
Well, so for this, we can specify the width of this image, but for the meantime, let's maintain
it as it is.
And let's change this one to, let's say.
1086.
So don't worry.
As you move on, that is when you get back to CSS, you better understand media query.
For the meantime, understand how we can use image style to display images.
Let's continue in the next video.