HTML Base URL and links

Question

I have the following problem:

The URL is http://www.myhomeurl.com/application1/ and the base is:

<base href="http://www.myhomeurl.com/"/>

All resources like images, css and javascript will be at:

http://www.myhomeurl.com/css/myfile.css
http://www.myhomeurl.com/js/myscript.js
http://www.myhomeurl.com/images/img.jpg

BUT, the link will be at "application1", for example:

http://www.myhomeurl.com/application1/page1.html
http://www.myhomeurl.com/application1/page2.html
http://www.myhomeurl.com/application1/page3.html

The question is: How to apply base URL for resources (like css, js, etc) and apply the base/application1 for page links?

Here is a problem when I have:

<a href="page1.html">Click me!</a>

When the user clicks this the page will going to:

http://www.myhomeurl.com/page1.html

and not to:

http://www.myhomeurl.com/application1/page1.html

danieelito · Accepted Answer

Change like this on your resources

<link href="./css/myfile.css" rel="stylesheet" type="text/css" />

Not like

<link href="http://www.myhomeurl.com/css/myfile.css" rel="stylesheet" type="text/css" />

And your base it looks like this

<base href="http://www.myhomeurl.com/application1/"/>

George Marshall · Answer

You could use a base tag and change it so all urls can be relative to the applications base.

<!DOCTYPE HTML>
<html>
  <head>
    <base href="http://www.myhomeurl.com/application1/" />
  </head>
  <body>
    <!-- content -->
  </body>
</html>

Additional information can be found at http://www.w3schools.com/tags/tag_base.asp

edit: w3c spec on base tag http://www.w3.org/TR/html4/struct/links.html#h-12.4 also illustrates how to pull images from other locations.

Donate For Us