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
samuelgalvao
1,260 PointsHaving 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
Courses Plus Student 4,055 PointsIt 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!
Jeff Wolfram
10,490 PointsShould look like
<!doctype html> <html> Smells Like Bakin' Cupcake Company </thml>
Jeff Wolfram
10,490 Points''' <!doctype html> <html> Smells Like Bakin' Cupcake Company </html> '''
Jeff Wolfram
10,490 PointsSorry. 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
samuelgalvao
1,260 Pointsthis 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
10,490 PointsHah. 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.
samuelgalvao
1,260 Points<!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>
samuelgalvao
1,260 PointsI'm not sure why it's not allowing me too copy and paste the code. So frustrating!!!
Brandon Fallin
Courses Plus Student 4,055 Pointsthat'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 :)
samuelgalvao
1,260 Points@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
Courses Plus Student 4,055 Pointsyour 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
Courses Plus Student 4,055 PointsJust 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!
samuelgalvao
1,260 Points<!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.
samuelgalvao
1,260 Pointssamuelgalvao
1,260 PointsThanks 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.