<img decoding="async" src="image-name.jpg" alt="alternate text">
<img decoding="async" src="image-name.jpg" alt="alternate text">
				
			

Video Summary

Alright guys, this is the image element. This is where we use the image tag to be able to place photos and graphics onto your website and your web pages. So before we get in I want to have you noticed that this tags a little bit different than the other tags we’ve been dealing with. One we don’t need a ending tag with this. Now if you want to have best practices, you are able to go in and put an ending tag if you want. It is not needed. But if that’s something that makes you feel better while you’re learning, by all means, go ahead and set that up. But I just want you to know that’s why it’s not over here and it’s included with this example. Now one thing I want you to notice too is is this is very similar to the a tag that we were learning earlier, where we’re able to put links on a different paragraph, different words, different sections of the website, when someone clicks on there, they will be able to go to your designated URL that you’re sending them to. This is really similar but instead of having an h ref or HTML reference, we’re using a source so that’s why that’s what the SRC is for. And basically what we’re trying to do with this is we’re trying to call where that image is being stored out. Looking for us when we’re dealing with WordPress as we have a thing called a media library. So all the files, images and videos that we upload from the website gave us we get a URL associated with that file image or video that we can call to later. 

Now if we were building this from scratch, say using Visual Studio code, we would want to call the actual name of that. So if it was image name, with a jpg we can use that or if we actually have the URL, which I’m going to use in my next example, we can just place that here. Alright, let’s go. So let’s hop over a code pen and start playing around with this. Alright, so right now I just have the image tag in here. We don’t have a source yet, but we do have the alternate text right. So now if the image is doesn’t show up, we will still see the little image icon and we will have the alternative text explaining what that image would have been or but just to show you that we can have URLs that are targeting photos, that so this page right here is just to display this photo. Now there is a lot of wax in the back, but that’s not part of the photo. That’s just empty space. Because this photo is only this blur. I don’t know exactly what the size dimension is, but this is how they the images. So what I’m gonna do is I’m going to come over here and I’m going to copy this URL. And I’m going to come in here, and I’m going to place this image in here. And we’re gonna come down here and now we have that image on our webpage. 

Now when we get into CSS, this is where we can manipulate this image. We can make it smaller, we can potentially make it bigger, but do know when you are dealing with images is that so say for instance, this image right here, if we want to make this larger, we can put it will get distorted. So it won’t be as clear or as vivid as the image that you see right now. So when you’re going to try to figure out what images you want to use for your website make sure that your image or file size is large enough. Because ideally, we can take this image and we can make it smaller and it will still look crystal clear. But we can only make it so much bigger before we start losing the quality of the image. So those are just things to think about. And again there’s a lot of cool things we can do with this image when we start styling it, but for right now at least you’re able to see that hey, this is how we can place an image into our website and how we can use the URL to be able to that’s associated with the image to be able to place the next video we’re gonna hop over and show you how you can place a YouTube video on to your website.