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
E R
1,220 PointsWhat is document relaive paths?
what is dociment relative path, i dont understand
2 Answers
Jose Chavez
1,691 PointsDocument relative path is basically the connections from file to file within the folder that you page that you're working on is.
For example, You make a website. What do you make first? A folder! (If you don't then start doing so.) Within this folder, you have your index page, your stylesheet, and other HTML files.
If you wanted to post an image that was saved on the folder, then you link it using the file's name. Assuming everything is in the folder, then it'd be:
...
<body>
<img src="/fox.jpg" alt="example">
</body>
(Assuming 'fox.jpeg' is in our files) Basically '/' tells our code when it compiles to find a file from our current folder.
Now, let's say we move that image to a folder from the folder we're using and calling that new folder 'images', then it wouldn't be the same code because using '/', remember, tells our code to look in the current file.
So, what we have to do is let it know that it is in a folder called 'images'.
...
<body>
<img src="/images/fox.jpg">
</body>
Now that will dig in through the 'images' folder and find the file.
I suppose it is called document relative paths because all files in a folder are relative?
But, what if we are in the 'images' folder, make a HTML file there and want to link it back to the index file, which is in the first folder we made. Then simply add '..' to your code.
...
<body>
<a href="../index.html">Back Home</a>
</body>
I hope this answers your question. Cheers.
E R
1,220 PointsThanks