putting image files into html5 file

+2 wiliam pierce · February 3, 2015
 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.

Post a Reply

Replies

- page 1
Oldest  Newest  Rating
+1 Melissa Ries · February 5, 2015
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:

<img src="image.jpg" alt="give it a tag name" style="width: 000px; height: 000px">

-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. :D

I hope this helps ;)

Good luck!
0 Adi Adams · February 8, 2015
Is there any reason why I cannot display an image below a table which I created? The table comes below the image, but I have written the code for the table before writing it for the image!
0 wiliam pierce · February 4, 2015
missed part of your answer side logos in the way. O.K. I understand that I  have
to have my files in the dtml5 file im working on. I don't understand HOW exactly
do I do this. probable a simple thing but I am kinda new. thanks jay
0 wiliam pierce · February 8, 2015
thanks Melissa. I'm working on my site today and think I
I have some clue thanks to you. thanks again. I'll post my results today if possible.
0 wiliam pierce · February 8, 2015
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. thanks
for your efforts so far. heres the code.

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>im so tired</title>
<link rel="stylesheet" href="main.css"/>
</head>

<body>
   <div id="big_wrapper">
 <header id="top_header">
 <h1>Nerdy Poker=Money and Girls</h1> 
 <h3>A Complete guide to crushing the 1-2 game</h3>
 </header>
 
 
 <div id="top_menu">
 <ul>
 <li><a href="#"> Home</a></li>
 <li><a href="#"> Tells</a></li>
 <li><a href="#"> Charts</a></li>
 <li><a href="#"> Tools</a></li>
 <li><a href="#"> Videos</a></li>
 <li><a href="#"> Blog</a></li>
 </ul>
 </div>
 
 


 
 
 <div id="left">
  <nav id="left">
 
    <ul>
      <li> <a href="#">Mathematics</a> </li>
      <li><a href="#">Semi-Bluffing</a></li>
      <li><a href="#">Bluffing</a></li>
      <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
      <li><a href="#">SEARCH</a></LI>
      <li><a href="#">Products</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
     <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
   <li><a href="#">About</a></li>
      <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
     <li><a href="#"> Charts</a></li>
      <li><a href="#">Live Play Tips</a></li>
    <li><a href="#">Live Play Tips</a></li>
    </ul>
 </nav>
</div>
 
 
 
 
  <section id="middle">
 
  <div id="middle_header">
 
 
     <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>
  
     </article>
  
  </div>
  
   <div id="right">
  
  <object width="200" height="230"
data="http://www.youtube.com/v/1hFvxzTMw6k">
</object>
  <object width="200" height="230"
data="http://www.youtube.com/v/biMS5tWUmrc">
</object>
  <object width="200" height="230"
data="http://www.youtube.com/v/5oibCeJhXNc">
</object>
  <object width="200" height="230"
data="http://www.youtube.com/v/5woPCbobdb0">
</object>
</div>
 
 
      
    <div id="footer">  
  <img src="mpw-64517jpg" alt="here tis" style="width:304px;height:228px">
    </div>
</body>   
</html>   

AND THE CSS

*{
margin:0px;
padding:0px;
background: #100000 ;
}

#big_wrapper{
width:1000px;
margin:0px;
}

#top_header{
border:1px solid red;
text-align:center;
float:right;
color: #FFD700 ;
background: #000000;
margin:10px 5 5 5;
width:100%;
height:100px;
}
 #top_menu{
background: #280000;
color: #280000;
border:1px solid red;
}
#top_menu li {
display:inline-block;
list-style:none;
padding:8px;
font:bold 14px tahoma;
}
#top_menu ul li {
display:inline-block;
list-style:none;
padding:10px;
font:bold 14px tahoma;
border:1px outset #E80000;
}



#left{
float:left;
color: #FFD700 ;
background:#000000;
margin:5px 15px 5px 0;
border:1px solid black;
width:110px;
height:620px;
}
#left ul{
color: #FFD700 ;
margin:0px;
list-style-type:none;
}
#left ul li{
background-color:#000000 ;
color: #FFD700 ;
margin:5px;
padding:10px;
width:70px;
border:3px outset #E80000;
}
#left ul li a{
display:block;
width:75px;
height:15x;
text-align:center;
text-decoration:none;
line-height:15px;
}
a{
color: #ffffff;
}

#middle{
background: #280000;
float:left;
margin:10px 15px 10px 0;
width:610px;
height:630px;
}
#middle_header{
width:600px;
text-align:center;
background: #B8860B;
border-bottom:40px solid darkred;
padding:5px;
margin:0 auto;
margin-bottom:15px;
}

article {
 display:inline-block;
width:280px;
text-align:center;
background: #000000 ;
border:1px solid red;
padding:10px;
margin: 0 auto;
margin-bottom:10px;
width:45%;
height:15%;
}
article footer {
text-align:center;
}
#right{
float:right;
background: #A0A0A0 ;
margin:10px 15px 10px 0;
width:200px;
height:630px;
}
#footer{
background: #808080 ;
color: #FFD700 ;
clear:both;
text-align:center;
padding:15px;
border-top:2px solid black;
border-bottom:2px solid black;
border-left:2px solid black;
border-right:2px solid black;
0 Melissa Ries · February 8, 2015
Hey William,

Your img src tag has a (-) and no (.). That is why its broken. Rename it to something simple like mpw.jpg.

Never use (-) in html. It won't read it. Always remember the (.) also.

Try that!

;)
0 wiliam pierce · February 8, 2015
it now reads
  <img src="snake.jpg" alt="here tis" style="width:304px;height:228px">
I put in an image that might be easier to read.still broken pic.
am I missing something here?
0 Melissa Ries · February 8, 2015
Okay....I am heading out the door. repost what you have and use the text editor in the tool bar above. There might be some problems in the code. If you are in a real hurry. Go to stream and request Linguistic Llama. He can help you. There is a special link you can post your code. Let me know what happens. I gotta go. Keep working on it . Most times the answer just comes to you. Good luck!
0 wiliam pierce · February 5, 2015
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 down
next 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 folder
that is already on my desktop, but I do understand why.
exactly how do I physically put them in the same file. thanks again.
0 Melissa Ries · February 6, 2015
William

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:


  • 1
  • 2

HTML / CSS / Web Design

106,965 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators