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 Images and Lists

Having trouble displaying my logo's image...

I'm a complete newbie...Day 1 and I am having trouble displaying my first image element displayed in the video. Below is what I have coded...what have I done wrong? Please help.

<!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="img/logo.gif" alt="Smells Like Bakin">
</body>
</html>

6 Answers

Brandon Fallin
PLUS
Brandon Fallin
Courses Plus Student 4,055 Points

It depends on where the image is saved and where your index.html file is saved, they should be in the same folder. For example if you have your index.html file saved in C:\Users\Samuel\Documents and you have the image you want to use in C:\Users\Samuel\Pictures\img\logo.gif when you try to access your picture by using img\logo.gif it can't because it thinks you're trying to grab from the same folder that your index.html file is saved in and the image isn't there so it doesn't show. there is two solutions to this, either put them in the same folder and then you should be able to just type in logo.gif or you could point to the absolute url of the image, whats that? I'm glad you asked... it's the complete file path in windows you can go to the image right click it and select "properties" it should say the file path on this tab. it should look something like C:\Users\Samuel\Pictures\img\logo.gif. Happy Coding!

Thanks a bunch, Brandon. I use a Mac so I was at a loss with your second suggestion. But I tinkered around with your first one, which made a lot of sense, and it worked! Now I can move on to the next set of challenges and progress...again, thank you.

Jeff Wolfram
Jeff Wolfram
10,490 Points

Should look like

<!doctype html> <html> Smells Like Bakin' Cupcake Company </thml>

Jeff Wolfram
Jeff Wolfram
10,490 Points

''' <!doctype html> <html> Smells Like Bakin' Cupcake Company </html> '''

Jeff Wolfram
Jeff Wolfram
10,490 Points

Sorry. For some reason it wont show that code the way it should. Should be on separate lines. Do the doctype first. next line opening hlml tag. Next line the sentence you want to see. Next line closing html tag

this is the code I wrote...don't know if you could see it in my original post. It's the body that seems to be the problem, I believe.

'''html <!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="img/logo.gif" alt="Smells Like Bakin"> </body> </html> '''

Can you see the whole body of the code? It's 10 lines long.

Jeff Wolfram
Jeff Wolfram
10,490 Points

Hah. sorry again. I just realized that I did not answer that for you at all. You are trying to display an image. I cant see your code so I can see what you are doing wrong. Try to post the code again.

<!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="img/logo.gif" alt="Smells Like Bakin"> </body> </html>

I'm not sure why it's not allowing me too copy and paste the code. So frustrating!!!

Brandon Fallin
Brandon Fallin
Courses Plus Student 4,055 Points

that's because you need to use 3 backtick symbols (they look like this `) not 3 apostrophes (they look like this ' ). Yes they look alike, but they are two different symbols and in code using the wrong symbol could ruin a program. Just trying to help :)

@Jeff...this is the code I have used that I seem to be having trouble with. Now what do you think? @Brandon...thanks for that tip regarding the backtick as opposed to an apostrophe...that little tidbit has reeled me in from the ledge. Now what do you think the problem is with my code if that's the problem at all.

<!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="img/logo.gif" alt="Smells Like Bakin">
</body>
</html>
Brandon Fallin
PLUS
Brandon Fallin
Courses Plus Student 4,055 Points

your code should look something like this

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Smells Like Bakin' Cupcake Company</title> </head> <body> <img src="the url path to your image" alt="a string of characters to write in case the image doesn't load"> </body> </html>

the "alt" attribute isn't necessary, but it's considered good practice to write the name of the image in the quotation marks, in case the image fails to load.

Brandon Fallin
Brandon Fallin
Courses Plus Student 4,055 Points

Just a little tip, the img element is one of few html elements that does not get a closing tag. in other words "</img>" is not required, the image itself defines that it ends. Have fun coding!

<!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="img/logo.gif" alt="Smells Like Bakin">
</body>
</html>

I WAS using an apostrophe...thanks Brandon...now tell me what is wrong with this code where my image nor my alternate appear on the page.