I have simple IIS Structure:
DefaultWebSite
testapp
DefaultWebsite - landing page reachable by going to 192.168.1.5
testapp - web application reachable by going to 192.168.1.5/testapp
testapp's index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test App</title>
<base href="/testapp/" >
</head>
<body>
Test Link
</body>
</html>
I'm using base tag to set base of the app, so when clicking on Test Link I would expect just to reload the page as it is pointing to documents root.
But this is not the case. Clicking on the "Test Link" takes me to the index of DefaultWebSite.
Is this the way how this should work or am I not understanding the the base tag correctly ...
The base tag only applies for all relative URLs. So, with the base tag like <base href="/testapp/"> the following would apply.
link
would refer to the DefaultWebsite.
But
link
Would refer to your testapp.
base only comes into play on relative hrefs. So
Test
is not affected by base at all.
BalusC has a very informative answer on its uses at https://stackoverflow.com/a/1889957/451600
Related
I want to hide my gitweb instance behind a reverse proxy. So I set my base url to /gitweb but some URLs are still broken.
As I debugged the problem I found that the following stylesheet is loaded from /gitweb.css instead of /gitweb/gitweb.css.
<base href="/gitweb" />
<link rel="stylesheet" type="text/css" href="gitweb.css"/>
I've found a fix for this problem which says these links are interpreted as absolute urls. Unfortunately I'm not using Apache - which was used in the fix.
Anyway. I'm just wondering why href="gitweb.css" is not using the base href
He does, but the missing slash makes that the browser thinks "gitweb" is a page and only use the "/". Which is the same as base.
See: https://stackoverflow.com/a/1889957/4516689
Or the example in the spec: http://www.w3.org/TR/html5/document-metadata#the-base-element
<!DOCTYPE html>
<html>
<head>
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the archives.</p>
</body>
</html>
The link in the above example would be a link to
"http://www.example.com/news/archives.html".
I'm trying this base element in my local machine, but it's not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>this is an html base element exampe</title>
<base href="/home/sugumar/Desktop/html/base.html"/>
</head>
<body>
<p>Is it working</p>
click here
<img src="/images/html5.png">
</body>
</html>
link is not working.
Image is not showing.
I'm using Debian, and Mozilla Firefox.
The URL /home/sugumar/Desktop/html/base.html is relative to the server root, since it begins with the slash character /. When you view a document locally, there is no server, hence no server root, and the effect of setting base URL is thus undefined.
The solution is that you don’t use the base element and set addresses relatively to the current document, e.g. ../images/ptsb.html.
I'm trying to set a local site-root using the base tag. The following code isn't working. Am I doing something wrong? How do I set the mysite folder as base?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="file:///home/me/mysite"></base>
<title> Asset Take On Process </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>
<body>
some stuff
</body>
</html>
The site folder structure is
mysite
|___css
|___img
|___js
and so on..
When I load the web-page it doesn't see the main.css in the css folder at all.
If you remove that /, it should make it relative off the current path, which, when a base tag is present would be
http://localhost/website/.
You will also need to add a trailing / to the end of the href, to indicate that it's a folder.
Full working example:
<!doctype html>
<html>
<head>
<base href="/test/" />
<script src="assets/test.js"></script>
<body>
hi
</body>
</html>
Actually depending on who you ask, it's still relative since it is relative off the current domain. But I prefer to call this absolute since it's signifying the path is from the root, based on the current domain. Although, I guess technically that makes it relative in the grand scheme of things, and absolute only in terms of the current domain. Whatever.
kindly refer this link
http://social.msdn.microsoft.com/Forums/ie/en-US/c51bb8b9-40ab-437b-a125-88b660f3e1ca/ie8-base-tag-issues
A correct tag would be
<base href="file:///home/me/mysite/"/>
if you wish to set file:///home/me/mysite/ as the base address, so that e.g. css/main.css refers to file:///home/me/mysite/css/main.css. Note the importance of the slashes. In an href value in base, anything after the last slash is ignored: file:///home/me/mysite means the same as file:///home/me/ there.
This is a confusing topic, and it is further confused by some browsers’ implementation that may support relative URLs in the value; by the specifications, only absolute URLs are permitted.
There is normally no reason to use the base element. Relative URLs such as css/main.css or ../css/main.css work just fine, specifying addresses as relative to the address of the HTML page. This means that they need not be changed if the site is uploaded onto a server.
Just to clarify the other answers:
The base tag must end in a slash.
The following URL's must not begin with slashes:
It's logical, because adding them together makes a complete address. But it's counterintuitive because we're used to using /images/image.jpg to make things work everywhere.
I want to have a new folder containing a set of new html files. All the images inside it are in the format src="image.png" and image.png is located in the root folder. But when you put the HTML file in a new folder it can't find the image. You have to have it in the format src="../root folder/folder/image.png" to make it work. Which would mean a lot of pasting. I have tried putting image.png inside the folder but no change.
Use the <base> element. It allows you to specify a URL for all relative URLs in a page.
For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the archives.</p>
</body>
</html>
The link in the this example would be a link to "http://www.example.com/news/archives.html".
For you, the base URL may be something as simple as <base href="http://www.yoursite.com/">. This would make images specificed as src="image.png" resolve as "http://www.yoursite.com/image.png"
See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
You need to set the base tag. If you add the tag in your page <head> like this:
<base href="http://yoursite.tld/folder/">
it should display images and with sources relative to this base path.
I have a <base> tag as below in <head> section of the page:
<base href="http://localhost/framework">
And a script as below which is relative (of course after <base>):
<script src="/assets/jquery-1.7.1.min.js">
But when I open jQuery from firebug it shows:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
Blah Blah Blah....
When I use the below link it's OK though:
<script src="http://localhost/framework/assets/jquery-1.7.1.min.js">
I looked for an answer everywhere, but it seems I'm doing my job right! So what is the problem?
/assets/jquery-1.7.1.min.js is not relative but absolute*, the / takes it to the root even with a base tag.
If you remove that /, it should make it relative off the current path, which, when a base tag is present would be http://localhost/framework/.
Note: You will also need to add a trailing / to the end of the href, to indicate that it's a folder.
Full working example:
<!doctype html>
<html>
<head>
<base href="/test/" />
<script src="assets/test.js"></script>
<body>
hi
</body>
</html>
* Actually depending on who you ask, it's still relative since it is relative off the current domain. But I prefer to call this absolute since it's signifying the path is from the root, based on the current domain. Although, I guess technically that makes it relative in the grand scheme of things, and absolute only in terms of the current domain. Whatever.
Try having your base tag like:
<base href="http://localhost/framework/">
and your script tag like:
<script src="assets/jquery-1.7.1.min.js">