Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Images not showing up when I test my code.

    I've just started using html and attempted to use what I've learned so far using codecademy.com. When I opened my file in my browser,chrome, none of my images appeared, but when I run it at codecademy's enviorment in browser it appears correctly. Can anyone tell me what I did incorrectly?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    	<table>
    		<thead>
    			<tr>
    				<th colspan="3">Video Games I Like</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>
    					<p>Skyrim</p>
    					<a href="http://en.wikipedia.org/wiki/The_Elder_Scrolls_V:_Skyrim"
    						<img src="http://cloud-2.steampowered.com/ugc/596991188537176941/589B18A158D522E7608E22228C0D9D2C8E2CEBFD/200x200.resizedimage"/>
    					</a>			
    				</td>
    				<td>
    					<p>Forza 4</p>
    					<a href="http://en.wikipedia.org/wiki/Forza_4"
    						<img src="http://mustangoverload.com/assets/sites/469BE54E-1231-3B12-BD19-11E052C0E888/images/entries/thumbnails/C5A52587-1231-3B12-BD19-388F67CD7AD6.jpg"/>
    					</a>
    				</td>
    				<td>
    					<p>Castle Crashers</P>
    					<a href="http://en.wikipedia.org/wiki/Castle_crashers"
    						<img src="http://th08.deviantart.net/fs70/200H/f/2012/229/d/1/castle_crashers_by_pooterman-d5bgv33.png"/>
    					</a>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<p>Half-Life 2</P>
    					<a href="http://en.wikipedia.org/wiki/HL2"
    						<img src="http://cdn.appstorm.net/mac.appstorm.net/files/2012/09/HalfLife2_logo.png"/>
    					</a>
    				</td>
    				<td>
    					<p>Halo</p>
    					<a href="http://en.wikipedia.org/wiki/Halo:_Combat_Evolved"
    						<img src="http://www.gamasutra.com/db_area/images/news2001/35058/halo.jpg"/>
    					</a>
    				</td>
    				<td>
    					<p>Super Smash Bros</p>
    					<a href="http://en.wikipedia.org/wiki/Super_smash_bros"
    						<img src="http://th05.deviantart.net/fs32/200H/i/2008/227/1/a/Super_Smash_Bros_Melee_by_CCgonzo12.jpg"/>
    					</a>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<p>Star Fox</p>
    					<a href="http://en.wikipedia.org/wiki/Star_Fox_(video_game)"
    						<img src="http://xbox360media.ign.com/xbox360/image/article/112/1122877/gaming-reboots-we-want-to-see-part-1-20100922061559930.jpg"/>
    					</a>
    				</td>
    				<td>
    					<p>Link to the Past</p>
    					<a href="http://en.wikipedia.org/wiki/LTTP"
    						<img src="http://cdn.appstorm.net/mac.appstorm.net/files/2011/06/macroms-5.jpg"/>
    					</a>
    				</td>
    				<td>
    					<p>Super Metroid</p>
    					<a href="http://en.wikipedia.org/wiki/Super_metroid"
    						<img src="http://media1.gameinformer.com/imagefeed/featured/nintendo2012/metroid/other/SuperMetroid200x200.jpg"
    					</a>
    				</td>
    			</tr>
    		</tbody>
    	</table>
    </body>
    </html>
    Last edited by VIPStephan; 01-17-2013 at 12:12 AM. Reason: fixed code BB tag

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    images not showing POST

    Cannot find the original post, but here's the corrected code below

    Add <title>for page</title>, avoid <TABLE> layouts. Remember an HTML <tag> is enclosed in lesser than < and greater than
    >
    brackets. Most <tags> come in opening <a href="___.com"> and closing </a> tags that define content inbetween. Exceptions, called "empty" tags, such as <BR> line break, <HR> horizontal rule, <IMG> image, etc. If you are using XHTML you follow the XML "self-closing" rule and the single tag with a space slash --such as <img src="_____.jpg" />.

    You did not complete your anchor tags such as
    <a href="http://en.wikipedia.org/wiki/The_Elder_Scrolls_V:_Skyrim">
    <img src="http://cloud-2.steampowered.com/ugc/596991188537176941/589B18A158D522E7608E22228C0D9D2C8E2CEBFD/200x200.resizedimage"> </a>

    Do you have permission to use those images to which you have universal links?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Vudeo Games I Like</title>
    </head>
    <body>
    	<table>
    		<thead>
    			<tr>
    				<th colspan="3">Video Games I Like</th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>
    					<p>Skyrim</p>
    					<a href="http://en.wikipedia.org/wiki/The_Elder_Scrolls_V:_Skyrim">
    						<img src="http://cloud-2.steampowered.com/ugc/596991188537176941/589B18A158D522E7608E22228C0D9D2C8E2CEBFD/200x200.resizedimage"/>
    					</a>			
    				</td>
    				<td>
    					<p>Forza 4</p>
    					<a href="http://en.wikipedia.org/wiki/Forza_4">
    						<img src="http://mustangoverload.com/assets/sites/469BE54E-1231-3B12-BD19-11E052C0E888/images/entries/thumbnails/C5A52587-1231-3B12-BD19-388F67CD7AD6.jpg"/>
    					</a>
    				</td>
    				<td>
    					<p>Castle Crashers</P>
    					<a href="http://en.wikipedia.org/wiki/Castle_crashers">
    						<img src="http://th08.deviantart.net/fs70/200H/f/2012/229/d/1/castle_crashers_by_pooterman-d5bgv33.png"/>
    					</a>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<p>Half-Life 2</P>
    					<a href="http://en.wikipedia.org/wiki/HL2">
    						<img src="http://cdn.appstorm.net/mac.appstorm.net/files/2012/09/HalfLife2_logo.png"/>
    					</a>
    				</td>
    				<td>
    					<p>Halo</p>
    					<a href="http://en.wikipedia.org/wiki/Halo:_Combat_Evolved">
    						<img src="http://www.gamasutra.com/db_area/images/news2001/35058/halo.jpg"/>
    					</a>
    				</td>
    				<td>
    					<p>Super Smash Bros</p>
    					<a href="http://en.wikipedia.org/wiki/Super_smash_bros">
    						<img src="http://th05.deviantart.net/fs32/200H/i/2008/227/1/a/Super_Smash_Bros_Melee_by_CCgonzo12.jpg"/>
    					</a>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<p>Star Fox</p>
    					<a href="http://en.wikipedia.org/wiki/Star_Fox_(video_game)">
    						<img src="http://xbox360media.ign.com/xbox360/image/article/112/1122877/gaming-reboots-we-want-to-see-part-1-20100922061559930.jpg"/>
    					</a>
    				</td>
    				<td>
    					<p>Link to the Past</p>
    					<a href="http://en.wikipedia.org/wiki/LTTP">
    						<img src="http://cdn.appstorm.net/mac.appstorm.net/files/2011/06/macroms-5.jpg"/>
    					</a>
    				</td>
    				<td>
    					<p>Super Metroid</p>
    					<a href="http://en.wikipedia.org/wiki/Super_metroid">
    						<img src="http://media1.gameinformer.com/imagefeed/featured/nintendo2012/metroid/other/SuperMetroid200x200.jpg" .
                            />
    					</a>
    				</td>
    			</tr>
    		</tbody>
    	</table>
    </body>
    </html>

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello waxdoc,
    Not sure what you're asking here. 9 images in your code, 9 images shown in the rendered version of your code.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by waxdoc View Post
    If you are using XHTML you follow the XML "self-closing" rule and the single tag with a space slash --such as <img src="_____.jpg" />.
    The space is only required if you are serving the page as HTML and the browser being used to show it is Netscape 4.

    XHTML does NOT require a space in front of the / and since Netscape 4 is long dead there is no reason for the space even if serving the page as HTML.

    <img src="_____.jpg"/> <br/> <hr/> etc
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,700
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Quicksilverpoet,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>My Games</title>
    
    <style type="text/css">
    body {
        font-size:1em;
     }
    #mygames {
        width:618px;
        margin:auto;
        text-align:center;
        background-color:#fff;
    }
    #mygames h2 {
        font-size:120%;
     }
    #mygames ul {
        padding:0;
        margin:0;
        list-style-type:none;
        overflow:hidden;
     }
    #mygames li {
        float:left;
        margin:3px;
     }
    #mygames a {
        display:block;
        color:#000;
        text-decoration:none;
     }
    #mygames a:hover {
        text-decoration:underline;
     }
    #mygames img {
        display:block;
        width:200px;
        height:200px;
        padding:10px 0;
        border:0;
     }
    </style>
    
    </head>
    <body>
    
    <div id="mygames">
    
    <h2>Video Games I Like</h2>
    
    <ul>
     <li>
      <a href="http://en.wikipedia.org/wiki/The_Elder_Scrolls_V:_Skyrim">Skyrim
      <img src="http://cloud-2.steampowered.com/ugc/596991188537176941/589B18A158D522E7608E22228C0D9D2C8E2CEBFD/200x200.resizedimage" alt="">
      </a>
     </li><li>
      <a href="http://en.wikipedia.org/wiki/Forza_4">Forza 4
      <img src="http://mustangoverload.com/assets/sites/469BE54E-1231-3B12-BD19-11E052C0E888/images/entries/thumbnails/C5A52587-1231-3B12-BD19-388F67CD7AD6.jpg" alt="">
      </a>
     </li><li>
      <a href="http://en.wikipedia.org/wiki/Castle_crashers">Castle Crashers
      <img src="http://th08.deviantart.net/fs70/200H/f/2012/229/d/1/castle_crashers_by_pooterman-d5bgv33.png" alt="">
      </a>
     </li><li>
      <a href="http://en.wikipedia.org/wiki/HL2">Half-Life 2
      <img src="http://cdn.appstorm.net/mac.appstorm.net/files/2012/09/HalfLife2_logo.png" alt="">
      </a>
     </li><li>
      <a href="http://en.wikipedia.org/wiki/Halo:_Combat_Evolved">Halo
      <img src="http://www.gamasutra.com/db_area/images/news2001/35058/halo.jpg" alt="">
      </a>
     </li><li>
      <a href="http://en.wikipedia.org/wiki/Super_smash_bros">Super Smash Bros
      <img src="http://th05.deviantart.net/fs32/200H/i/2008/227/1/a/Super_Smash_Bros_Melee_by_CCgonzo12.jpg" alt="">
      </a>
     </li><li>
      <a href="http://en.wikipedia.org/wiki/Star_Fox_(video_game)">Star Fox
      <img src="http://xbox360media.ign.com/xbox360/image/article/112/1122877/gaming-reboots-we-want-to-see-part-1-20100922061559930.jpg" alt="">
      </a>
     </li><li>
      <a href="http://en.wikipedia.org/wiki/LTTP">Link to the Past
      <img src="http://cdn.appstorm.net/mac.appstorm.net/files/2011/06/macroms-5.jpg" alt="">
      </a>
     </li><li>
      <a href="http://en.wikipedia.org/wiki/Super_metroid">Super Metroid
      <img src="http://media1.gameinformer.com/imagefeed/featured/nintendo2012/metroid/other/SuperMetroid200x200.jpg" alt="">
      </a>
     </li>
    </ul>
    
    </div>
    
    </body>
    </html>
    coothead
    Last edited by coothead; 01-17-2013 at 10:37 AM. Reason: typing error!!

  • #6
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    You needs to change image path to your computer.

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Location
    Zen-Reputation - 66, avenue des Champs-Elysées - 75008 Paris - France
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    re

    check urls of Pic...do you upload them at their

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts
    When I posted my reply, could not find Quicsilver's query. My reply had corrected code for Quicsilver


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •