Images not showing up when I test my code.

Quicksilverpoet · 01-16-2013, 07:29 PM

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>

waxdoc · 01-17-2013, 01:25 AM

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>

Excavator · 01-17-2013, 02:19 AM

Hello waxdoc,
Not sure what you're asking here. 9 images in your code, 9 images shown in the rendered version of your code.

felgall · 01-17-2013, 07:33 AM

Quote:

Originally Posted by waxdoc

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

coothead · 01-17-2013, 10:30 AM

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

webdevs · 01-18-2013, 06:46 AM

You needs to change image path to your computer.

ZenReputation · 01-18-2013, 10:09 AM

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

waxdoc · 01-23-2013, 12:14 AM

When I posted my reply, could not find Quicsilver's query. My reply had corrected code for Quicsilver