Relative path in HTML

Question

I am creating a website on localhost  I want to make all of link resources in my website to relative path   I mean only internal resources    website is located in   http   localhost mywebsite   I read this useful question Absolute vs relative URLs   I found differences between  images example png and images example png   lt a href   images example png  gt  Link To Image lt  a gt   Above relative path should return ROOT DOCUMENT images example png because of   at first of url  As ROOT DOCUMENT is something like  wamp www mywebsite  But when I tested it  it only return  wamp www images example png  And I should add manually my website folder  mywebsite images example png to relative path    lt a href  mywebsite images example png  gt  Link To Image lt  a gt    And it is not useful because of changing the name of mywebsite  So    Why does this problem occur  How can I resolve this problem

User · Answer

The relative pathing is based on the document level of the client side i.e. the URL level of the document as seen in the browser.

If the URL of your website is: http://www.example.com/mywebsite/ then starting at the root level starts above the "mywebsite" folder path.

User · Answer

The easiest way to solve this in pure HTML is to use the  lt base href       gt  element like so    lt base href  http   localhost mywebsite     gt    Then all of the URLs in your HTML can just be this    lt a href  images example png  gt Link To Image lt  a gt    Just change the  lt base href       gt  to match your server  The rest of the HTML paths will just fall in line and will be appended to that

User · Answer

You say your website is in http   localhost mywebsite  and let s say that your image is inside a subfolder named pictures    Absolute path  If you use an absolute path    would point to the root of the site  not the root of the document  localhost in your case  That s why you need to specify your document s folder in order to access the pictures folder     mywebsite pictures picture png    And it would be the same as    http   localhost mywebsite pictures picture png    Relative path  A relative path is always relative to the root of the document  so if your html is at the same level of the directory  you d need to start the path directly with your picture s directory name    pictures picture png    But there are other perks with relative paths   dot-slash       Dot     points to the same directory and the slash     gives access to it   So this    pictures picture png    Would be the same as this      pictures picture png    Double-dot-slash        In this case  a double dot      points to the upper directory and likewise  the slash     gives you access to it  So if you wanted to access a picture that is on a directory one level above of the current directory your document is  your URL would look like this       picture png    You can play around with them as much as you want  a little example would be this   Let s say you re on directory A  and you want to access directory X   - root     - a        - A     - b     - x        - X   Your URL would look either   Absolute path    x X picture png    Or   Relative path        x X picture png

[html] Relative path in HTML

Examples related to html

Examples related to relative-path

Examples related to relative-url