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

Posted by Demian Arend
Demian Arend
3,386 Points

images and text editors

Hey, everybody. Can anybody tell me why my images work (in the browser) when I'm using Sublime but not Notepad++. When I switch over to the browser from Notepad++ it's created an image border but there's nothing inside, just what looks like a little broken image icon inside the border.

Thanks.

Faizal Heesyam
Faizal Heesyam
8,843 Points

whats the URL look like in your browser, when you click preview in browser button in your Notepad++? probably its just a path issues..

Demian Arend
Demian Arend
3,386 Points

But it's not a path issue. The same path in Sublime produces the image in the browser.

Faizal Heesyam
Faizal Heesyam
8,843 Points

do you mean, you were coding the same page, using two different editor (ST2 and N++), but it produce a different result in the browser?

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Please give an example of your code so we can help you further. Thanks.

Chris Gregson
Chris Gregson
555 Points

I'm using Adobe Brackets and having the same issue. Image appears as a broken icon?!?! I've tried everything but it would suggest that the image download is possibly corrupt? I hope this hasn't failed at the first fence as it was looking really promising!

Chris Gregson
Chris Gregson
555 Points

example: <img src="img/logo.gif"; alt="Smells Like Bakin">

Chris Gregson
Chris Gregson
555 Points

<img src="img/logo.gif"; alt="Smells Like Bakin">

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

You're example hasn't appeared, try again please. We really need to see what you are doing.

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

If your code contains HTML tags you need to indent everything by four spaces so it appears in code format

1 Answer

Thomas MacFarlane
Thomas MacFarlane
2,430 Points
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Please give an example of your code so we can help you further. Thanks.

Edit: Sorry, wasnt meant to put that in the answer section, can't seem to delete it now.

Demian Arend
Demian Arend
3,386 Points

Hey. This is a recent "doodle" I did for some practice and one again the images would not work in Notepad. I didn't nest stuff, bt, again, I didn't really nest the code in Sublime and the images worked there....

Anyway here's the recent code:

<html lang="en"> <head> <meta charset="UTF-8"> <script src="myscript.js"></script> <style type="text/css">

quote {background-color: red; font-size: 30px;}

section {background-color: 99AA55;}

table {background-color:FF2255;}

</style> </head> <body style="background-color:1122DD"> <h1 style="font-size: 30px; color: pink; font-family: arial;"><strong>Here's a Look at <i>Bubba McKenzie's page:</i><strong></h1>

<iframe width="300" height="300" src="Bubba McKenzie.html"></iframe><br>

<br> <hr> <br> <div id="section"> <a href="http://eflideas.webnode.com"><img src="/desktop/Me, White Shirt.jpg" width="300" height="200"></a> <br> <p style="font-size: 55px; color: FF8822; font-family: courier;">President Obama said: <span id="quote">"<u>Paul Pierce will win another championship with Brooklyn!</u>"</span></p> </div> <br> <table border="2" width="200" height="250" id="table"> <thead><tr><th>Sense</th><th>Nonsense</th></tr></thead> <tr><td>Joe Strummer</td><td>Ted Nugent</td></tr> <tr><td>Tiger</td><td>Monkey</td></tr> <tr><td>Chris</td><td>Fred</td></tr> </table> <br> <form action="#" method=GET name="my_form"> <label for="username">Username</label> <input type="text" name="username" id="username"> <br> <br> <label for="password">Password</label> <input type="password" name="password" id="password"> <br> <br> <input type="submit" value="Submit Button"> </form> <br> <br> <form> <select> <option>North America</option> <option>Asia</option> <option>Africa</option> <option>Europe</option> <option>South America</option> <option>Australia</option> </select> </form> <br> <br> <form> <textarea name="essay" rows="10" cols="30"></textarea> </form>

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Did you accidentally miss indenting some of that? Looks like some tags got sucked up again. Also, your hex values don't have a # before them.

Demian Arend
Demian Arend
3,386 Points

Hmm...it doesn't seem to have taken everything I intended to paste...hopefully it will take this snipet containing one of the images I wanted...

<div id="section"> <a href="http://eflideas.webnode.com"><img src="/desktop/Me, White Shirt.jpg" width="300" height="200"></a> <br> <p style="font-size: 55px; color: FF8822; font-family: courier;">President Obama said: <span id="quote">"<u>Paul Pierce will win another championship with Brooklyn!</u>"</span></p> </div>

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Keep trying. Indent everything by one tab or four spaces. Not a single line should be touching the normal starting point.

Demian Arend
Demian Arend
3,386 Points

When you say "indenting" do you mean "nesting"?

Yeah, will watch my hex values, but all my colors were working as I wanted them to.

Why doesn't this forum seem to want to accept the pasted code?

Faizal Heesyam
Faizal Heesyam
8,843 Points

whats with the "President Obama said..." snippets?

Faizal Heesyam
Faizal Heesyam
8,843 Points

have a look at the Markdown Cheatsheet link below.

Demian Arend
Demian Arend
3,386 Points

It only took a small portion of what I wanted to paste in, so it's just a small fragment of the code I wanted to present. Not sure why...

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

^This. Well indenting is how you create nesting, so no I don't mean that. You simply put four spaces before each sentence you type.

<img href="http://example.com">
Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Well, once you figure it out, I'll help you with the other stuff lol. Perhaps you can put it in a Pastebin or Codepen.

Faizal Heesyam
Faizal Heesyam
8,843 Points

pastebin would be a straight forward tools for now, codepen might confuse some users..

looking forward to it. :)

Demian Arend
Demian Arend
3,386 Points

That reminds me. I've had absolutely no trouble with Notepad++ when making an external link to another web site, only problems with internal links to files on my computer. At one point (some months back) I couldn't even get it to link to a stylesheet. Is Notepad++ notorious for having problems? Would you not recommend it?

Demian Arend
Demian Arend
3,386 Points

Pastebin?

Demian Arend
Demian Arend
3,386 Points

Well, I indented as you suggested, no difference.

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Notepad++ works great. It's most likely you are making mistakes. Humans are always the problem, not the computers. Pastebin is an online place you can put some code or text and then link to it here. Good luck.

Demian Arend
Demian Arend
3,386 Points

I hear you, but it's so strange that the image code worked in Sublime, same code...I copied and pasted (I think, it was a couple weeks ago). Doesn't Treehouse recommend Sublime?

Will try pastebin.

Demian Arend
Demian Arend
3,386 Points

Okay, everybody. I got it to work. You're right. I messed up the path to the picture. It's working fine now. Thanks for your help. -Demian

Thomas MacFarlane
Thomas MacFarlane
2,430 Points

Congratulations :) Well done, it's always satisfying to figure it out. Treehouse recommends Sublime OR Notepad++. Sublime is technically not free while Notepad++ is, but I've heard both recommended according to user preference.