Let’s dive into how we can use images in this HTML tutorial. And specifically, we are gonna take a logo and we’re gonna place it here at the top of this nav bar for this website. We’re gonna see how we can import the image and how we can select it using CSS and then also how we can style it and customize its size. If you want to, you can use your own logo or you can use one of the demo ones that I have here, and I’ll include a link to the show notes for you.
The very first thing you can do is open this up and you can see we have a dark version and then a white version. And for this specific background, we really need to use the white version. So right-click on this and then click Save Image As and you can keep the name exactly the same and then place it inside of your project. Now, you can just hit Save right now, but then we’ll also customize exactly where it’s at so that we can see the path and so we can organize it properly.
So if we switch back here and then go to the code, I’m gonna place this above all the other nav links here and let’s just call it Banner Image. So this is going to be a wrapper div. And then I want to use an image tag. So if you’re using Visual Studio Code, you can type, “IMG,” hit tab, and this is gonna give you the values that you want. Now because we place this at the root of our project, you can see that we have this Dev Camp Fantastic Fries logo dash white right here. And so we could just grab this value. And so let me actually copy that name so that I’m not typing it out verbatim.
And then you can place that inside of this SRC tag. Now this SRC tag, it stands for Source, which means that we’re telling the image tag that the source of this image is this path. And then we’ll play around with how we can place this image inside a different part of the project. Now we also have this ALT tag. So here I’m going to say the logo. Now technically you could say anything that you wanted right here. The rational for the ALT tag is there’s a couple reasons. One is if someone has disabled images in their browser, then the ALT tag will show up instead of the image, but the most common reason for using the ALT tag is for accessibility reasons.
So if someone, say someone whose blind is going through your site and the way it works is there’s systems out there that will read things like the ALT tags in your content. If you leave the ALT tag blank, then they’re not gonna know that a logo was there. So that’s part of the reason. Google also reads through this for search engine optimization reasons. So it’s always good to put some kind of value here that describes what the logo is or that a logo is there. So that is gonna give us our basic import so let’s go back and hit refresh. And wow, you can see, that is imported, but that’s definitely not what we’re looking for. And that’s fine, that’s what were expected.
This is gonna take a. by default, the way that HTML works is it brings in the image and it does not do anything to it. It doesn’t try to make it fit or anything like that. That is our job. So now let’s see how we can select this image. So we know that we have a class here called “Banner Image.” And there are a couple different ways that we could customize it. So I could come here and … let me give us a little bit more room. So I could come in the tag itself and just say that I want to provide a hard coded with in line.
So here I could say “With” and for this kind of size, the value that I saw looked the best was something like 216 pixels. And then let’s give it a hight and the height here, you can combine pixels and percentages. So for the height here I could say just 100%. What this means is that we are controlling the width, we’re saying how wide it should be, and then we’re telling the height to just be automatic. So I’ll hit save and now if I hit refresh, you can see that works and that looks really good. And that’s perfectly fine. I usually don’t do it this exact way.
The approach I usually take is to apply a actual CSS class to it. So if I have my banner image here, what I can do is come down to the bottom of the CSS file and say “Banner dash image” and then I want to select the image tag inside of that. And now I can apply the exact same rules. So here I can say with and we wanna go with that 216 pixels and then for the height 100%, hit save, go back and hit refresh, and you can see that is working properly. So that’s just my own personal preference. Part of the reason is because I don’t really like my images to get really messy and the more code that you put inside of this tag, the longer it’s gonna be for you to find it when you need to fix it and also just starts to look a little bit cluttered.
Full guide:
https://www.crondose.com/2018/08/easy-way-to-use-images-in-html-and-css/
Follow me:
Twitter: https://twitter.com/jordanhudgens
Instagram: https://www.instagram.com/jordanhudgens/
GitHub: http://github.com/jordanhudgens
