Using anchors on a page with <base> set - html

If I set my base url like so:
<base href='http://example.com' />
And then put a link to an anchor on the page http://example.com/test.php:
<a href='#top'></a>
How do I make sure the anchor stays on the same page and goes to the link http://example.com/test.php#top as opposed to going to http://example.com/#top because it uses the base url?
Essentially, is there any way to specify that this particular link must be relative and not use the base?

You could either do:
<base href='http://example.com' />
<a href='test.php#top'></a>
or
<base href='http://example.com/test.php' />
<a href='#top'></a>
I don't think there is any magic way that the client is going to know what file to use as part of the base if you don't define it.

Related

Can I use relative <a href=#foo> and go to a named anchor on the current page when when <base> is being used?

If I have a page www.example1.com/foo/test.html as follows:
<head>
<base href=http://www.example2.com/>
</head>
<body>
<a href=#foo>foo</a>
...
<a name=foo />
</body>
Then when I click "foo" it takes me to http://www.example2.com/#foo instead of the current page's foo. I suppose this sort of makes sense, but is there a way to do a page-local named anchor jump when <base> points somewhere else?
Note that test.html is named named dynamically, so an absolute path in the href=...#foo isn't an option. Some JS could be, but strait html would be preferred.
This is expected behavior, documentation says that all relative links are relative to including anchors:
http://w3schools.com/tags/tag_base.asp
See also:
href="#" redirects to the index page but not to the current page's top

HTML <a> local links , target="_blank" not work

I have this problem: when I set the "href" attribute a relative URL like:
<a href="/app/site/index.php" target=“_blank”>test</a>
it could not open the linked document in a new window or tab, but when I change the "href" to a absolute URL like:
<a href="http://www.ou-lee.com/app/site/index.php" target=“_blank”>test</a>
the "target" attribute is worked.
What's the difference between both??
Just a guess here based on the limit information you have provided:
if your html page containing the link is already in http://www.ou-lee.com/app/site/ for instance http://www.ou-lee.com/app/site/somepage.php
then the relative path should just be index.php : <a href="index.php" target=“_blank”>test</a>
the relative path is relative to your current position (folder), not to the root domain.
Another example to make this clearer, if your current page is in http://www.ou-lee.com/somefolder/ and you want to use a relative url to get to app/site/index.php. First you would have to go up one level ../ then you would go to app/site/index.php so your entire href should be: ../app/site/index.php
<a href="../app/site/index.php" target=“_blank”>test</a>
Without knowing your folder structure, I can only assume it is one step above.
Another way will be to use,
<base href="~/" />
after your title tag, so you're pointing to root, and then you can use what you had.
<a href="/app/site/index.php" target=“_blank”>test</a>

Hyperlinking a page to a local page (in files) HTML

Im trying to set up a hyperlink from my current page to another page via my files, however it doesn't work...
My code:
<ahref="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html"><input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/About.PNG">
<!-- Thats in context, the HREF is following-->
<ahref="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
Once i click the hyperlink it comes up with an error that repeats the directory:
file:///C:/Users/ashsa_000/Desktop/Html/6%20weeks%20project/file///C:/Users/ashsa_000/Desktop/Html/6%20weeks%20project/Index/Languages.html
How can i fix this?
First of all, the tag in conjunction with the href attribute work as follows <a href="path/to/file.html">. Noticed the difference (space)?
Secondly, if the file is in the same folder, all you need to do is reference the file that you want to link starting from that path and upwards.
You were on the right track, your href would become: {}
Consider naming files with lowercase letters only. Its not necessary, but a well accepted practice!
The <a> must have a space between the a and href: <a href="">
When you use the href attribute, the path will be based on which file you put the <a> in, e.g. if you put the <a> in the index.html, and you want to reference to languages.html, first make sure that the languages.html is in the same folder as index.html (easier) and then just reference to it with:
<a href="languages.html">
Also, why are you using an input tag? Just use an img tag. I'll fix your code:
<a href="languages.html">
<img id="Languages" style="position: absolute; height:_px; width:_px;" src="CSImages/About.PNG">
</a>
This only works if the folder CSImages is in the same directory as index.html If not, just change the path accordingly.
Hope this helps!
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/About.PNG">
</a>
As mentioned in comments, you should put a space between a and href. Additionally, you should close the a tag.
Why are you using an input element for showing an image? Maybe you are better off with an actual image tag:
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<img id="Languages" style="position:absolute; height:[insert missing value]px; width:[insert missing value]px;" src="./CSImages/About.PNG">
</a>
You may also have a look at this SO question for more reference on links to local files: How can I create a link to a local file on a locally-run web page?
Add the space in the a href, put the image in an img tag, and don't include height and width unless you are going to include a value. Also position:absolute has to go in a style tag. Finally, close your a tag.
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<img src="./CSImages/About.PNG" style="position:absolute">
</a>

"Back to the top" button with BASE tag

In my HTML, I am currently using the following BASE tag to simplify file management:
<base href="../" target="_blank" />
I am willing to add a 'top of the page' button at the bottom of a page. The following line will not work, probably because the base is one directory up.
<a id="back2top" class="button" href="#">Back to the top</a>
So I tried this instead (where the href points to the page itself):
<a id="back2top" class="button" href="fr/1_calendar.html">Back to the top</a>
However, when I click on the button, the bowser does 2 things:
- it goes to the top of the page (what I want)
- and opens a new window (tested on IE and Chrome).
Is there a way I can:
- either override BASE so that href="#" works
- or prevent the second window from opening
If you use <base href=...>, it by definition affects all relative URLs. It cannot be overridden; the only way to prevent it from affecting a URL is to use a relative URL.
So if <base href=...> is used, the only way in HTML to set up a link to the start of a document is to use one with a href specifying the absolute (full) URL of the document itself.
On the other hand, by the spec the href value in base tag must be an absolute URL. So whatever the tag does in your case is to be classified as undocumented error handling.
If you can use javascript this would work:
function goToTop(){
window.scrollTo(0,0)
return false; //prevent page from reloading
}
Your html could look like:
Back to the top
or:
<a onclick="javascript:goToTop()">Back to the top</a>

Anchor links in HTML documents

At this URL
boiseresturants.com/mexican/baja-fresh-mexican-grill.html
I have an anchor link that looks like
his is a test
Now I expected the above link to appear as
boiseresturants.com/mexican/baja-fresh-mexican-grill.html#takemehere
But it points to
boiseresturants.com/#takemehere
Why is this happening? I have never seen something like this before.
The reason it's jumping to the home page is because the page has <base> set in the <head>:
<base href="http://www.boiseresturants.com/" />
Either drop that or be more specific with your anchors like so:
Take Me Here
The base element is causing that unexpected behaviour...
<base href="http://www.boiseresturants.com/" />
You'll need to use the full path.