1. Home
  2. Training Library
  3. HTML Fundamentals 3: Images | SDTL3 A3.1 |

HTML Fundamentals 3: Images | SDTL3 A3.1 |

Developed with


HTML Fundamentals 3: Images


Now you'll learn how to add images into HTML code. Your work here will be the starting point for the next exercise.


- Hi, welcome to this video on adding images into your HTML code. To do this we use a new tag which is img. As you can guess, this stands for image. I'm going to add the image tag under our H1 tag. What's different with this tag against the others is that we need to include everything in the angle bracket. After img we add an attribute, src, which stands for source. This is telling the computer where to source this file that exists on the Internet. After that we have an equals sign and in a quotations mark we then include the link to the image we want to be displayed. In this case, I've already copied the link which I'll paste inside the quotation mark. If I save and refresh the webpage, you'll see what I've entered. There, a nice and fresh QA logo. We also need to consider the needs of those who are visually impaired and cannot see the image. The next attribute we add in, after the image link, is alt, which stands for alternate. This the text that'll be read out to explain the image on screen. Why? Well, people who are visually impaired may use a reading software which will narrate the pages they're looking at. We need to be as accessible as possible. Great, we've now ensured the webpage is as accessible as possible. Please always consider this when building a webpage. If I save and refresh it, nothing will change on screen but in the background, the alternate text is ready for when it's needed. Now, let's say I don't like the size of the logo, it's too big. To reduce down, I need to add another attribute which is width after the quotations mark. To finish, I then type equals and in the quotes mark I put a number which refers to the amount of pixels wide it will be. I'll put 1000 in here to see what happens. Click save and refresh, whoa, okay, that's a bit too big. I'll change the 1000 to 100. Save and refresh. Great, this looks much better. And there we have it, a nice simple image to add a bit of flair to our webpage. We hope you've been following along with this video demonstration and been experimenting yourself. Thank you for joining me on this journey into HTML, see you back here soon.