How to Insert an Image in a Webpage (HTML / XHTML)

In this video we learn how to insert an image into a web page by hand, using HTML code. Check out my 9 hour web design video course:

You can also view this lesson in written format:

Have you created amazing pages with HTML & CSS and want to move them from your computer’s hard drive to online so the world can see them? The next step is to move your files to a web host. Learn about web hosts and my favorite hosting company:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:






32 responses to “How to Insert an Image in a Webpage (HTML / XHTML)”

  1. Nathan Tao Avatar

    Hi ,is it possible to do it without moving the html into the same folder?

  2. Pahlavonjon Odilov Avatar

    So how do you do it on a MacBook?

  3. Isaac Medland Avatar

    do u know how to download pictures when when your pc won't let u save on your drive
    or desktop?

  4. Jerus sujan Avatar


  5. SubFak Avatar

    This is the worlds funniest comment:
    Can I have 100 likes for no reason?
    Funny, right?

  6. Crazy Avatar

    here to copy and paste into notepad if ur 2 lazy
    <title>Sign Up</title>
    <img src="new-cover.JPG" alt=" new cover" />

  7. Chris Xu Avatar

    That's very helpful! Thank you!

  8. Lalandra Avatar

    i can't see my images .Can someone help? I checked so muny times the codes .Everything seems realy in order but when i open to see it , the image seems to be there but there is no picture . Why does this happen?

  9. Matteo Meme. Avatar

    Thanks! I love your simple style of editing, teaching, and awesomeness.

  10. Louisa Rankin Avatar

    brilliant! Really helped wth my issue my book lied! 😀 I will send you my link when it's complete 🙂 Nicely explained too!

  11. mahtab mahther Avatar

    yay,this helped me a lot as because in technology,we are going to make our own website and it is going to be finished by this friday.

  12. albertsatyam kumar Avatar

    how to use <img src="/images/picture.jpg">can any one tell me ,where sld be exact position of the images in this attribte

  13. Crazzwill Avatar

    Go Fuck youself asshole

  14. Nicolas Bryce Avatar

    Works great however be nice if you could add how to adjust image size…

  15. Ghadh Zh Avatar

    thank you it was helpful

  16. Samuel Torres Avatar

    I liked this video, can you make another but more in depth with the images… Adding multiple images and how to rotate them if they come out sideways on the html webpage. You are a good explainer. Thank you.

  17. Sha Cortez Avatar

    why is it that i still get that litte x mark? I followed the steps but still the image I'm trying to attach is not showing?

  18. Zain Abidin Avatar

    i tried this but i am getting a broken image like box with ripped paper in it. can you help?

  19. DazzleGirl228 Avatar

    LearnWebCode,Thank you so much! This is really helpful! All the other videos I tried to watch are pretty much total garbage. But thank you very much! If it wasn't for you I would be clueless forever!

  20. Leviathan Avatar

    thank you brother!

  21. zay the robloxian Avatar

    pleas reply if you can help me with my computer project its gonna be easy it just basic html stuff plz help me 30 marks on that

  22. CatZingy Avatar

    How do you rotate an image because mine appears to be upside down when i import it

  23. Kazog gaming Avatar

    thx so much dude every one else's tutorials suck ass ur a life saver

  24. Sohail Sayed Avatar

    Is saving the file in the same directory important? can't i use the image from anywhere as long is know the path.

  25. Nathalie Joy Garcia Avatar

    so basically you are going to add the name of the image
    ? please reply

Leave a Reply

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