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.
3 Comments
→
Hello I have tried many Tutorial in efforts to put a pic on my page. I have tried
many things such as placeing the JPEG or GIF and the index.html on the desk
top or both in a folder. I have even tried makeing index just simply html and
diffrent things but now matter what I do the image will now show up in my browser
Opera. Some times it will display a small box with a name of the pic in the box depending on if I use the alt or not. Any idea as to why the image its self will
not show up on my page ?
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.
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!