Welcome! Here you can paste sources and general debugging text, You can even set yourself a password if you want to keep it just for yourself.

Posted by Anonymous on June Mon 12th 9:40 AM - Never Expires (Modification of post by )
View followups from JimmiNi | Download | New paste

  1. THE DIFFERENCE BETWEEN ABSOLUTE & RELATIVE PATHS
  2. --------------------------------------------------------------------------------
  3.  
  4. **TL;DR**
  5.  
  6. 1. Relative Paths = src="images/file.gif", src="./images/file.gif, src="../images/file.gif, src="../../images/file.gif
  7. 2. Root Relative Path = src="/images/file.gif"
  8. 3. Absolute Path = src="http://www.example.com/images/file.gif"
  9. 4. NO performance difference
  10.  
  11. --------------------------------------------------------------------------------
  12.  
  13. ###**What are absolute / relative paths?**###
  14.  
  15. These are the two different style of paths or "links" that you can use in your code to reference files and where they are at on your server.
  16.  
  17. ###**What makes them different?**###
  18.  
  19. The way the path / link is written in your site's code is the biggest different. An **absolute path** is the full URL to a file. A **relative path** points to the location of the file you want to link to in relation to the page being viewed _all within your server space_. If the page you're linking to is in the same directory as the page being viewed then the relative path is simply the page name.
  20.  
  21. Below you can find an email of each style of link:
  22.  
  23. **ABSOLUTE:**
  24. <code><a href="http://www.thisisnotadomain.com/page.html">Page</a></code>
  25.  
  26. **RELATIVE:**
  27. <code><a href="page.html">Page</a></code>
  28.  
  29. ###**Where is the relative path pointing?**###
  30.  
  31. Because we're referencing a file on our server we don't need to tell the client (aka browser) to look anywhere else. We can provide information about where on the server (in relation to the exact page you're visiting and the directory on the server that page is stored) the files that we want are.
  32.  
  33. The idea is that the files are located "relative" to whatever page we are currently on. Are the files located in the same directory / folder as the page we're on? Are they located in a different directory / folder? If so is that directory / folder IN the directory / folder the page we're on is in, or is it outside of it? We can easily specify this information with relative links; the chart below explains how we do that:
  34.  
  35.  
  36. | Server Path                     | What it means                                                                                                                       |
  37. |---------------------------------|-------------------------------------------------------------------------------------------------------------------------------------|
  38. | <a href="page.html">            | page.html is located in the current directory                                                                                       |
  39. | <a href="tips/page.html">       | page.html is located in a folder (directory) called "tips". The "tips" folder is located in the current directory.                  |
  40. | <a href="tips/other/page.html"> | page.html is located in a folder called "other" that is located in a folder called "tips" that is located in the current directory. |
  41. | <a href="../page.html">         | page.html is located in a folder one levee up from the current directory.                                                           |
  42. | <a href="../../page.html">      | page.html is located in a folder two levels up from the current directory.
  43.  
  44. ###**Does the server know which style of link we're using?**###
  45.  
  46. Nope! Let me explain what happens when you visit a page:
  47.  
  48. 1. You want to visit a site, say http://thisisnotadomain.com, and type that into your browser
  49. 2. Your browser makes a connection to the server, and any PHP that's requested is interpreted (converted) into a single, flat HTML file, which is delivered to the browser first
  50. 3. That HTML file contains no images, little to no CSS/javascript (only the parts that are inline with the HTML)
  51. 4. The browser then makes subsequent requests for any images or other elements depending on what the flat HTML file it received earlier requires in order to display proplery.
  52. 5. If the code contains absolute links, no extra step is required, and because the DNS query was made initially for the site the query is cached, meaning it doesn't have to make it again to get the files
  53. 6. If the code contains relative links, the request is prepended with the appropriate hostname and then the server provides the appropriate file. Again, the DNS query is cached, so no additional steps are necessary.
  54. 7. All the files are eventually requested / received and your browser displays the completed page.
  55.  
  56. ### WARNING: this point and beyond gets highly technical ###
  57. --------------------------------------------------------------------------------
  58.  
  59. Let's take a look from the server / browser perspective how the code actually gets interpreted and what the server sees:
  60.  
  61. Example code on a page:
  62.  
  63.     <html>
  64.     <head><title>path test</title></head>
  65.     <body>
  66.     This image loaded by relative path:<br />
  67.     <img src="prop-service.jpg" /><br />
  68.     This image loaded by absolute path:<br />
  69.     <img src="http://heyjosh.net/lw/prop-support.jpg" /><br />
  70.     </body>
  71.     </html>
  72.  
  73.  
  74.  
  75. 10.20.7.143 - - [10/Oct/2013:10:37:59 -0400] "GET /lw/pathtest.html HTTP/1.1" 200 248 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36"
  76.  
  77. 10.20.7.143 - - [10/Oct/2013:10:37:59 -0400] "GET /lw/prop-service.jpg HTTP/1.1" 200 8777 "http://heyjosh.net/lw/pathtest.html" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36"
  78.  
  79. 10.20.7.143 - - [10/Oct/2013:10:37:59 -0400] "GET /lw/prop-support.jpg HTTP/1.1" 200 7540 "http://heyjosh.net/lw/pathtest.html" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36"
  80.  
  81.  
  82.  
  83.  
  84. GET /lw/prop-support.jpg HTTP/1.1
  85. Host: heyjosh.net
  86. User-Agent: Mozilla/5.0 (X11; Linux i686; rv:17.0) Gecko/20100101 Firefox/17.0
  87. Accept: image/png,image/*;q=0.8,*/*;q=0.5
  88. Accept-Language: en-US,en;q=0.5
  89. Accept-Encoding: gzip, deflate
  90. Connection: keep-alive
  91. Referer: http://heyjosh.net/lw/pathtest.html
  92. Pragma: no-cache
  93. Cache-Control: no-cache
  94.  
  95. GET /lw/prop-service.jpg HTTP/1.1
  96. Host: heyjosh.net
  97. User-Agent: Mozilla/5.0 (X11; Linux i686; rv:17.0) Gecko/20100101 Firefox/17.0
  98. Accept: image/png,image/*;q=0.8,*/*;q=0.5
  99. Accept-Language: en-US,en;q=0.5
  100. Accept-Encoding: gzip, deflate
  101. Connection: keep-alive
  102. Referer: http://heyjosh.net/lw/pathtest.html
  103. Pragma: no-cache
  104. Cache-Control: no-cache
  105.  
  106.  
  107.  
  108. When a website is loaded, any CMS in use will deliver a single HTML file, generated by PHP.  That flat HTML is the first thing the browser receives.  It contains the HTML code for the page, from <html> to </html>.  It contains no images, and little to no CSS/javascript.  It only contains HTML code, and other embedded flat text scripting (CSS/Javascript) which is inline in that HTML.
  109.  
  110. The *browser* then makes subsequent requests for any images or other elements.  Whether the references are absolute or relative, makes no difference.  The browser still makes the same request to the server, from its own IP.  In short, it is the *browser* which translates relative paths to absolute, by prepending the request with the appropriate hostname.
  111.  
  112.  
  113.  
  114.  
  115.  
  116.  
  117.  
  118. http://www.boogiejack.com/server_paths.html
Language:
To highlight particular lines, prefix each line with @@





© 2017 - Powered by PASTE 1.0