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 Shawn Frambach
Shawn Frambach
2,265 Points

I seem to have a hard time understanding file placement in directories. Should everything just be in one folder?

I have my index in "My Documents" and my JPG in "Pictures" I have: <img src="../Pictures/kam.jpg" and it doesn't work. I thought i would because I need to get out o fMy Documents (../) and get into Pictures (Pictures/) and select the jpg (kam.jpg). I tried putting them both in documents- nothing - then both in pictures- nothing- obviously after changing the code to reflect that they are both in the same folder by just giving the name of the jpg file in the src.

I can't seem to grasp the concept of file placement for these files. Should everything you're going to use for the site be in one folder?

Help is appreciated. Thank you

9 Answers

Neal Gist
Neal Gist
8,438 Points
Neal Gist
Neal Gist
8,438 Points

Hi Shawn, everything should start inside of one folder - this is your root directory. There's no one "right" way to organize your directory structure, though there is an art to it for SEO purposes. Using Google's suggestion here is a great place to start:

http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf

(start at page 9 or 10)

A basic directory structure could be as follows:

  • root folder (has index.html)

-- css folder

-- images folder

-- javascript folder

-- page-one folder

-- page-two folder

-- page-three folder

Be careful when utilizing "/" to navigate around. "/myfolder/my-image.jpg" will look for my-image.jpg relative to the root directory. However, if you are not utilizing a local server, then your webpage is going to confuse the root directory ("/") as the root of your Computer, NOT the root of your website.

For Example: If I created a folder called "website-root" and put it on my desktop, the folder's technical location is: "/Users/myusername/Desktop/website-root" Lets say that I drop an image in a "website-root/images" folder called "my-image.png". If I try to reference that image in html or css as "/images/my-image.png" it's not going to start the search from website-root folder, but rather from the root of my computer. You're full URL would look like this: "/images/my-image.png" and return undefined.

Simply remove the first "/" to reference the source relatively from the html/css location. If the source was "images/my-image.png" instead, then (assuming your starting position is "website-root") it would work just fine.

Another suggestion would be to set up a local server, where you can essentially say "I want 'website-root' to be the root directory for this site, not my computer hard drive." Check out MAMP if you're on osx, or WAMP if you're on Windows.

Shawn Frambach
Shawn Frambach
2,265 Points
Shawn Frambach
Shawn Frambach
2,265 Points

As it turns out I didn't have a closing tag. Nonetheless, I fixed it and still nothing. I rearranged everything like you described.

I have my WEBSITE folder

  I have my INDEX inside that.

I have an IMG folder inside the WEBSITE folder underneath the INDEX folder.

                           inside the IMG folder i have KAM COPY.JPG

My code is 

                       <!doctype>

<html>

<head> <meta charset=“utf-8”> <title>My Page</title> <h1>What the hell is wrong?</h1> <p>I cant figure out why I cant post pictures.</p>

</head>

<body>

<img src=“img/kam copy.jpg” alt=“Kam”>

</body>

</html>

and still nothing. Am I missing something? I appreciate your help so far.

THank you

Kristen Law
Kristen Law
16,244 Points

Err.. I accidentally deleted my answer.. lol

But anyway, I can't read your code in this post. Can you format your code using this? https://teamtreehouse.com/forum/posting-code-to-the-forum

Shawn Frambach
Shawn Frambach
2,265 Points
Shawn Frambach
Shawn Frambach
2,265 Points

Thanks Neal, I just read this. I have done something similar to what you describe as well, I believe. I may be missing something. This is the only topic I get confused on.

Shawn Frambach
Shawn Frambach
2,265 Points
Shawn Frambach
Shawn Frambach
2,265 Points 
<!doctype>

<html>

<head>
    <meta charset=“utf-8”>
    <title>My Page</title>
    <h1>What the hell is wrong?</h1>
        <p>I cant figure out why I cant post pictures.</p>

</head> 

<body>

<img src=“img/kam copy.jpg” alt=“Kam”>  

</body>


</html>
Kristen Law
Kristen Law
16,244 Points
Kristen Law
Kristen Law
16,244 Points

I think the issue is that you can't have spaces in your file path. Rename your image with an underscore or something and you should be good to go!

Kristen Law
Kristen Law
16,244 Points

Alternatively, you could replace the space with %20 ("img/kam%20copy.jpg") and it should work too, but I wouldn't recommend doing it that way.

Shawn Frambach
Shawn Frambach
2,265 Points
Shawn Frambach
Shawn Frambach
2,265 Points

Nothing worked yet. Ill have to figure this out. I appreciate you help.

Shawn Frambach
Shawn Frambach
2,265 Points
Shawn Frambach
Shawn Frambach
2,265 Points

I still have not had it show up correctly. I'll have to find the problem. I hate this is such an issue for some reason. I appreciate both of your help.

Kristen Law
Kristen Law
16,244 Points

Hmm did you remove the space in your file path?
I think file paths are case-sensitive too, maybe that's the issue?

Neal Gist
Neal Gist
8,438 Points

If you can get a live example up somewhere, we'll really be able to better assist you. Just a random guess on the issue at hand: Have you checked the image permissions? In your browser's development console, you'll be able to see any permission denied errors if that's the case.

Kristen Law
Kristen Law
16,244 Points
Kristen Law
Kristen Law
16,244 Points

Ok, I looked back through the code you provided and I may have found the issue (fingers crossed!). It looks like you're using curly quotes (“  ”) instead of straight quotes (" ") in your code. Try changing those and see if that works!

Also, a few other notes:

In your <!DOCTYPE> declaration, you're not really declaring anything. This declaration is used to tell the web browser what type of HTML you are using, but since you didn't put anything after the doctype, it's not really doing anything to my knowledge. For example, if you are using HTML5, you would put <!DOCTYPE html>. See this site for more details: http://www.w3schools.com/tags/tag_doctype.asp.

Your h1 and p elements should be inside the body tag, not the head tag. Putting them inside the head tag is invalid HTML.

Hope everything works out and you get your images displaying properly!!

Shawn Frambach
Shawn Frambach
2,265 Points
Shawn Frambach
Shawn Frambach
2,265 Points

Gotchya. I am back on my home computer, I'm going to take your advice and get back to you all. Thank you so much