Hyperlinking a page to a local page (in files) HTML - 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>

Related

my links using html aren't working?

So I'm working on a website
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
<p> - <a herf="Pages/PaintEverything.html">
Paint Everything
</a> - </p>
and the code here isn't working, none of the links work! I've coded a little program on my website, and this is supposed to take you to it, but it's not working, please help!
Use href instead of herf.
Paint Everything
HTML Tags
The correct way to include a link in your HTML is to use the href element (you mis-spelt it as herf.
Secondly, you cannot use href inside an img tag as it's not valid HTML. Instead, you should nest the img tag inside the link.
Update your code to this:
<a href="Pages/PaintEverything.html">
<img src="Images/PaintEverythingPreview.png">
</a>
<p>
Paint Everything
</p>
To validate (check) your HTML in the future, try the W3C Validator
error writing the attribute href.
Paint Everything
error in attribute href in img tag (not exists):
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
html tag reference: HTML tags list
Change herf to href and enclose the img in <a> tags to make the image a clickable link.
<img src="Images/PaintEverythingPreview.png">
Firstly you need to remove href from the image tag, since you cannot put a href in an <img> tag.
Secondly you need to check if the path/link to which you want to redirect to, is correct or not.
I have updated your code and let me know if this is what you are looking for.
<img src="Images/PaintEverythingPreview.png"><p> - Paint Everything - </p>

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>

How make a div link to another page?

Something isn't right! I am trying to link this div to another page but it keeps giving me 404 error when I click it. I tried replacing the page with google.com and it worked fine! I know this page works because if i run it alone in a browser it works fine! Whats going on??
<a style="display:block" href="../unitedStates.php">
<div id="regionsUnitedStates" class="not-open regionsButton">
<div id="regionsUnitedStatesTooltip"></div>
</div></a>
You href your div to parent directory with "../". Instead this use :
<a style="display:block" href="/unitedStates.php">
your path in href is doesnot exists. Try checking the absolute url of your path in browser and add it in href.

Anchor link not working when clicked

Sooo.. I've got this navigation on the frontpage. I'm trying make it link to an anchor on another page.
www.oddfuse.com
This is the anchor link:
<a class="hover" title="Skills" href="/page#skills">
As you can see, it does not redirect to the specified page.
However it does work when typed directly into the address bar:
www.oddfuse.com/page#skills
This also works:
<a class="hover" title="Skills" href="/page">
But with the hash, I get no response whatsoever.
Any ideas on how I fix this?
Okay, so it turned out that it was the jQuery Mobile somehow messing with the anchor tags.
I needed to put data-ajax="false" in the link, and it now works perfectly. TMYK.
Found the solution here
can you try including the file extension?
i.e.
<a class="hover" title="Skills" href="/page.html#skills" />
I'm wondering if it thinks the # is part of a file name that can't be found.
If you want a link to jump a specific location on a different page, you'll need to replace #anchor with the full URL for the target page, similar to:
<a class="hover" title="Skills" href="http://oddfuse.com/page/#skills">

"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>