Hello, in this HTML Crash Course video, we're going to cover images, a very, very simple prospect of a simple idea. Create an image tag. And we are very similarly done with div, tag, span, tag, etc, etc. Provide a source which is src. And this is the path. Again, that's the important part, the path to the image that you want to show.

And the reason I'm emphasizing path, because if the image is local, so imagine if I have the image in the same directory, this file, I would just type in an image dot png, if it was called image, a PNG. But if I were to organize my website a little better, because you want to organize, especially when your website gets bigger, bigger, that's not a word bigger and you have more files, then you're abstracting into a folder such as images Then you can display image dot png, you need to do something like images for slash image dot png. If the folder or the file is a return mean directory, you do something like that. But if you are accessing it from my website, you would just put the website URL. So what I'm going to do is just type into here, that man, go to images, check out this one.

And what we want to do make sure you get the link to the image nor link to a website. Obviously, technically, this is the link to a webinar or I mean it's not a link to a post. Make sure it's the link to the best way to make sure if you right click it actually it's a hard right click and get your draft inspected simply because I'm guessing this has been added as a background image using CSS buttons copy for me. Usually if the best way to tell if it as a foil, extend They, you know, they they aim is not SVG, scalable vector graphic, PNG, or jpg, those are the common ones or GIF for for that matter, then it's an image SVG something that you will come across a lot. Moyes a very good file format for the web address in general, if I were to paste this into here, to close this off, you put forward slash greater than.

And the reason you don't have a closing image tab, because this is a void element, which means it has zero context, content, this word. See, as you can see, even autocomplete isn't doing this because this is technically incorrect. You don't want to do this for any element that does not have any content and what I mean what I mean by that, I'm not saying any element that you created that you don't put content in, I mean, any element that doesn't support content Not an image tag or a horizontal line or a great line, like the br tag, then you close it off something like this. As I've mentioned in a previous video, you don't need to put the first last year, but I do it out of habit because something like XML HTML, you need to close all the tag races a good practice, in my opinion to get into so if I save that, I go back to my website refresh.

As you can see, we got our nice beautiful image, you may have noticed it's an inline element. So let's put it on a separate line. So let's do br again, this is a void element. For refresh. It's now on a different line. But the difference is this image is the original oil is displayed at its original size, change this, you can use CSS, we're not really covering that in this series.

We're going to cover CSF a little bit towards the end and just how to do it. But another way you can do with images is use the width and the height attribute to do that with equals, put figure out, like, for example, or height equals 100, for example, and save that. Go back refresh. Nice 100 by 100. I want to show you what happens if I omit the height value by refresh. You might thinking it hasn't changed.

Why hasn't it changed? Because the original file, if I recall, it was 520 pixels by 520 pixels. So it shouldn't this be 100 pixels wide by 510. I mean 520 pixels, so no, it maintains the ratio, unless you were say height equals 520 pixels. This is the original height. It still maintained the ratio is just the actual container over to inspect the element.

Let's find your team. The actual container itself is What is different, the actual image that you typically see is maintained, which is neat, chances are you don't want it to look all distorted and messed up or squashed. The final attribute we're going to show you is the alt tag otel, you're probably used on a bunch of elements, I mean, the old attribute I should say, not tag. The alt attribute allowed you to provide some information about the image for screen readers, because a screen reader can't really will read the image and describe that you kind of said this is Batman. Machine learning hasn't gotten to that point yet. That you will get to it but not you doesn't look to you.

So if I were to put Batman image, no image, image, save that refresh and apart from obviously the result, in mean the change in the height Nothing has changed. And he won't do. The only thing that you can notice if we go to inspect, and you go to the old Batman image do to that. And that just like screen recorders, like, for accessibility, to be able to get some information about this image over to Satan Batman image always there. So it's that. So that is it for images in HTML.

Hope you enjoyed this video. If you did let us know if it didn't let us know as well. We're always looking to improve. There will be a link in the description to the source code and the source code from every other video in this series. And as usual, I actually forgot to mention one thing if you do have any question whatsoever, feel free to post it on my education platform. So no learning code UK.

And as usual, thank you for watching and I hope you have a great day.