I have been running a localhost website with react.js while I am building a website and when I am trying to link to an external site (e.g. youtube) it ends up going to a link like this:
http://localhost:3000/www.youtube.com
while I am trying to go to:
https://www.youtube.com
I am using this to get my link:
<a href='youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
You need to specify the protocol, or put // at the start of the href attribute. For example:
Try using a protocol like http:// or // to external links like this :
<a href='https://youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607
Try this:
<a href='https://youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
It's easy to use HTML to open a link in a new tab. You just need an anchor () element with three important attributes:
The href attribute set to the URL of the page you want to link to.
The targetattribute set to _blank, which tells the browser to open the link in a new tab/window, depending on the browser's settings.
The rel attribute set to noreferrer noopener to prevent possible malicious attacks from the pages you link to
try using this
youtube
Related
I was working on tag and let say my domain was www.abc.com. If I use href="http://example.com" it does properly navigate to intended url. However if I use href="www.example.com" it doesn't navigate to intended url.
not properly navigate
properly navigate
properly navigate
I was reading the anchor specs in https://html.spec.whatwg.org, unfortunately could not find this specific case.
The browser must know if you want to link to another website or a different file/page of your own website. The browser always asumes that you want to link to a file on your own server if you do not specifiy the protocol.
In fact: The only reason you can leave the protocol out when typing a url into the addressbar of your browser is because the browser just asumes that you want to use the http-protocol. This is not possbile with urls inside the A tag.
If you don't specify an absolute url it will think it's a route inside your site.
Possible values using href attributes:
An absolute URL - points to another web site (like href="http://www.example.com/default.htm")
A relative URL - points to a file within a web site (like href="default.htm")
Link to an element with a specified id within the page (like href="#top")
Other protocols (like https://, ftp://, mailto:, file:, etc..)
A script (like href="javascript:alert('Hello');")
Because When you click on it.. Your Browser Will suppose he need to find this link in the same file extension.
Example: if your html file extension is e://tst.html
when click on tag at Browser it will go to e:// and search about file with name "www.google.com" and not find it..
Use not properly navigate to inform Browser you need to navigate to Another website
I am using a local server for my applications and sometimes when I created a button or a link to another page in a new tab, it turns out to not working properly. It's not always like this, but sometimes, might sound silly. I give example below.
Let's say my application is **programmingworld** which exists in www folder, then in index.html file, I create a link for a button like this
Download Codes</div>
When I open it in a browser and click the button, sometimes it goes to http://localhost/programmingworld/www.google.co.uk where nothing is displayed on the page. It supposed to be www.google.co.uk in the new tab where I can see the google homepage.
Can you please tell me why?
You should write:
Download Codes</div>
If you didn't write http:// at the the beginning of the hyperlink, it will be search you your local directories or files.
To make sure that the link goes to where you intend and not where it goes try adding // or http://.
Example:
Google
or
Google
With // it will try http and https.
You're missing https:// before www.google.co.uk
So you're markup should look like this:
<a href="https://www.google.co.uk">
<div class="button" id="button=popup">Download Codes</div>
</a>
you can also do it like this (no https):
<a href="//google.co.uk">
<div class="button" id="button=popup">Download Codes</div>
</a>
Because you haven't included the protocol in your URL. it must start with either http:// or https://
Also, remove the div from inside the anchor tag.
Your question suggests that you need to do a little bit more testing on basic html.
I would most definitely suggest using https://
I've had similar problems such as that, and in order to fix them try adding https.
I have an angular app
<html ng-app='sampApp'>
</html>
I have an anchor link inside the app.
<a href='/user/profile'>Redirect here</a>
But the page is not getting reloaded on clicking the anchor tag. It just makes an ajax call to render the page.
Standard url used in angular start with #, unless you are using html5 model, so the anchor should be
<a href='#/user/profile'>Redirect here</a>
If you want to do full page refresh or page redirect, then you need to stop Angular from intercepting the route. Here is what location developer guide state regarding html link rewriting
Links that contain target element Example: link
Absolute links that go to a different domain.Example: link
Links starting with '/' that lead to a different base path when base is defined Example:link
I'm still really new to this web server thing.. But, I'm deploying a web site using tomcat. And, I've got a jsp page that has a link in it:
The html for the link is pretty simple:
. When I deploy the website locally, this works fine (it opens a new window with page == href). But, when I run the website using https, instead of creating a new window with the url, it creates a new window and adds "www.website.com" on to the url for the page that contained the link.
I'm wondering:
Is this a behavior of tomcat's SSL encryption, or is it something else?
How would I get the desired behavior (the link opens up a new window with
url == "www.website.com"?
You need to add http:// to the front of the href attribute in your link to the external website.
So, instead of Link text, you need Link text.
The reason for this is that links without the protocol in front of them are treated as relative links, meaning the href property in your <a> tag will just be appended to the base URL of your site. See http://www.w3schools.com/tags/att_link_href.asp.
I have inspected some sites and they have a pound(#) sign in the url. What does it do?
<a href="#" >Link name</a>
It's a "fragment" or "named anchor". You can you use to link to part of a document. Typically when you link to a page, the browser opens it up at the top of the page. But you link to a section half-way down, you can use the fragment to link to that heading (or whatever).
If there is no <a name="whatever"/> tag within the page, then the browser will just link to the top of the page. If the fragment is empty, then it will also just link to the top of the page.
For a fragment only Link name, then that's just a link to the top of the current page.
You often see that kind of link used in conjuction with javascript. Standards compliant HTML requires a href attribute, but if you're planning to handle the request with javascript then "#" serves as a reasonable place holder.
... just to add a few extra useful tips.
You can access and change it with document.location.hash in JavaScript.
It can point to a named anchor (e.g. <a name="top"></a>) or to an element with a corresponding id (e.g. <div id="top"></div>).
Seeing one on its own (e.g. popup) generally means a link is being used to run JavaScript exclusively. This is bad practice.
Any a element should have a href that points to a valid resource. If one does not exist, consider using another element, such as button.
The pound sign (#) indicates to locate an anchor on the page. For example, if you include this somewhere on the page:
<a name="foo"></a>
or, more recently:
<div id="foo">*part of page*</div>
and then you click on a link on the page that has the href #foo, it will navigate to the anchor with the name or div with the id foo.
However, if you just have the href #, it will lead to the top of the page.
# indicates a link to an anchor.
I thougt I'd also mention something else:
Using '#' as the href for a link that activates JavaScript is bad because it scrolls the page to the top - which is probably not what you want. Instead, use javascript:void(0).
This links back to the page itself. It's often used with links which actually run some JavaScript.
I think most of the posters here forgot how to use Internal Links.
A typical <a> element uses an href attribute to link to an external URL/URI (website). But most new developers do not realize you can also link to internal sections of your web page by using a "#" and an identifier instead. The easiest way to do this cross-browser, is using the following HTML:
This page link...
Go to Section 1
...goes to this page location.
<a id="section1" name="section1"></a>
The "#section1" href value is called a "fragment identifier" and will appear in your browser's url when you click the link. Your page will then look for this identifier in your HTML page and automatically scroll down the page to it.
Notice I have used the anchor <a> tag as my receiver to the link. Traditionally this is how most web pages used to use these types of page links. Using anchors you avoid having to rename existing elements. It is also semantically correct and a better way to manage these types of bookmarks. But....it's ok practice to use a <div> or other HTML element with an id and name matching attribute assigned as the bookmark for the fragment identifier.
I like to use both id and name attributes with the fragment identifier, as HTML5 often does not support the name attribute on some elements, while id may not be recognized for the page marker identifier in older browsers.
This shortened, nameless version below is often used by developers as a default URL "stub" for an unknown URL added later to an anchor, to trigger a page refresh, or enable a link but let a Javascipt method capture the click event and route off somewhere else. This makes the "#" a nice fallback should the Javascript piece fail. It then becomes a nice Javascript-free refresh link. The "#" can also be a useful URL "filler for the "href" value when a missing or blank URL on an element might otherwise trigger some problem or style:
Go to the Top
The specific question was "I have inspected some sites and they have a pound(#) sign in the url. What does it do?"
An example is then given:
<a href="#" >Link name</a>
A consistent valid answer is given for jumplinks (whatever you want to call them) however the CSS :target psuedoselector would absolutely makes use of the hash in a URL as well.
It doesn't change the answers. However gives another use case I thought would be valuable, to not belabor, see the below excellent link which explains:
However, https://css-tricks.com/on-target/