1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. Fundamentals of Web Page Development

HTML Fundamentals 3: Images

Developed with
QA

The course is part of this learning path

Becoming a Cloud Architect — Learn the Fundamentals
course-steps
12
certification
5
lab-steps
1
description
1
play-arrow
Start course
Overview
DifficultyBeginner
Duration22m
Students413
Ratings
5/5
starstarstarstarstar

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
Students5182
Labs22
Courses27
Learning paths29

QA is the UK's biggest training provider of virtual and online classes in technology, project management and leadership.

Covered Topics