May 5, 2012

How To Add an Image To a Web Page

In this video we learn how to insert an image into a web page by hand, using HTML code. We also learn how and why to use the “alt” attribute, and how to organize images into sub-folders.

Quick Code Reference

<img src="image-name.jpg" alt="Short description of image" />

Notice there is no </img> end tag. This is because the <img> element is a Self Closing Element. Unlike a paragraph, we won’t have a plethora of content inside our <img> element, but rather a single image. The /> at the end of the code tells the web browser to end the image element.

For a full written tutorial, see How to Insert an Image in HTML.

If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my 8 hour video course and learn pro-level HTML, CSS, and responsive design.

About the Author

Brad Schiff

Brad Schiff is a front-end developer, designer, and educator who has been building user interfaces for over a decade. He’s done work for Fortune 500 companies, national political campaigns, and international technology leaders. His proudest achievement is helping people learn front-end web development.

Follow Brad on Twitter Subscribe on YouTube

2 thoughts on “How To Add an Image To a Web Page

  1. Yours is one of the best videos I’ve seen. I could see everything you were doing with ease, not difficult to follow, you made it easy to see what file type you made the items and walked through it step by step pretty well. I’ve seen other tutorials and they were very difficult to see what they were doing because the font was too hard to see. I’ve seen others where the played music while talking – very bothersome. And then others that did not talk at all but instead typed out everything they should have said – that was very bothersome as well. Thanks for taking your time to do a decent job in your videos.

  2. Brad,
    I have tried this video step by step and everything works as advertised. One thing that I would suggest to the viewer of this page, pay attention to simple things like syntax and spaces and of course typos.
    I have tried this video from YouTube several times. I have discovered a simple thing like a space between the quotation mark and the /> closing tag of the image source made a difference as far as having my picture to display on the browser.
    Otherwise, Brad, Your are THE MAN!
    As I have asked before: Please keep these HTML tutorials coming for Beginners like us.
    Cheers!

Leave a Reply to J.R. Cancel reply

Your email address will not be published. Required fields are marked *