...

View Full Version : 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?



<!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?



<!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
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...


<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum