putting image files into html5 file

I'm having trouble putting images onto my html5 code. Namely, when people say to put my image files in the same place as my html5 files I get lost. exactly how do I put images in the same file as html5. thanks.

missed part of your answer side logos in the way. O.K. I understand that I haveto have my files in the dtml5 file im working on. I don't understand HOW exactlydo I do this. probable a simple thing but I am kinda new. thanks jay

Create a folder on your desktop that contains your html file, css file, and images. You need a path and everything has to connect in order for it to work properly. Save all your stuff in the same place in the same folder. Next, putting the image on your page is pretty simple. You just enter in this code here:

-In the img src attribute you input the file name for the image itself

-The alt attribute is whatever tag name you want to give the image. This is for accessibility purposes. Say a user cannot view the picture for whatever reason on their browser. The alt tag tells the user what they cannot see

-The style attribute tells is the width and height. You have to specify the image dimensions. If you don't know how to do this. Right click on the image...select properties...select details....and you will find the height and width there.

Oh yeah btw make sure your image.jpg is all lowercase. If its already in CAPS rename it. HTML doesn't like caps....It won't recognize the pic at all. It will only show a broken image icon instead of the pic if its in CAPS.

thanks Melissa. I opened my html5 and css file in notepad they are both in same file of course.I opened a new file, clicked pictures because that's where the pic I want to use is.I click the pic I want and then pick html where it says all types in the drop downnext to it. then it just comes up scrambled looking mess.the point is I don't understand HOW to put the oics in my html5/css folderthat is already on my desktop, but I do understand why.exactly how do I physically put them in the same file. thanks again.

You need to create a folder on your desktop and save your html and css files in your notepad to that folder. Copy or drag and drop any images you want to incorporate into the folder. You do not need to create a separate file for the image. You do not drag the image into your notepad. You only need to have it in the same file directory.

The only thing you have left to do is create a path from the html file to image in your folder. You do that by entering a line of code in your html file:

ok. ive created a folder with my html5,my css, and the image I wish to use in the same folder on my desktop.but im still not getting anything but a broken image link. im including my code as well. thanksfor your efforts so far. heres the code.

<article> <a href="#"> <header> <hgroup> <h1>starting hand charts</h1> <h2>what to play and when to play it</h2> </hgroup> </header> <footer> <p>your starting place of how to play poker</P> </footer> </a> </article> </div>

<article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a>

</article>

<article>

<a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article>

<article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article>

</article> <article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article>

</article>

<article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article>

</article>

<article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article>

</article>

<article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article>

</article>

<article> <a href="#"> <header> <hgroup> <h1>top 10 all time tips</h1> <h2>remember these tips to keep you in the game</h2> </hgroup> </header> <footer> <p>this will help you avoid stepping into traps</P> </footer> </a> </article>