Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Build a Simple Website Text Editors and HTML Finishing the HTML

Sean Flanagan
Sean Flanagan
33,232 Points

Images won't appear in any browser

Hi guys and girls.

I'm having trouble getting the images to appear in browser. Only one shows in Chrome, whereas in Firefox and IE none of them materialise. I'd really appreciate some help. I'll post the code to save time:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title>Smells Like Bakin' Cupcake Company</title>
</head>
<body>
    <img src="C:\Users\user\AppData\Local\Temp\Rar$DIa0.859\logo.gif" alt="Smells Like Bakin">
    <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes & Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Page</a></li>
    </ul>
    <div id="intro">
        <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavours that melt together to create ironically delicious desserts.</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div>

    <img src="C:\Users\user\AppData\Local\Temp\Rar$DIa0.492\you-bake-me-blush.gif" alt="You Bake Me Blush">

    <div id="featured-cupcake">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combination of flavours will make your mouth water!</p>
        <img src="C:\Users\user\AppData\Local\Temp\Rar$DIa0.111\featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </div>

    <div id="new-cupcakes">
        <h2>Fresh out of the oven!</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>.</p>
        <img src="C:\Users\user\AppData\Local\Temp\Rar$DIa0.361\new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="C:\Users\user\AppData\Local\Temp\Rar$DIa0.085\new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
    </div>

</body>
</html>

Thanks.

Sean

1 Answer

It would probably be much easier if you saved all of the documents and images in their own file directory on your computer. It will help your web browser with relative paths and keep everything all nice and organized. Plus when you get ready to transfer your website to a server it will be all ready for you.

If I were making this website I would have a main folder called smellsLikeBakin and a document inside of it called index.html. I would also add a folder inside of my smellsLikeBakin folder called images. I would save all my pics inside of that images folder. With this arrangement when I wrote out my relative paths in my index.html document I would have something like img src=images/chocalateCupcake.jpg(or whatever the name of your pic is)

Sean Flanagan
Sean Flanagan
33,232 Points

Hi. Sorry for being slow to reply due to work commitments.

I created a new main folder called Smells Like Bakin'. Inside it, I created a sub-folder named images, plus an html document called index2 (I already had another html file called index). I then typed out the code like this:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title>Smells Like Bakin' Cupcake Company</title>
</head>
<body>
    <img src="C:\Users\user\AppData\Local\Temp\Rar$DIa0.859\logo.gif" alt="Smells Like Bakin">
    <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes & Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Page</a></li>
    </ul>
    <div id="intro">
        <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavours that melt together to create ironically delicious desserts.</h1>
        <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div>

    <img src="images/you-bake-me-blush.gif" alt="You Bake Me Blush">

    <div id="featured-cupcake">
        <h2>Cupcake of the Week</h2>
        <p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combination of flavours will make your mouth water!</p>
        <img src="images/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
    </div>

    <div id="new-cupcakes">
        <h2>Fresh out of the oven!</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>.</p>
        <img src="images/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="images/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
    </div>

</body>
</html>

Still no joy, unfortunately. Have I got the code right? Thanks.