How to put in the current website url in Share button? - html

I coded some basic share buttons in HTML and CSS. I want to place these buttons on 300 different pages on a simple HTML website.
Is there a easy way to ask for the current link of the website instead of typing in the website URL manually?
Example:
Page 1 www.site.com/home.html
<a class='share-facebook' href="http://www.facebook.com/sharer.php?u= www.site.com/home.html" target="_blank">
This will now share the home page through Facebook:
Page 2 www.site.com/info.html
<a class='share-facebook' href="http://www.facebook.com/sharer.php?u=[current website url-tag or code?]" target="_blank">
What do I type in at "current website URL tag or code" to get the desired outcome? (share www.info.html without actually manually typing in the URL)
Is it even possible with only HTML? If not, how should the JS look like?

No, this isn't possible with pure HTML. In fact, this is often done server-side using languages such as PHP:
<a class='share-facebook' href="http://www.facebook.com/sharer.php?u=<?="http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"?>" target="_blank">
In JavaScript, you'll probably have to assign an id to your link first.
HTML:
<a class='share-facebook' href="http://www.facebook.com/sharer.php?u=[current website url-tag or code?]" target="_blank" id="facebook-button">
JavaScript:
document.getElementById("facebook-button").href="document.URL";

Related

Why is my simple HTML link not working despite seemingly correct code

I create a simple one page website with text using Big Rock's webcreator. I tried to link one of the lines one the page using HTML in the following way:
<a href="iimk.ac.in/faculty-profiles/ASHOK-THOMAS">iimk.ac.in/faculty-
profiles/ASHOK-THOMAS</a>
The hyperlink however is not working. I would like to fix the error in the HTML code.
Try this your link is not correct as it doesn't covers the proper URL of the page:
<a href="https://iimk.ac.in/faculty-profiles/ASHOK-THOMAS">iimk.ac.in/faculty-
profiles/ASHOK-THOMAS</a>
Visit this link to see the proper working of the hyperlink:
https://i.stack.imgur.com/KFSB9.png
your link is not correct with the https formatting so just use this
<a href="https://iimk.ac.in/faculty-profiles/ASHOK-THOMAS">iimk.ac.in/faculty-
profiles/ASHOK-THOMAS</a>

How to pick the page icon tab and put as icon link in my body page Html, Css

I was doing a page with a list of sites I need to visit daily, such as exercise to learn Html, CSS. I would like to know if it is possible to create a link with a page icon that is in the upper tab of the browser (chrome).
Ex: I want to list StackOverflow on my site. So I create a link and for the icon, I want to use the image that is on the tab of the page itself, as in this:
You can use:
https://plus.google.com/_/favicon?domain=www.yourlink.com
example
<a href="">
<img src="https://plus.google.com/_/favicon?domain=www.stackoverflow.com"> Stackoverflow
</a>
If I'm correctly getting what you want, you'd need to either have a local copy or link to the sites' favicon, like so:
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" />

Button to PDF on HTML

Is there any way to make a button linked to a document (PDF) on HTML?
As additional data, this button would be an image.
PS: I am using Notepad++.
Thank you.
Yes. Simply use a regular link:
<a href="http://example.com/myPDF.pdf">
<img src="http://example.com/myImage.jpg">
</a>
And if you want it to open in a new window as to not divert traffic...
<a href="http://example.com/myPDF.pdf" target="_blank">
<img src="http://example.com/myImage.jpg">
</a>
Also, I should mention that the text editor you use is irrelevant in this question, because Notepad++ is just want you use to write the HTML. It's not specific to any one editor.
Something like this
<img src="yourImage.jpg"></img>
And yes this also works with Notepad++ ;-)
If you have a button-looking image foo.png and the PDF document has the URL hyps.pdf and the title “Hypsology”, you can use a link like the following:
<img alt="Hypsology (PDF)" src="foo.png">
What happens when a user clicks on the image depends on his browser and its settings.

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

Getting a link to go to a specific section on another page

I have a link on one page that needs to go to a different page, but load to a specific section on that other page.
I have done this before with bootstrap but they take all the 'coding' out of it, so I need to know how to do from scratch. Here is the markup I have based on this link (not the best resource, I know): http://www.w3schools.com/html/html_links.asp
**Page One**
<a href="/academics/page.html#timeline> Click here </a>
**Page I am linking to**
<div id="timeline" name="timeline"> ... </div>
Can I do this with just HTML, or do I need some JavaScript? If I need to do it via JS, it needs to be on the target page, right?
I believe the example you've posted is using HTML5, which allows you to jump to any DOM element with the matching ID attribute. To support older browsers, you'll need to change:
<div id="timeline" name="timeline" ...>
To the old format:
<a name="timeline" />
You'll then be able to navigate to /academics/page.html#timeline and jump right to that section.
Also, check out this similar question.
You can simply use
<a href="directry/filename.html#section5" >click me</a>
to link to a section/id of another page by
To navigate to a section of another page use:
<a href="example.html#example-section>name-of-link</a>
The example.html would be the page you want to go to, and the #example-section would be the name of the id on that page that you want to navigate to.
To link from a page to another section of the page, I navigate through the page depending on the page's location to the other, at the URL bar, and add the #id. So what I mean;
This takes you #the_part_that_you_want at the page before
I tried the above answer - using page.html#ID_name it gave me a 404 page doesn't exist error.
Then instead of using .html, I simply put a slash / before the # and that worked fine. So my example on the sending page between the link tags looks like:
El Chorro
Just use / instead of .html.
To link from a page to another section just use
my first div