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 Build a Simple Website Text Editors and HTML Finishing the HTML

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 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

miruke
miruke
5,649 Points
miruke
miruke
5,649 Points

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,235 Points
Sean Flanagan
Sean Flanagan
33,235 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.