image
HTML Fundamentals 3: Images
Start course
Difficulty
Beginner
Duration
22m
Students
3359
Ratings
4.6/5
Description
This course features several video tutorials on the fundamentals of web page development. Please take your time to watch them and take notes.
Transcript

- 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.

About the Author
Students
43752
Labs
168
Courses
1745
Learning Paths
45

A world-leading tech and digital skills organization, we help many of the world’s leading companies to build their tech and digital capabilities via our range of world-class training courses, reskilling bootcamps, work-based learning programs, and apprenticeships. We also create bespoke solutions, blending elements to meet specific client needs.

Covered Topics