How to insert images in HTML ? Learn in just 8 minutes.

Hello. In this video we are going to talk about HTML images, the IMG tag. The image tag is one of the most used ones in HTML. It’s very easy and simple to use.

Let’s create the raw IMG tag. So, there is the IMG tag and the SRC, the source attribute. In the source attribute we are willing to add the image location. This can be the link, an external link, or else the file name of the image. So, we have the tag image with the source Ponting to dog.jpg, which is a local file we have in the same directory as the webpage. So, let’s see how it looks like.

So, we have here the image in the HTML page. So right now, I’m going to show you how to place a title in the image using the title attribute. So we have the tag image we have the attribute source with the image file name and we have the title.

The title will appear as you place the mouse over the image. It appears the title “my dog!” which is the title we have just placed here. Now let’s talk about the alt attribute, the alternative attribute. The alt attribute is used for some reason when the image is broken.

Let’s say we have an image that doesn’t exist locally or that have moved the file so instead of showing the image the browser will show the alternative text, the content of the alt attribute. So, for instance, we are placing the text “dog image missing” inside the alt attribute. Let’s save here and reload. So, as we place the mouse over the image nothing happens.

We can see the old title called “my dog” which is the content of this attribute here.

So, let’s change the file name to something that we know that doesn’t exist, to see how it behaves. Inside of “dog.jpg” we are going to place “dog222.jpg” which is a name we know that doesn’t exist here locally. Let’s reload the page.

So now we can’t see the image, but we have the alternative text here “dog image missing” which is the content of the ALT attribute. Remember that the ALT attribute is very important for Google for your SEO of your webpage. Google loves it. It’s important to say to customers is what’s inside the image if we get broken for some reason. Now we’re heading back to the old filename the dog.jpg which is a fine name we know that exits locally. Now we’re going to reload the page. Let’s see the dog again.

Now I’m going to show you how to style this image how to change the size. So we have added this style attribute here.

To change the width and the height of the image you can simply do like this. We have just placed the style attribute and inside it, width of 500px. So, the image is way bigger than it was in the past. For instance, let’s change this to 50 only 50px. Let’s reload the page.

So now the image is very small. It’s very tiny.

Just like the width attribute we can just set the height attribute. We can set both width and height. If you only set one of them, or width or height, it will keep the proportion of the image so that it just doesn’t get messy.

But if we specify both of them, let’s see how it looks like. I have just placed width of 500px and height of only 50px so the image will be messy, but, this is a possibility. Now if you do the opposite let’s set the height of 600px and the width of only 50px. Let’s reload. The image will be just tiny, but let’s go back to the default with nothing set in the style attribute and we have the dog image as its default.

Now we are going to show you how to use a link in the image. So, we have here the image tag. What we need to do is place the anchor link the A link. So, we have the image tag here then we have outside the image tag the A tag. The A tag have its HREF pointing to Copahost.com, an external web page. So, let’s save and let’s reload here. So, as we place the mouse over the image, we have the finger pointer and as we click the image, we are going to be redirected to the other page desired. Let’s just come back here so in this first sample we have just opened the image called dot jpg which is located in the same folder as the HTML file.

For instance, this is our HTML file called page.

htm and this is dog.jpg which is our image. We can just point to a different image in a different folder this way. We have the folder named “folder” and we have a different image here called image.png.

So, we’re going to place the folder name / image.png. We are going to save it and reload.

Now I have the different image inside the other folder. So, let’s just get back to the old image, the dog image.

Let’s save it. Ok so now we’re going to show you how to float, to how to organize the image, to get with text in your web page. Let’s make the paragraph tag. Okay now we’re going to add some text here. So we have the image tag inside the paragraph tag.

We have another video where we explain more about the paragraph tag so let’s see how it looks like by default. So by default we have the image here with the text coming right after the image here. So inside the style attribute we can use the float attribute. If you use float:left let’s see how it behaves. So float:left tells the image to be positioned right to the left and leave all the remaining text to the right.

We have the text here on the right side and the image floating positioned to the left. If we do float right let’s see how it looks like.

Now the image is positioned to the right and all remaining text to the left. Remember that this behavior only works inside paragraphs. So that’s it this is the behavior of the HTML image tag.

Thanks for watching!

https://theclickmultiplier.com/splash.php?ref=https://warriorplus.com/o2/a/zs32509/0

Read More: Introduction to CSS | What is CSS? | How to add CSS? | Web Development for Beginners