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 Brooks Burns
Brooks Burns
3,401 Points

file path

I'm sure this will appear to be a very rookie type of question, but I am having difficulty finding a way to shorten the path of my files. For example: as I am following along on building a basic website. The example file path is "img/logo.gif" where mine is "users/name/desktop.."

So I am curious as to how I create a standalone folder like the one in the example?

Any help would be greatly appreciated.

2 Answers

Twiz T
Twiz T
12,588 Points

Brooksie, you can shorten your file path by making it relative (img/picture.jpg) and not absolute (/Users/Brooksie/Desktop/picture.jpg).

If you have your folder or directory where your html file is referencing the image at the same level as an images folder you can reference like so-

You have your blog directory where your post.html files live and all your images live. So inside of your blog folder you would have-

first_post.html

And also inside the blog folder you have a folder called blog_images and inside blog_images is a picture called 'batman.jpg'.

So, as far as 'first_post.html' is concerned batman.jpg lives inside at (relative path).

blog_images/batman.jpg

Inside of your first_post.html file you would reference the batman.jpg like so-

< img src="blog_images/batman.jpg" />

Let's say for some reason you had no folder where you organized your blog images and the batman.jpg was also directly "underneath" the blog folder with first_post.html you would reference it like this.

< img src="batman.jpg" />

Let's say for some reason you were very organized and had your batman.jpg file inside or a folder called 'superheroes' inside of a folder called 'blog_images' you would reference like so in the first_post.html

< img src="blog_images/superheroes/batman.jpg" />

Do these relative paths make sense?

Brooks Burns
Brooks Burns
3,401 Points

Okay guys, I appreciate all the help but I still feel that I am failing to understand this. The path is now working. Unfortunately I am still having to type out the absolute path because the relative path just shows a generic image icon.

This is the path that I am currently using that will show the picture:

img src="/Users/Brooks/Documents/img/logo.jpg" alt="Chore Request"

Thanks for all of the help.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

If a screenshot would help understand check this out

from this tutorials on file paths

Brooks Burns
Brooks Burns
3,401 Points

Okay guys, I appreciate all the help but I still feel that I am failing to understand this. The path is now working. Unfortunately I am still having to type out the absolute path because the relative path just shows a generic image icon.

This is the path that I am currently using that will show the picture:

img src="/Users/Brooks/Documents/img/logo.jpg" alt="Chore Request"

Thanks for all of the help.