Okay… so, you’ve been following these tutorials learning how to code a website and you have learned so much. You are well on your way to becoming a programming or web developer. By now you know what HTML is, how to use tags, and what CSS is. But you’ve heard the saying, “A picture is worth a thousand words.” What’s the point of knowing how to make a website if you don’t put pictures in it? In this tutorial, you are going to learn how to add an image in HTML using code. Go ahead now and open another tab up to codepen.io and let’s get started learning how to add pictures in html.
A New HTML Tag: <img >
The key to adding images to your site is knowing the right tag to use. Just like if you want a size 2 heading you would use a h2 tag, there’s a tag for images. That tag is <img>. But… this tag is a little different than the ones we’ve used before. With image tags, you have to specify the image inside of the tag. This specification is done with something called an attribute, which we have to learn about if we want to know how to add pictures in html.
What is an attribute in HTML
Attributes in html go inside the tag, so inside the <> (less than and greater than signs). They go after the tag name. And they tell the website something about the tag that changes the way the tag looks. Sometimes these attributes are required, and sometimes they are optional. For example, the paragraph tag has an optional attribute called “hidden”. If you code “<p hidden”, the paragraph will not show up on the webpage. You might use this if you happened to be editing a page and didn’t want something to be visible yet, or if you’re just trying to understand how attributes work.
Images have two required attributes. These are “src” and “alt”. What do you think src and alt stand for? Src stand for source and alt stands for alternate. Src and alt are different attributes than hidden because they take values. For example, if you wanted to put an image on a webpage the code would look like
<img src=”Something” alt=”A picture of something”>
There are two optional attributes that we will talk about later, but for now all you need to know are the attributes source and alternate. So, what values do you think we would actually put in src and alt?
The Source Attribute
Where do you actually get an image? That’s where the source attribute comes in. The source attribute is where your image lives- either online (on a server) or on your computer (if you are locally testing a website). Here, we’re not going to get into making a website locally just yet. But, you can still do pretty much everything you want to using images from around the internet.
Where do you get the source?
If you want to know how to add pictures in html, you need to know how to find the source of the picture you want. The source attribute, when you’re using an image that already exists on the internet is in the form of a URL. URL stand for “uniform resource locator” but that isn’t very important. You just need to know that URL just means where a resource on the internet lives. The source of an image is the URL that it comes from. If you are on a page with the image you want, you can right click (or click with two fingers if you are on a trackpad) and select “copy image url”.
Codepen time!! Go ahead and go to codepen and either keep working with the pen you’ve been creating or you can make a new one. All we’re doing in this tutorial is simply adding an image to a webpage. First, type this into your html window
<img src="" alt="">
What are you in the mood to put on your website? I’m thinking about chocolate chip cookie dough ice-cream at the moment. So, let’s find an image for that. (Please get your parent’s permission to search here, especially if you are under 14 years old. There are some scary and not fun images that can pop up.)
I’m going to go ahead and go to images.google.com and type in “chocolate chip cookie dough ice cream”. Then, I pick which one I want; the first one looks good. I’m going to right click on the image and select “copy image url”. Then paste that in between the quotation marks after src in our code.
<img src="https://celebratingsweets.com/wp-content/uploads/2014/04/Cookie-Dough-Ice-Cream-1-5.jpg" alt="">
Boom! You should see the image appear. (It’s really big, but we’ll learn about resizing images later.)
The Alternate Attribute
What happens if the image that you link in src doesn’t exist? Nothing will be displayed! One great, and required, attribute that solves that problem is the alt attribute. The alt attribute is text that will be displayed if your image can’t be found.
Another reason why is alternate important
When you are googling for pictures of cats, how does google know what cats look like? Today they use a fancy algorithm but they used to rely on the alternate attribute to determine what images were what. This makes sense, right? Simple computers don’t have eyes and algorithms written to tell what pictures are take a lot of energy and time to run. So instead, if you search for “cat” the search engine can just look at the alt attribute and see if the word “cat” is in it.
Now create another image and leave the src blank. In alt put whatever you want, and see what happens.
<img src="" alt="This is alt text">
Other Picture Attributes
There are other attributes that can go into image tags that are optional, which I will talk more abut in the Youtube video that goes along with this tutorial. (Stay tuned! It’ll be coming out this week!)
And… that what how to add pictures in html! Thanks for following along and don’t forget to comment with any questions or to tell me about what website you’ve made!