Question:

Can anybody explain this article on Absolute and Relative Paths on html for me?

by Guest57330  |  earlier

0 LIKES UnLike

http://www.brugbart.com/Articles/115/

I don't understand what it means...

 Tags:

   Report

3 ANSWERS


  1. Two files in the same folder on your computer:

    mypage1.html

    mysecondpage.html

    Relative = starting from where I am, it's here.

    Absolute = doesn't matter where I am, go here.

    Telling someone where the Jones live:

    Relative - "5 doors down that way"

    Absolute - 15 Somewhere Street, Chicago.

    Relative path:

    <a href = "mysecondpage.html"> Second Page</a>

    Absolute path:

    <a href = "c:/mywebsite/mysecondpage.html"> Second Page</a>

    (although I'm not sure this is the correct way to write a link for a computer)

    If you used a relative path link and decided to move mypage1.html into a different folder such as C:\myphotos, the link would be useless because mysecondpage.html isn't in the same folder any more.  An absolute link would still work.

    Root relative is this:

    <a href = "/mywebsite/mysecondpage.html"> Second Page</a>

    Putting the / at the beginning means go as far back up the path as possible and start from there.


  2. Say you have a website called 'www.mywebsite.com' and at the root of your website you have a page called "index.html" and a folder called 'styles'.

    In the styles folder you have a file called 'blue.css'.

    In your index.html you can add a link to blue.css using a relative path or an absolute path.

    Relative path: "/styles/blue.css"

    Absolute path "http://www.mywebsite.com/styles/blue.cs...

    so relative path is simply where you would go from the file you are linking from.

    since index.html is located in:

    http://www.mywebsite.com/

    you only need to go /styles/blue.css (forward into styles to get blue.css)

    so really a relative path is exactly that a path to the file relative to the file you are linking from.

    if you where to have:

    http://www.mywebsite.com/home/index.html

    and:

    http://www.mywebsite.com/styles/blue.css

    your relative path would be "../styles/blue.css"

    the .. simply means to go back a folder and then you go forward into styles to get to blue.css

  3. The article is saying this

    if you have a file named index.html which is located in folder tree

    tree/index.html

    now you want to link to the page newtrees.html which is in the same folder you would just link it like this

    newtrees.html

    //////////////////////////////////////...

    Document Relative Paths

    //////////////////////////////////////...

    now say you have your index.html file in the folder trees which trees is in the folder home.

    home/trees/index.html

    now you want to link to services.html which is located in home you will have to use:

    ../services.html

    we use ../ to mean go down one folder

    //////////////////////////////////////...

    Document Relative Paths

    //////////////////////////////////////...

    now say you have index.html which is located in newtrees which newtrees is located in trees and trees is located in home

    home/trees/newtrees/index.html

    now you want to grab the page services.html which is in the home folder:

    ../../../services.html

    i set ../ 2 times to show that we need to go down 2 folders.

    //////////////////////////////////////...

    Root Relative Paths

    //////////////////////////////////////...

    now just say you have index.html in folder home

    home/index.html

    now you want to grab the page new.html which is located in the folder trees in which trees is in the folder home.

    tree/news.html

    you dont use ../ because your going up a folder

    //////////////////////////////////////...

    Absolute Paths

    //////////////////////////////////////...

    say you want your index.html in the folder home.

    home/index.html

    now you want to to link to a page on another site you just link the hole url to the page.

    http://www.brugbart.com/SubDir/Page.html

Question Stats

Latest activity: earlier.
This question has 3 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.