CODEWITHSUNDEEP
htmlpath
Bobby
Bobby

Reputation: 496

Give absolute url address

I'm trying to understand absolute and relative Url addresses; however, when I attempted an exercise, I couldn't solve it. Here is the exercise:


Given the following URL address http://www.unsite.org/a/b/index.html , the document index.html contains 3 relatives URL addresses:

<img src="../logo.png" alt="Logo de l’entreprise"/> //Line 1 <img src="/images/logo.png" alt="Logo de l’entreprise"/> //Line 2 <img src="images/logo.png" alt="Logo de l’entreprise"/> //Line 3

Give the corresponding absolute URL of each of them. -__-.
Can someone also explain the difference between Line 2 and Line 3?

I understand that (for line 2 and 3 ) logo.png is in the folder images which is in the same directory as index.html. For Line 1 logo.png is in the parent folder of index.html and that's pretty much it I understand but I still don't know how to solve this exercise.

Upvotes: 1

Views: 174

Answers (4)

michelem
michelem

Reputation: 14590

Line 2 has / in front of, so that means "start from the root of the web host" absolute URL will be http://www.unsite.org/images/logo.png

Line 3 hasn't /in front so it should start from the current url looking the complete path, absolute URL will be http://www.unsite.org/a/b/images/logo.png

Upvotes: 0

Alp
Alp

Reputation: 3105

If you have a chance, take a look at those lines while you have the deployment folder open in front of you in a windows explorer or finder program.

I think this is your folder structure.

ROOT
|----images/logo.png (line2)
|----a
|    |-----b
|    |     |----index.html
|    |     |----images/logo.png (line3)
|    |
|    |---logo.png (line 1)

index.html is in root/a/b/ folder.

As you can see, there is an images folder in the same location where index.html resides and that images folder holds logo.png file (line 3)

Parent folder of b is folder a. This is where another logo.png file is. (line 1)

And finally there is another images folder at the root. And there is also another logo.png in there. (line 2)

Same names everywhere makes thinks more complicated than it actually us. Renaming each one and fixing the HTML file may help you understand it better. Cheers.

Upvotes: 0

eugenioy
eugenioy

Reputation: 12383

Given http://www.unsite.org/a/b/index.html:

<img src="../logo.png" alt="Logo de l’entreprise"/> //Line 1

http://www.unsite.org/a/logo.png


<img src="/images/logo.png" alt="Logo de l’entreprise"/>  //Line 2

http://www.unsite.org/images/logo.png


<img src="images/logo.png" alt="Logo de l’entreprise"/> //Line 3

http://www.unsite.org/a/b/images/logo.png

Upvotes: 1

Elliot B.
Elliot B.

Reputation: 17651

Line 2 <img src="/images/logo.png" alt="Logo de l’entreprise"/> will attempt to load the image from the path defined relative to your root web directory.

Example: If your domain name is www.yourwebsite.com and the current web page is www.yourwebsite.com/folder/page.html, then it will attempt to load the image from http://www.yourwebsite.com/images/logo.png

Line 3 <img src="images/logo.png" alt="Logo de l’entreprise"/> will attempt to load the image relative to the current directory of the web page.

Example: If your domain name is www.yourwebsite.com and the current web page is www.yourwebsite.com/folder/page.html, then it will attempt to load the image from http://www.yourwebsite.com/folder/images/logo.png

Upvotes: 4

Related Questions