Hey this is Sasha and thanks for joining me here for another video training lesson.
Today I’m going to share with you how to embed an image in your HTML code, so that way, as you’re looking to the hot pictures within your website, how can you add a picture or image on the page as you continue to work on your business website and evolve your business presence online.
Let’s take a look at the code and let’s see how we can do this.
Adding Images
Here what I’ve done is I have a basic stripped down page or version of my website. Now in order for me to add an image, we need to be able to have an image and a certain folder. Now the place that I’ve added it is exactly where my page resides — the location where my page resides.
Otherwise, if it’s not there, you need to link it or add a directory into it, which I’ll show you here in a second. But the code in order to add the image in there is it’s just IMG and I can hit tab and you can see what happens is it goes ahead and it puts SRC.
Now the great thing with Sublime text is you can see there is a pop up already that happens right here that allows me to just hit tab again and it’ll insert these fields because there’s meet and trim that’s already right there. This is the meet and trims jpeg file that I have.
So I could just hit tab and it’ll insert meet.jpg and that is my image. that is it. So if I go ahead and hit save, right there, and I’ll go ahead and preview my code, you can see there is the link meet. There’s my website. There’s the code. If I go to My Cooking website, there is the picture right there on the website
If I wanted to add that second picture on there, what I could do is again, I’ll go ahead and I’ll do this the long way. Image, SRC, equals hrimp.jpg, closed bracket right there. Control S to save. Go back to the page as it refreshes, there it is.
What if I want this picture to be under the other picture? As you can see it’s right next to one another. Well, that’s where it comes in to know your breaking tags. So again, BBR tag right there, add that in. Go ahead back to the page, hit refresh and you could see it is right under the other one.
My Cooking Website Welcome to my cooking website
As we look at these tags, you can see that it’s linking to the same folder that I have. But what if this was in a new folder? Let’s say I created a new folder and I called it Images. I’ll go ahead and I have images right there. I’ll drag this back in there so now you can see I have images right in there.
What happens to my files? Well, take a look. As I refresh things, you can see they are dead or broken, and that’s because they’re not in the right folder.
If you have a structure in this way which we need to do then is add a directory. There will be images and then this one will have images as well. Then I’ll go ahead and hit save because it’s within the images.
Now, I’ll go back to that website and you can see right there. “Welcome to my cooking website”, the images are back and they’re working. That’s how you go ahead and fix the problem.
What happens if they’re a little too big? In my example right there, maybe they’re just a little too big for my taste. So how do I shrink them down? Well, the way you can do this is by including attributes. And attributes are basically things within tags. That’s what we’re going to cover in the next module. But as a basic attribute, one of them would be something like width, and in here it’s based on pixel dimension.
If I go with 200 on this one, and I’ll do width on this one, and I’ll go, let’s say 400 on here, then go ahead and save.
My Cooking Website Welcome to my cooking website
As I come back to the page and then as it refreshes, you can see the one right above is 200, and the one below is 400. So you can see it’s twice the size of that. That is only based on width.
The height is automatically calculated and we can cover these topics here shortly in the next module as we get more into attributes.
Image Attributes
Before we get into the attributes section in the next video, there are a few that I want to cover in this section because it’s two images. So if we go ahead and take a look at the Alt attribute — as you can see, as I type in ALT right there — it’s the ALT attribute and it’s a tab.
I can go ahead and type something in. So this is a chicken meat that is grilled. This is basically a description that goes into the image if it’s not able to be displayed.
If I hit refresh there’s nothing really that’s changed at the moment. If I go ahead and refresh that page, you can see there is the ALT attribute right there, but again, nothing has really changed.
What does happen is in fact, as I make changes — let me just say, I changed this meat to meat zero, which means the file will not be found, and now I go ahead and refresh, you could see when the picture is not displayed the text is being shown right there to tell you what that picture or image is about. That’s kind of how that works relative to the HTML code.
That’s why, of course, it’s very important that you link your images properly. If you also have images on the web, this is just a short path that’s related to your server. But if you do have an image, let’s say, somewhere online, that you’re going to use — let me just find one right here — what you can do is paste in the full image address which is a global destination or location.
Here I’m using Pixabay from which you can get images for free over there.
My Cooking Website Welcome to my cooking website
So I’ll go ahead and paste that link in there and that’s a global image that’s pointing directly to that picture on a specific website. You can do this hot linking to other websites, but typically, you know you’re using their bandwidth when this happens so it’s not really ethical and I don’t recommend it.
When you do this and you now take a look at our page and we go ahead and hit refresh, you can see that picture shows up. If I take another image from — you’ll be able to see here in a second — for this website, and here I’ll show you the example, right here, I want to go ahead and take this picture and copy image address.
Now what I want to do is change this address right here from the shrimp to this address. And as we go back on our cooking website — we go ahead and — let’s just do the HTML first.
We hit refresh and you can see both of these are pointed to the Pixabay. One is the grilled. One is the salmon. Originally, we have the shrimp and the grilled. If I hit F5, now you have the salmon right there. So you can see the URL or the link is very important when it comes to hot linking, or linking the appropriate content on your page. You can of course work with the width attribute right there.
If you’d like to work with both attributes, you can also add a height attribute right there. Let’s just say, I’d do it 25. The problem with working with both attributes is that you need to make sure the ratio is correct because watch what happens now if I go ahead and do 25 on the height.
My Cooking Website Welcome to my cooking website
You can see that picture is 25. If I change this to 55, you can see it continues to get bigger. If I change this to 95 and save that, then hit refresh, you can see it’s getting bigger.
The problem when you have these two attributes working at the same time is it will give you those exact attributes. Whereas if I just go ahead and get rid of one of them, let’s just say, get rid of this one instead and leave height as 95, it’ll auto fill the other way and now I get the right proportion.
So if height is more important for you to set, then you could set the height and the width will be automatically calculated. If you want the width to be set correctly, you set the width and the height will be automatically set for you.
That’s one tip that you need to kind of keep an eye out especially for images because they can be a little bit worked or distorted as you play or work within your code.
Thanks for Watching
Thanks for joining me in this video. I hope you learned something today. If you did, and you want to subscribe, click that button right here and subscribe so that way you’ll get notified when I release new training videos.
If you want to join me on some premium business training content, where I share with you how to grow your business, monetize your business, and build informational products, there are some premium content that I have available only to my newsletter subscriber members and even some live classes.
You can get the information by getting on my newsletter, by clicking the button right here. Thanks for joining me and I hope to see you in my next lesson.
