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

Question

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

I don't understand what it means...

Answer 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.

Answer 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

Answer 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