In lesson #4 you are going to learn how to add a image to a website using strictly HTML.
If you missed the previous lessons in this series, you can access them below:
You can view the lesson for today below:
It’s now time to start learning how to add images to our HTML document.
The first thing I’m going to do is open up our webpage, and I’m going to add an image to the very top of our website, just up top here above our h1 element.
What I’m going to do is I’m going to start typing out the code to add an image.
First we use the image tag, and then you’re going to add the source, which would be the link to our image itself.
Then we add the alternative text, which I will explain what that does in just one second.
The first thing here is our image file path. Now, I created a folder in our website folder called Images.
You’ll see Images here.
Inside that folder I have a file named Robin, and it’s a jpeg file.
My file path is going to be Images/Robin.jpg.
The alternative text is what shows up if for some reason our image doesn’t load correctly, or let’s say the person is viewing our image on a certain device that doesn’t display the image.
You can see here that in our website our image is pretty big, so I’m also going to have to add some styling here to kind of shrink this image down since it’s quite a large image to begin with.
Normally we would use CSS to style our image, but in this case since we’re just learning HTML I’m going to actually use the style tag within our image element to add a width of 200 pixels, and I’m also going to add a height of 200 pixels.
This should shrink our image, so I’ll save the file here. Open it up.
We can see our image has shrunk, but it looks a little bit weird because it’s actually in widescreen, so I’m going to actually change the width to be a little bit longer.
Let’s try 300 pixels.
There we go.
That image looks much better now. That’s the basic way of adding a image to your website.
The main thing to keep in mind is to get the file path to your images correctly, because if you don’t declare the right file path you’re going to get an error, and the image won’t load correctly.
I’m actually going to show you what happens if you don’t declare the right file path. I’m going to go ahead and make a mistake here on purpose.
I’m going to change the file path here. Let’s just get rid of the R, so the file path is now incorrect. If we reload the page, you’ll see that we’re getting an error. The image doesn’t actually load, but you can see our alternative text will pop up here instead.
You have to make sure that you have the right file path, and you have to make sure it’s case-sensitive, and you have the right extension for your image.
In our case we’re using jpeg. If I put the correct filename back you can see that our image now loads. Now try adding an image to your website by yourself.
If you would like to take some more advanced web developing tutorials you can checkout all my web developing courses available by clicking here.