Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Structure the Image Gallery

Posted by Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

Just Started, and got problem with image I uploaded

Hi,

I followed along Nick' lesson on building simple portfolio website. Why my image cannot appear in my Chrome browser?Just icon of unseen image. I use notepad in my laptop. Thanks

George Cristian Manea
George Cristian Manea
30,787 Points

You should post your code so we can undestand better

15 Answers

Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

Everything else is good but the image is appeared as broken :-). I tried both absolut and relative link of the images and both failed. Thank you

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>Agung Setya Nugraha | Designer</title> </head> <body> <header> <a href="index.html"> <h1>Agung Setya Nugraha</h1> <h2>Designer</h2>
</a> <nav> <ul> <li><a href="index.html">Portfolio<a/></li> <li><a href="index.html">About<a/></li> <li><a href="index.html">Contact<a/></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/Flying Turtle with Rocket.jpg"> <img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""> <p>Flying Turtle Sprite for Game</p> </a> </li> <li> <a href="img/travelpony.jpg"> <img src="img/travelpony.jpg" alt=""> <p>Strong Pony character for memorable mascot</p> </a> </li> <li> <a href="img/A tiger.jpg"> <img src="img/A tiger.jpg" alt=""> <p>Cool Tiger Mascot design for Branding</p> </a> </li> </ul> </section> <footer> <p>©| 2014 Agung Setya Nugraha</p> </footer> </body> </html>

pavelzharnikau
pavelzharnikau
3,690 Points

Can you post the part of the code containing img tag?

Anyway, "<!DOCTYPE HTML> Agung Setya Nugraha | Designer Agung Setya Nugraha Designer Portfolio About Contact Flying Turtle Sprite for Game Strong Pony character for memorable mascot Cool Tiger Mascot design for Branding ©| 2014 Agung Setya Nugraha" looks not OK.

We can try to help you, but we need all code.

Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

Thank you

Tony Nguyen
Tony Nguyen
24,934 Points
Tony Nguyen
Tony Nguyen
24,934 Points

also make sure your closing anchor is like this:

</a>

for your list items.

Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

Thank you

Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

Here is the code(without the opening DOCTYPE and html tags)

<head> <meta charset="utf-8"/> <title>Agung Setya Nugraha | Designer</title> </head> <body> <header> <a href="index.html"> <h1>Agung Setya Nugraha</h1> <h2>Designer</h2>
</a> <nav> <ul> <li><a href="index.html">Portfolio<a/></li> <li><a href="index.html">About<a/></li> <li><a href="index.html">Contact<a/></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/Flying Turtle with Rocket.jpg"> <img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/> <p>Flying Turtle Sprite for Game</p> </a> </li> <li> <a href="img/travelpony.jpg"> <img src="img/travelpony.jpg" alt=""> <p>Strong Pony character for memorable mascot</p> </a> </li> <li> <a href="img/A tiger.jpg"> <img src="img/A tiger.jpg" alt=""> <p>Cool Tiger Mascot design for Branding</p> </a> </li> </ul> </section> <footer> <p>©| 2014 Agung Setya Nugraha</p> </footer> </body>

pavelzharnikau
pavelzharnikau
3,690 Points
pavelzharnikau
pavelzharnikau
3,690 Points

https://teamtreehouse.com/forum/posting-code-to-the-forum

YOUR CODE
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

''' <html> <head> <meta charset="utf-8"/> <title>Agung Setya Nugraha | Designer</title> </head> <body> <header> <a href="index.html"> <h1>Agung Setya Nugraha</h1> <h2>Designer</h2>
</a> <nav> <ul> <li><a href="index.html">Portfolio<a/></li> <li><a href="index.html">About<a/></li> <li><a href="index.html">Contact<a/></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/Flying Turtle with Rocket.jpg"> <img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/> <p>Flying Turtle Sprite for Game</p> </a> </li> <li> <a href="img/travelpony.jpg"> <img src="img/travelpony.jpg" alt=""> <p>Strong Pony character for memorable mascot</p> </a> </li> <li> <a href="img/A tiger.jpg"> <img src="img/A tiger.jpg" alt=""> <p>Cool Tiger Mascot design for Branding</p> </a> </li> </ul> </section> <footer> <p>©| 2014 Agung Setya Nugraha</p> </footer> </body>

</html>'''

Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>Agung Setya Nugraha | Designer</title>

</head> <body> <header> <a href="index.html"> <h1>Agung Setya Nugraha</h1> <h2>Designer</h2>
</a> <nav> <ul> <li><a href="index.html">Portfolio<a/></li> <li><a href="index.html">About<a/></li> <li><a href="index.html">Contact<a/></li> </ul> </nav> </header> <section> <ul> <li> <a href="img/Flying Turtle with Rocket.jpg"> <img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/> <p>Flying Turtle Sprite for Game</p> </a> </li> <li> <a href="img/travelpony.jpg"> <img src="img/travelpony.jpg" alt=""> <p>Strong Pony character for memorable mascot</p> </a> </li> <li> <a href="img/A tiger.jpg"> <img src="img/A tiger.jpg" alt=""> <p>Cool Tiger Mascot design for Branding</p> </a> </li> </ul> </section> <footer> <p>©| 2014 Agung Setya Nugraha</p> </footer> </body>

</html> `

Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Agung Setya Nugraha | Designer</title>

</head>
<body> 
    <header>
    <a href="index.html">
        <h1>Agung Setya Nugraha</h1>
        <h2>Designer</h2>   
    </a>
    <nav>
        <ul>
            <li><a href="index.html">Portfolio<a/></li>
            <li><a href="index.html">About<a/></li>
            <li><a href="index.html">Contact<a/></li>
        </ul>
    </nav>
    </header>
    <section>
        <ul>
            <li>
                <a href="img/Flying Turtle with Rocket.jpg">
                    <img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/>
                    <p>Flying Turtle Sprite for Game</p>
                </a>
            </li>
                <li>
                <a href="img/travelpony.jpg">
                    <img src="img/travelpony.jpg" alt="">
                    <p>Strong Pony character for memorable mascot</p>
                </a>
            </li>
                <li>
                <a href="img/A tiger.jpg">
                    <img src="img/A tiger.jpg" alt="">
                    <p>Cool Tiger Mascot design for Branding</p>
                </a>
            </li>
        </ul>
    </section>
    <footer>
        <p>&copy;| 2014 Agung Setya Nugraha</p>
    </footer>
</body>

</html>
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

......finally I can show the code. This is what happened when an illustrator learns coding for the first time. I am so sorry :-).

pavelzharnikau
pavelzharnikau
3,690 Points
pavelzharnikau
pavelzharnikau
3,690 Points

Right syntax for images: 

<img src="URL" alt="alternative text">
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

I did it. Is this not right? <img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt=""/>

pavelzharnikau
pavelzharnikau
3,690 Points

You don't need to close it with /.

<img src="http://iamgagu.blogspot.com/2014/06/logo-for-tour-company.html" alt="">
George Cristian Manea
George Cristian Manea
30,787 Points

Your src value is not a link for an image is for an html page

Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

Okay thanks. I just erase the " / " but still not functioning. Why?

George Cristian Manea
George Cristian Manea
30,787 Points

Also it is not a good practice to have spaces in your image name like "a tiger.jpg";

pavelzharnikau
pavelzharnikau
3,690 Points
pavelzharnikau
pavelzharnikau
3,690 Points

Do you need anchors? 

<li>
                    <img src="URL or path to your image" alt="">
                    <p>Flying Turtle Sprite for Game</p>
</li>
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points
Agung Setya Nugraha
Agung Setya Nugraha
3,674 Points

Thank you very much I finally found what went wrong. In Nick's lesson he created folder for image and named it img. Mine is named image. :-)