To add an image to a page you add an image tag. It looks like this <img>. This will take an attribute as well. We need to tell it what the image is that it needs to display.

We list the image source. Now, usually this will be something saved to our site which we’ll call something a little different, but for now, we’ll use a picture with an online address. The code looks like this.

 

Do you see what just happened?

There is nothing to put between an opening and closing tag, so there isn’t an opening and closing tag. The tag just closes itself. There is the backslash (/) at the end of the tag. That closes it so that the browser isn’t looking for any more information about the image.

An important attribute to try to add to every image is alternative text. If the picture can’t load, or if someone who is visually impaired is using your site, it can use the alternate text to let them know what they are missing. We do it with the alt attribute.

You can add other attributes to your image. What do you think these numbers do?

You can define the dimensions of your photo in pixels. You may know that you want a standard 4 in x 6 in photo, but you may not know the ratio of your photo to make sure it looks right when you reduce its size. With the design language we’ll learn next, you’ll be able to tell it the height you need and then tell it to automatically set the width. Of course, in the HTML, you could just set one measurement, but then you’d be at the mercy of the browser as to what it decides to do with the other measurement.

Try this online by copying this link or finding any image online. Right click on it and choose copy image address or open image in a new tab and grab the address. Enter it as the source, the src. Make sure to use the equals sign and quotation marks around the whole link as we did with the previous attributes that we looked at. The numbers don’t need quotation marks.

We put quotation marks around strings. A string is a group of characters. It can contain numbers, but could also contain spaces, letters, punctuation. This sentence is a string. Each word could be a string. Each letter could be its own string. A string is always put in quotation marks in coding when we are referring to it. It keeps it all together. A number is already a single unit, no matter how many digits are in it, and doesn’t need to be held together by something. Since a string can have spaces and all other sorts of symbols in there, the quotation marks let the browser know where the string ends.

You’ll need to think about copyright in using images on your site. One good source of public domain images is pixabay.com.

You can see how this all acts on the browser by watching the lesson video.